Tab-Inhalte mit jQuery und WP_Query implementieren

Wordpress bietet eine Fülle von Informationen zu Ihrem Blog und seinen Inhalten. Die Anzeige einer großen Menge dieser Informationen kann Platz beanspruchen. Eine großartige Lösung sind Tab-Inhalte!

In diesem Tutorial übernehmen wir das zuvor verwendete WordPress-Zeitungslayout und erweitern es um Tabs.

Vorwort

Ja! Wir verwenden eine schöne und leistungsstarke Kombination aus jQuery-Animationen und der Funktion .bind, perfekt gemischt mit dem vielseitigen WP_Query() von Wordpress und dem einzigartigen bedingten Markup von Wordpress. Wenn Sie wie ich sind, möchten Sie erst das fertige Produkt sehen, bevor Sie etwas unternehmen:

Dieses Tutorial erfordert die neueste Version von jQuery, wenn Sie nurdiesem Tutorial folgen möchten. Laden Sie es hier herunter. Andernfalls sollte es bereits in meinem vorbereiteten Theme enthalten sein, das Sie hier herunterladen können: myTheme.

Wir gehen davon aus, dass Sie bereits über eine Live-WordPress-Installation verfügen, entweder lokal oder gehostet. Ein Tutorial zum nativen Ausführen von Wordpress unter Windows finden Sie hier und ein Tutorial zu OS X hier. Die Aktivierung des Themes, das ich zuvor vorbereitet habe – myTheme – wird sehr hilfreich sein. Wir werden darauf näher eingehen, also öffnen Sie index.php und beginnen Sie mit der Bearbeitung!

Schritt 1 – Neues strukturelles HTML.

Natürlich brauchen wir neues HTML. Es ist ganz einfach. Wir brauchen nur ein paar zusätzliche Divs, um alles zu verpacken, was wir verwenden. Platzieren Sie den folgenden Code nur oben

:

<div id="container">
	<div id="header">
		<h1>iBlog - Wordpress and jQuery together in <em>Harmony.</em></h1>
	</div>
		

Und wir müssen das letzte hinzufügen, bevor wir enden

第 2 步 - 条件标签

所以我们喜欢我们即将制作的选项卡式内容，但我们只想将其放在首页上以供展示！你问第一页怎么可能有独家代码！？简单的。 WordPress 的条件标签。这是一个值得学习的宝贵教训！条件标签提供了一种非常强大的方法来自定义您的主题！它们非常不言自明，但我将在代码下方给出基本概要。将其添加到 index.php 中全新的 h1 元素下。

<?php if(is_home()) {include(TEMPLATEPATH.'/tabbedContent.php'); } ?>

你明白这是什么了吧？ if(is_home()) 是我们这里的条件，因此如果当前浏览的页面是home，请包含我们的 tabbedContent.php 文件。接下来我们将创建它。

第 3 步 - tabbedContent.php (HTML)

现在我们要求 Wordpress 在主页时包含 tabbedContent.php，但我们仍然需要实际的文件和内容！在“myTheme”目录中创建一个新文件，并将其命名为 tabbedContent.php。将以下内容键入或粘贴到这个新文件中：

<div id="tabsAndContent">
			<ul id="tabsNav">
				<li><a href="#recentArticles">Recent Articles</a></li>
				<li><a href="#monthlyArchives">Monthly Archives</a></li>
				<li><a href="#searchArea">Search</a></li>
			</ul>
			<ul id="tabContent">
				<li id="recentArticles">
					<ul>
						
						<!-- WP_QUERY GOES HERE -->
						
					</ul>
				</li>
						
				<li id="monthlyArchives">
					<ul>
						
						<!-- WP_ARCHIVES GOES HERE -->
						
					</ul>
				</li>
						
				<li id="searchArea">
					
					<!-- WP SEARCH GOES HERE -->
					
				</li>
			</ul>
		</div> <!-- div#tabsAndContent -->

太棒了。目前，这只是原始 HTML，没有添加任何 Wordpress 或 jQuery。这并不是什么新鲜事，但让我稍微解释一下布局。

• #tabsNav - 这些是可点击的选项卡！我们添加了相应内容
• 的 href 属性。确保href与其相应内容列表项的ID名称匹配！
• #tabContent - 我们使用的
  与 Wordpress 的侧边栏没有什么不同，因为它很容易设计样式，而且本质上是一个内容列表！我认为这个元素的内容是不言自明的。

  第 4 步 - tabbedContent.php（Wordpress 函数）

  现在已经完成了，它看起来仍然有点空。因此我们需要将 <-- --> 注释替换为实际内容！我们将从 WP_Query()、wp_get_archives() 和搜索表单开始。

  4.1 - WP_Query()

  又是一个值得学习的宝贵教训。如果您想做我们正在做的事情或“特色帖子”，那就太棒了。基本上，它是页面上任何位置的简化循环。这很棒。因此，剪下 WP_Query 的注释标签，然后输入以下内容：

  <?php $recent = new WP_Query("showposts=5");
  	while($recent->have_posts()) : $recent->the_post();?>
  		<li>
  			<a href="<?php the_permalink();?>" title="Link to <?php the_title(); ?>"><?php the_title(); ?></a>
  		</li>
  <?php endwhile; ?>
  

  WP_Query() 非常棒。是的，这是一个循环。但不是全部。我们所做的只是告诉内在的循环向我们显示 5 个最新帖子的列表。 WP_Query 括号内的字符串可以是任何内容...按日期、类别、标签、限制等进行过滤。这是一个极好的理解工具，而且另一个很有价值从中吸取的教训！

  4.2 - 档案

  如果您经常使用 WordPress 主题，您应该知道如何执行此操作。这是对每月档案列表的基本调用。为了匹配 WP_Query 部分，我们只需要 5 个（自动按降序排列）。只需使用以下内容切换 tabbedContent.php 中的 <-- WP_ARCHIVES GOES HERE --> 即可：

  		<?php wp_get_archives('type=monthly&limit=5'); ?>
  

  4.3 - 搜索

  我们将仅使用非常简单的输入和搜索，使用我在自己的模板中始终使用的默认搜索。将 WP SEARCH 注释替换为：

  <form method="get" id="searchForm" action="<?php bloginfo('home'); ?>">
  	<p>
  		<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
  		<input type="submit" id="searchSubmit" value="Search!" />
  	</p>
  </form>
  

  太好了，现在您应该在 myTheme 目录中拥有一个名为 tabbedContent.php 的新文件，并在 index.php 中拥有条件标记。如果您正确地遵循了所有内容，您的主题应该如下所示：

  

  还没有那么漂亮...或者选项卡式、jQueried 或CSS 都可以。但这只是一个开始，很高兴知道我们的 WordPress 代码可以工作！我们已经完成了 tabbedContent.php，所以您现在可以关闭它！

  第 5 步 - CSS

  我们需要将选项卡融入其中，成为页面的一部分。目前，他们是丑陋的一面。我们需要首先为没有启用 JavaScript 的人制作页面，以实现优雅的降级。如果你想让它像我一样漂亮，你需要一些图像。以下是它们的列表（右键单击并另存为 myTheme 目录中的图像文件夹！）

  • searchInputBg.png
  • tabContent.png
  • tabContentHover.png
  • tabsNavBg.png
  • tabsNavActive.png
  • tabsNavHover.png

  要么输入，要么粘贴这个巨大的 CSS 块。这里没有什么新内容，我们只是将选项卡与“帖子详细信息”对齐，并将内容与主要内容白色列对齐，并使用 :hover 实例几次。

  /*------TABS------*/
  
  #container{
  	width: 600px;
  	margin: 0 auto;
  }
  
  h1{
  	font-size: 1.3em;
  	text-transform: uppercase;
  	color: #949494;
  	letter-spacing: 1px;
  }
  
  #tabsAndContent ul, #tabsAndContent li{
  	padding: 0
  }
  
  ul#tabsNav{
  	float: left;
  	width: 200px;
  	list-style: none;
  }
  
  ul#tabsNav li{
  	background: url(images/tabsNavBg.png) no-repeat center #a8a8a8;
  }
  
  ul#tabsNav li:hover{
  	background: url(images/tabsNavHover.png) no-repeat center #eee;
  }
  
  ul#tabsNav *:focus {
  	 outline: none
  }
  
  ul#tabsNav li.active{
  	background: url(images/tabsNavActive.png) no-repeat center #fff;
  }
  
  ul#tabsNav li.active a{
  	color: #303030;
  }
  
  ul#tabsNav li a{
  	padding: 1em 15px;
  	margin: 0 0 1em 0;
  	display: block;
  	width: 170px;
  	text-decoration: none;
  	color: #7e7e7e;
  	font: 11px/20px Georgia;
  	text-transform: uppercase;
  }
  
  ul#tabsNav a:hover{
  	color: #0a0a0a
  }
  
  ul#tabContent{
  	margin: 1em 0 0;
  	background: url(images/tabContent.png) no-repeat top right#fff;
  	min-height: 180px;
  	width: 350px;
  	float: left;
  	list-style: none;
  	padding: 0 25px;
  	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  }
  
  #tabContent>li{
  	width: 350px;
  	list-style: none;
  	padding: 0 25px 20px 0;
  }
  
  #tabContent li ul li{
  	list-style: none;
  }
  
  #tabContent li ul li a{
  	display: block;
  	border-bottom: 1px solid #e7e7e7;
  	padding: 10px 0;
  }
  
  #tabContent li ul li a:hover{
  	background: url(images/tabContentHover.png) no-repeat center bottom;
  }
  
  form{
  	padding: 30px;
  	
  }
  
  form input{
  	background: url(images/searchInputBg.png) repeat-x #ddd;
  	border: 2px solid #cbc6c9;
  	border-right: 0;
  	padding: 5px;
  	margin-right: 0;
  	color: #fff;
  	font: 16px Georgia, "Times New Roman", Times, serif;
  }
  
  #searchSubmit{
  	border-left: 0;
  	border-right: 2px solid #cbc6c9;
  	margin-left: 0;
  	position: relative;
  	left: -3px;
  	color: #00416c;
  }
  
  #searchSubmit:hover{
  	background: url(images/tabContentHover.png) no-repeat center;
  	color: #003459;
  	cursor: pointer;
  }
  

  如果这一切按计划进行，它应该看起来相当不错，与此类似（当然还有您自己的内容）：

  

  现在我们已经确保页面对于那些没有 JavaScript 的人来说看起来不错，我们可以继续为那些需要 JavaScript 的人提供服务！

  第 5 步 - jQuery

  本教程中我个人最喜欢的部分！ jQuery 时间！让我们用语言来表达我们需要发生的事情：

  1. 隐藏我们最初不想看到的所有列表项，仅显示第一个内容部分，即 WP_Query 部分。
  2. 将“active”类添加到第一个选项卡，因为它的相应部分已打开。
  3. 单击选项卡时，按顺序执行以下操作：
     • 从当前活动选项卡中删除活动类
     • 将活动类添加到刚刚单击的选项卡
     • 获取单击选项卡中 a 的 href 属性，并将其设为我们的新变量“目标”
     • 然后让目标显示自己，之前的显示区域通过一些动画隐藏自己

  这看起来似乎是一件很难实现的事情，但是由于 jQuery 的少写多做态度，我已经成功地将我们需要的内容减少到只有 9 行 js 代码！这位于英雄和反派脚本下面的 $(document).ready(function(){ }); 中。

  //And our little animated sliding area uptop of the design.
  	
  	$('#tabContent>li:gt(0)').hide();
  	$('#tabsNav li:first').addClass('active');
  	$('#tabsAndContent #tabsNav li').bind('click', function() {
  		$('li.active').removeClass('active');
  		$(this).addClass('active');
  		var target = $('a', this).attr('href');
  		$(target).slideDown(400).siblings().slideUp(300);
  		return false;
  	});
  

  我们的代码的基本细分：

  • $('#tabContent>li:gt(0)').hide(); - 正如我们在脚本的 Word 版本中所希望的那样，隐藏所有大于零的内容项，没有从 0 开始的项目。
  • $('#tabsNav li:first').addClass('active'); - 我们将“active”类添加到第一个选项卡，因为如果只显示第一个内容区域，我们就不会我们不希望第二个选项卡处于活动状态吗！？
  • $('#tabsAndContent #tabsNav li').bind('click', function() { - .bind 函数！所有这一切都是在参数事件发生时发生（在我们的例子中是 click）它将以下函数绑定到元素。该函数是：
    • $('li.active').removeClass('active'); - 将当前类的 active 移除。
    • $(this).addClass('active'); - 将类添加到this，当您在函数中时，这是一个有用的选择器，并且特定于单击的元素。
    • var target = $('a', this).attr('href'); - 从选项卡的子 a 元素的 href 属性创建变量“target”一次再次在选择器中使用this。
    • $(target).slideDown(400).siblings().slideUp(300); - 我们的动画！现在我们有了目标，我们将在十分之四秒（或 40 毫秒）内将其滑落，并在近三分之一秒（30 毫秒）内将任何可见的兄弟姐妹滑入深渊。
    • 返回 false; - 这很重要！您不希望浏览器历史记录仅通过单击选项卡就拥有一百万个先前链接，是吗？每次 URL 更改为 #recentArticles 或类似内容时，它都会向浏览器历史记录添加另一个条目。 返回 false； 使此无效，因此不会更改 URL，也不会添加历史记录。

  这就是我们需要的所有 jQuery、CSS、HTML 和 Wordpress。你应该有类似这样的东西：

  

  是的，它应该有动画，是的，活动按钮应该改变，是的，您刚刚创建了自己的选项卡式动态内容，并将其实现到包含 Wordpress 内容的 WordPress 主题中！

  完成。

  我们在本教程中学习了很多内容。总的来说，我们学到的一些重要经验教训是：

  • WP_Query(); - 用于在主循环之外获取内容的强大工具。
  • Wordpress 条件标签 - 非常适合进一步自定义您的主题。
  • .bind function - 通过事件轻松将函数链接到特定元素。
  • jQuery 动画 - 非常容易实现，而且像玫瑰花园一样美丽。

  

Das obige ist der detaillierte Inhalt vonTab-Inhalte mit jQuery und WP_Query implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!