wordpress 分页_如何在您的WordPress主题中添加数字分页

wordpress 分页

One of our readers recently asked us how do we add numeric pagination on the WPBeginner blog page. Default WordPress themes and many other themes display pagination links by adding Older posts and Newer Posts links at the bottom of your WordPress archive pages. However, there are many WordPress sites that uses numeric pagination, like WPBeginner. From our experience, numeric pagination is more user friendly, attractive, and SEO friendly. Most advanced WordPress theme frameworks like Genesis comes with a built-in functionality for adding numeric pagination. In this article we will show you how to add numeric pagination in your WordPress theme. The goal is to replace the default Older and Newer pagination links at the bottom of archive pages with easy to navigate page numbers.

我们的一位读者最近问我们如何在WPBeginner博客页面上添加数字分页。 默认WordPress主题和许多其他主题通过在WordPress存档页面底部添加“旧帖子”和“新帖子”链接来显示分页链接。 但是，有许多使用数字分页的WordPress网站，例如WPBeginner。 根据我们的经验，数字分页对用户更友好，更有吸引力且对SEO友好。 最先进的WordPress主题框架(如Genesis)带有用于添加数字分页的内置功能。 在本文中，我们将向您展示如何在WordPress主题中添加数字分页。 目的是用易于浏览的页码替换存档页面底部的默认“较旧”和“较新”分页链接。

There are two methods to adding numeric pagination in your WordPress theme. The first method is manually adding numeric pagination without relying on a third party plugin. Since this article is in the theme category and intended for new theme designers, we will show the manual method first. The second method is to use an existing third party plugin to add numeric pagination. We would recommend that method for all of our DIY users.

有两种方法可以在WordPress主题中添加数字分页。 第一种方法是在不依赖第三方插件的情况下手动添加数字分页。 由于本文属于主题类别并且面向新主题设计者，因此我们将首先展示手动方法。 第二种方法是使用现有的第三方插件添加数字分页。 我们建议所有DIY用户使用该方法。

在WordPress主题中手动添加数字分页 (Manually adding Numeric Pagination in Your WordPress Themes)

First we will show you how to manually add numeric pagination in your WordPress themes. This will benefit our advanced users, and users who are learning theme development, or want to do this without relying on a third party plugin. Lets get started by adding the following code in your theme’s functions.php file.

首先，我们将向您展示如何在WordPress主题中手动添加数字分页。 这将使我们的高级用户以及正在学习主题开发或希望不依赖第三方插件的用户受益。 让我们从在主题的functions.php文件中添加以下代码开始。

Note: This code is derived from Genesis Framework which we use on our site. If you are using Genesis, then you don’t need this code or the plugin.

注意：此代码源自我们在网站上使用的Genesis Framework 。 如果使用Genesis，则不需要此代码或插件。

function wpbeginner_numeric_posts_nav() {

	if( is_singular() )
		return;

	global $wp_query;

	/** Stop execution if there's only 1 page */
	if( $wp_query->max_num_pages <= 1 )
		return;

	$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
	$max   = intval( $wp_query->max_num_pages );

	/**	Add current page to the array */
	if ( $paged >= 1 )
		$links[] = $paged;

	/**	Add the pages around the current page to the array */
	if ( $paged >= 3 ) {
		$links[] = $paged - 1;
		$links[] = $paged - 2;
	}

	if ( ( $paged + 2 ) <= $max ) {
		$links[] = $paged + 2;
		$links[] = $paged + 1;
	}

	echo '<div class="navigation"><ul>' . "\n";

	/**	Previous Post Link */
	if ( get_previous_posts_link() )
		printf( '<li>%s</li>' . "\n", get_previous_posts_link() );

	/**	Link to first page, plus ellipses if necessary */
	if ( ! in_array( 1, $links ) ) {
		$class = 1 == $paged ? ' class="active"' : '';

		printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );

		if ( ! in_array( 2, $links ) )
			echo '<li>…</li>';
	}

	/**	Link to current page, plus 2 pages in either direction if necessary */
	sort( $links );
	foreach ( (array) $links as $link ) {
		$class = $paged == $link ? ' class="active"' : '';
		printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
	}

	/**	Link to last page, plus ellipses if necessary */
	if ( ! in_array( $max, $links ) ) {
		if ( ! in_array( $max - 1, $links ) )
			echo '<li>…</li>' . "\n";

		$class = $paged == $max ? ' class="active"' : '';
		printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
	}

	/**	Next Post Link */
	if ( get_next_posts_link() )
		printf( '<li>%s</li>' . "\n", get_next_posts_link() );

	echo '</ul></div>' . "\n";

}

At WPBeginner, we use this same code for numeric pagination on our archive pages (for example our blog, or WordPress tutorials category page). What this code does is that it retrieves the number of pages and prepares a bulleted list of numbered links. To add this in your templates, you will have to add the following template tag in your theme’s index.php, archive.php, category.php, and any other archive page template.

在WPBeginner，我们在存档页面(例如我们的Blog或WordPress教程类别页面)上使用相同的代码进行数字分页。 该代码的作用是检索页面数并准备一个带项目符号的链接列表。 要将其添加到模板中，必须在主题的index.php，archive.php，category.php和任何其他存档页面模板中添加以下模板标记。

	<?php wpbeginner_numeric_posts_nav(); ?>

Now that we have got our list of numbered pages, we need to style this list. We want to make the list appear in-line block where the active page is highlighted with a different background color. To accomplish that, lets go ahead and add the following in your theme’s style.css file:

现在我们有了编号页的列表，我们需要为该列表设置样式。 我们要使列表显示为串联块，其中活动页面以不同的背景色突出显示。 为此，请继续在主题的style.css文件中添加以下内容：

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	color: #fff;
	text-decoration:none;
}

.navigation li {
	display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	background-color: #6FB7E9;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
	background-color: #3C8DC5;
}

There you have it. We have a list of numeric pagination in our theme that looks great.

你有它。 我们的主题中有一个数字分页列表，看起来不错。

使用WP-PageNavi在WordPress中添加数字分页 (Adding Numeric Pagination in WordPress using WP-PageNavi)

Now let’s take a look at how to add numeric pagination in your WordPress theme by using an existing plugin called WP-PageNavi. First thing you need to do is install and activate WP-PageNavi plugin. After activating the plugin go to Settings » PageNavi to configure the plugin settings.

现在，让我们看一下如何使用现有的名为WP-PageNavi的插件在WordPress主题中添加数字分页。 您需要做的第一件事是安装并激活WP-PageNavi插件。 激活插件后，转到“设置”»“ PageNavi”以配置插件设置。

On the plugin settings page you can replace the default text and numeric pagination settings with your own if you want. However, the default settings should work for most websites.

如果需要，您可以在插件设置页面上用自己的默认文本和数字分页设置替换。 但是，默认设置应适用于大多数网站。

In the next step, you need to add a template tag in your WordPress Theme. Go to your theme folder and find the lines for older and newer pagination in your archive page templates: index.php, archive.php and any other archive template files. Add the following template tag to replace the old previous_posts_link and next_posts_link tags.

在下一步中，您需要在WordPress主题中添加模板标签。 转到主题文件夹，然后在存档页面模板中找到适用于旧版和较新分页的行：index.php，archive.php和任何其他存档模板文件。 添加以下模板标记以替换旧的previous_posts_link和next_posts_link标记。

<?php wp_pagenavi(); ?>

Once you have added the wp_pagenavi snippet, this is how the numeric pagination would look like:

添加wp_pagenavi代码段后，数字分页将如下所示：

If you want to change how the colors and style of numeric pagination in wp-pagenavi looks, then you would need to go to Settings » PageNavi. Uncheck the option to use Use pagenavi-css.css and save changes. Now go to Plugins » Editor. From Select plugin to edit drop down menu, select WP-PageNavi and click on the Select button. The editor will load plugin files in the right hand sidebar. Click on pagenavi-css.css to open it in editor and then copy the contents of the file.

如果要更改wp-pagenavi中数字分页的颜色和样式，则需要转到Settings»PageNavi 。 取消选中使用Use pagenavi-css.css的选项并保存更改。 现在转到Plugins»Editor 。 从“ 选择要编辑的插件”下拉菜单中，选择WP-PageNavi ，然后单击“ 选择”按钮。 编辑器将在右侧栏中加载插件文件。 单击pagenavi-css.css在编辑器中将其打开，然后复制文件的内容。

Next, you need to go to Appearance » Editor and paste the contents of pagenavi-css.css into your theme’s style.css file. Now you can modify the color scheme and styling from here. The reason why we copied the contents of plugin’s css to theme’s stylesheet is to prevent loss of style changes should you update the plugin. Here is a slightly modified version of numeric pagination, feel free to use and modify it in your theme.

接下来，您需要转到外观»编辑器 ，并将pagenavi-css.css的内容粘贴到主题的style.css文件中。 现在，您可以从此处修改配色方案和样式。 之所以我们将插件CSS内容复制到主题的样式表中，是为了防止在更新插件时丢失样式更改。 这是数字分页的略微修改版本，随时可以在您的主题中使用和修改它。

.wp-pagenavi {
	clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF;
	text-decoration: none;
	background-color:#6FB7E9; 
	border: 1px solid #B2D1E5;
	padding: 5px 5px;
	margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #E9F2F9;
	background-color:#6FB7E9;
}

.wp-pagenavi span.current {
	font-weight: bold;
	background-color:#3C8DC5;
}

Here is how it would look like:

看起来像这样：

As always you should experiment with CSS. The goal should be to match the numeric pagination with look and feel of your website’s colors, so that it blends in nicely and does not look like an oddly placed item.

与往常一样，您应该尝试CSS。 目标应该是使数字分页与网站颜色的外观和风格相匹配，以使其很好地融合在一起，并且看起来不像是放置位置奇怪的项目。

We hope that this article helped you add and display numeric pagination in your WordPress theme. Which method do you prefer to use? Do you like the numeric pagination or do you prefer the built-in previous/next navigation? Let us know in the comments below.

我们希望本文能帮助您在WordPress主题中添加和显示数字分页。 您更喜欢使用哪种方法？ 您喜欢数字分页还是更喜欢内置的上一个/下一个导航？ 在下面的评论中让我们知道。

翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-numeric-pagination-in-your-wordpress-theme/

wordpress 分页