插入链接页码_使用页码代替下一个和上一个链接的友好WordPress导航-CSDN博客

插入链接页码

The navigation will be more user friendly with page numbers instead of next and previous links since users can navigate much quicker to the page they want to see especially when there are a lot of pages.

导航将使用页面编号而不是下一个和上一个链接更加用户友好，因为用户可以更快地导航到他们想要查看的页面，尤其是在页面很多的情况下。

It is also good method for SEO (Search Engine Optimization) because it creates a tighter inner link structure.

这也是SEO（搜索引擎优化）的一种好方法，因为它创建了更紧密的内部链接结构。

WordPress provides the paginate_links() function for getting the pages list. What we need to do is setting the suitable arguments and pass them to the function. Here we get a list and then use CSS to make this list be displayed in one line.

WordPress提供了paginate_links（）函数来获取页面列表。我们需要做的是设置合适的参数并将其传递给函数。在这里，我们得到一个列表，然后使用CSS使该列表显示为一行。

First create a file named navigation.php in the theme directory. The content of navigation.php is:

首先在主题目录中创建一个名为navigation.php的文件。 navigation.php的内容是：

<?php
global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
    $paginate_format = '';
    $paginate_base = add_query_arg('paged', '%#%');
} else {
    $paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/', 'paged');;
    $paginate_base .= '%_%';
}

echo '<div>'. "n";
echo paginate_links( array(
    'base' => $paginate_base,
    'format' => $paginate_format,
    'total' => $wp_query->max_num_pages,
    'mid_size' => 10,
    'current' => ($paged ? $paged : 1),
    'type' => 'list',
    'prev_text' => __('&laquo; Previous', 'default'),
    'next_text' => __('Next &raquo;', 'default'),
));
echo "n</div>n";
?>

Second, edit the style.css file in the theme directory to choose the style that fits the theme best.

其次，在主题目录中编辑样式 .css文件，以选择最适合主题的样式。

This is the sytle I like:

这是我喜欢的样式：

/* page navi */
.page-navi li { line-height:0%; display:block; float:left; }
.page-navi a, .page-navi a:visited, .page-navi a:hover,
.page-navi span.pages, .page-navi span.extend, .page-navi span.current, .page-navi span.dots
{ font-size:11px; line-height:100%; margin:4px -1px 4px 0; padding:2px 10px; display:block; float:left; border-right:1px solid #555; border-left:1px solid #555; }

Last, change the navigation part of index.php archive.php and search.php to code like this:

最后，将index.php archive.php和search.php的导航部分更改为如下代码：