Wrodprss zh-cn:“上一篇”和“下一篇”导航链接

  • A+
所属分类：wrodprss
广告也精彩

下一篇和上一篇文章链接将引导访问者浏览WordPress网站。当涉及到创建强大的站点范围导航时，一些用于移动访问者的最强大的工具是这些链接标签。

有两组标签可以通过你的WordPress站点移动访问者：posts_nav_link（），它显示前一个和下一个链接，以及previous_post（）和next_post（）的组合对，每个组合对都显示前一个或下一个链接。本文将研究这两个标记集是如何工作的。

注意：“上一个”和“下一个”在这种情况下指的是按他们所在的顺序排列的帖子，而不是按时间的任何特定方向。这通常会让很多人感到困惑，比如WordPress，默认情况下，它会显示从最新开始，并在时间上向后推进的帖子。使用这个默认顺序，“下一页”将在时间上向后移动，因为“下一页”在第1页之后将是第2页，这将移动到较旧的文章。如果更改了日志排序（如通过手动使用模板中的查询日志），那么链接将指向不同的方向。这篇codex文章使用了这两种方法而没有解释，因为它只是示例代码。因此，必须记住，函数指的是一个独立于时间顺序的顺序。

帖子导航链接

第一组这些网站导航链接仅在非单一/非永久链接的网页上提供，如类别、存档、搜索和索引页。这是模板标签posts_nav_link（）。这个标签在wordpress循环中的页面底部创建两个链接，以按时间顺序显示下一页和上一页。

默认情况下，posts_nav_链接如下：

« Previous Page — Next Page »      “上一页-下一页”

它通常出现在段落代码或这样的划分中：

<div class="navigation"><p><?php posts_nav_link(); ?></p></div>
标签参数如下：
<?php posts_nav_link('separator','prelabel','nextlabel'); ?>

每个参数都可以用来生成一个字符串、任何文本、HTML或CSS标记。让我们看看我们能做些什么使这些后导航链接更有趣。

保持简单，我们可以使用CSS更改标记结果的外观。让我们更进一步，还可以更改标记参数中的内容。

接下来，将文本加粗并使用字体变体：小大写字母使其看起来有趣，然后将分隔符设置为无穷大符号并在标签中添加一些单词。

<div class="navigation"><p><?php posts_nav_link('&#8734;','Go 
Forward In Time','Go Back in Time'); ?></p></div>
它可能看起来像这样：
Go Forward in Time ∞ Go Back in Time    
让我们不要就此止步，让我们添加更多的角色实体来真正吸引访问者的注意，这样他们就会明白，你的网站比他们在这个页面上看到的内容更多。
<div class="navigation"><p><?php posts_nav_link('&#8734;','&laquo;&laquo; Go Forward 
In Time','Go Back in Time &raquo;&raquo;'); ?></p></div>
它可能看起来像这样：
«« Go Forward in Time ∞ Go Back in Time »»

我们刚刚揭开了表面，但你可以让你的想象力和网页设计技能创造这些你喜欢的任何方式，添加边框，背景图像，风格文本，等等。

下一篇和上一篇文章

另一组导航辅助工具用于在站点中移动，控制下一个帖子和上一个帖子链接，通常位于单个/永久性帖子的底部，例如您在站点上发布的任何单个帖子或文章。这些命令指示用户按时间顺序移动到下一个或上一个日志。

模板标记是previous_post_link（）和next_post_link（）。

Deprecated: previous_post() and next_post(). Use: --> previous_post_link() and next_post_link() instead.

已弃用：previous_post（）和next_post（）。使用：-->previous_post_link（）和next_post_link（）。

这些标记的默认用法是：

<?php previous_post_link(); ?>    <?php next_post_link(); ?>
看起来是这样的：
previous post: A Story for One and All    next post: A Story for Only One
上一篇文章：一篇文章，下一篇文章都有：一篇文章，只有一篇文章

这两个标签的参数都是：

格式

与“%”组合使用的文本，表示邮件的永久链接。默认设置为永久链接。

文本

显示在永久链接之前的文本。默认为“下一篇文章”和“上一篇文章”。

标题

这将打开和关闭将用作链接文本的文章标题的使用。默认情况下，是否为“是”。如果设置为“否”，则只显示文本参数和格式中设置的文本。

让我们把这些付诸行动。

下面的示例显示下一个和上一个文章标题，并用箭头强调用户可以选择的方向。您会注意到我们没有设置文本参数，所以它是空白的。

<?php previous_post_link('&laquo; &laquo; %', '', 'yes'); ?>
| <?php next_post_link('% &raquo; &raquo; ', '', 'yes'); ?>
« « A Story for One and All    |    A Story for One » »     «一个故事一个故事，一个故事一个故事»
用CSS包装这两个标签，您可以用这些标签做更多的事情：
<div class="navigation">
<div class="alignleft">
<?php previous_post_link('&laquo; &laquo; %',
 'Toward The Past: ', 'yes'); ?>
</div>
<div class="alignright">
<?php next_post_link('% &raquo; &raquo; ',
 'Toward The Future: ', 'yes'); ?>
</div>
</div> <!-- end navigation -->
它可能看起来像这样：
« « Toward the Past: A Story for One and All       Toward the Future: A Story for One » »
《走向过去：一个面向未来的故事：一个面向未来的故事》

一个名为“更好的相邻文章链接”的有用插件允许您将前一篇和下一篇文章的标题修剪到您认为合适的长度。当你有较长的标题破坏网站的设计时，这很有用。

这只是一个介绍如何使用这些标签和做有趣的事情，但你可以做更多的添加边框，背景图像，有趣的字体和颜色-这取决于你！玩得高兴！

下一页和上一页

上一个“Post”链接和下一个“Post”链接功能在页面上不起作用。下一页和下一页，而不是下一篇文章插件可以解决这个问题。

如果您希望将代码添加到主题的页面模板中，请执行以下操作：

<?php
$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
$pages = array();
foreach ($pagelist as $page) {
   $pages[] += $page->ID;
}

$current = array_search(get_the_ID(), $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
?>

<div class="navigation">
<?php if (!empty($prevID)) { ?>
<div class="alignleft">
<a href="<?php echo get_permalink($prevID); ?>"
  title="<?php echo get_the_title($prevID); ?>">Previous</a>
</div>
<?php }
if (!empty($nextID)) { ?>
<div class="alignright">
<a href="<?php echo get_permalink($nextID); ?>" 
 title="<?php echo get_the_title($nextID); ?>">Next</a>
</div>
<?php } ?>
</div><!-- .navigation -->
上面代码的另一个选项是创建如下所示的函数：
<?php
function getPrevNext(){
	$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
	$pages = array();
	foreach ($pagelist as $page) {
	   $pages[] += $page->ID;
	}

	$current = array_search(get_the_ID(), $pages);
	$prevID = $pages[$current-1];
	$nextID = $pages[$current+1];
	
	echo '<div class="navigation">';
	
	if (!empty($prevID)) {
		echo '<div class="alignleft">';
		echo '<a href="';
		echo get_permalink($prevID);
		echo '"';
		echo 'title="';
		echo get_the_title($prevID); 
		echo'">Previous</a>';
		echo "</div>";
	}
	if (!empty($nextID)) {
		echo '<div class="alignright">';
		echo '<a href="';
		echo get_permalink($nextID);
		echo '"';
		echo 'title="';
		echo get_the_title($nextID); 
		echo'">Next</a>';
		echo "</div>";		
	}
}	
?>

您可以在page.php文件的底部添加这样的函数，这样您就可以调用“上一个/下一个”链接，调用如下所示的函数：

用途：

<?php getPrevNext(); ?>
如果超出了PHP块。或使用：
getPrevNext();

如果您在一个PHP块中。

最后，在下面找到一个“page.php”文件，其中包含20个青少年主题，并进行了此类修改，以供参考：

<?php
/**
 * The template for displaying pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages and that
 * other "pages" on your WordPress site will use a different template.
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

get_header(); ?>



<div id="primary" class="content-area">



	<main id="main" class="site-main" role="main">

		<?php
		// Start the loop.
		while ( have_posts() ) : the_post();

			// Include the page content template.
			
			//Adding 'Next / Previous' link to the top of page
			getPrevNext(); 
			
			get_template_part( 'template-parts/content', 'page' );
			
			//Adding 'Next / Previous' link to the end of page
			getPrevNext();
			
			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template(); 
			}

			// End of the loop.
		endwhile;
		?>

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

<?php
function getPrevNext(){
	$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
	$pages = array();
	foreach ($pagelist as $page) {
	   $pages[] += $page->ID;
	}

	$current = array_search(get_the_ID(), $pages);
	$prevID = $pages[$current-1];
	$nextID = $pages[$current+1];
	
	echo '<div class="navigation">';
	
	if (!empty($prevID)) {
		echo '<div class="alignleft">';
		echo '<a href="';
		echo get_permalink($prevID);
		echo '"';
		echo 'title="';
		echo get_the_title($prevID); 
		echo'">Previous</a>';
		echo "</div>";
	}
	if (!empty($nextID)) {
		echo '<div class="alignright">';
		echo '<a href="';
		echo get_permalink($nextID);
		echo '"';
		echo 'title="';
		echo get_the_title($nextID); 
		echo'">Next</a>';
		echo "</div>";		
	}
}	
?>
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩

发表评论

您必须登录才能发表评论！