在 WordPress 中创建上下文相关的侧栏页面导航

有时我得到一项业务，我的客户要求建立一个完全由众多网页构成的网站——没有花哨的数据库查询，也没有额外的模板文件，只有在分层结构中的一大堆网页。

对用户来讲，一个非常庞大且内嵌有众多网页的网站，如果导航没有做好的话，就会变得非常混乱而难以操作。因而，在每一个网页页面层次的当前分支中，提供一个包含所有页面的导航列表就显得很有帮助了。

例如，如果你为一个机构建立一个网站，这个机构的每个功能展示都要有一个顶级页面和各个部门相关的子页面来完成，然后你想要列出所有的部门以及一个指向顶级功能页面的链接，并且无论在哪一个子页面和哪一个部门的页面上，它们都会和顶级页面同时存在。

为了做到这一点，你是无法通过查询当前文章类型（post type）或分类项目（taxonomy term）来将相关内容的列表全部列出的。你需要去确定当前页面在网站结构中的位置，从而能显示一组相应的链接列表。

在这里，我将向你展示如何做到这一点：通过建立一个函数，添加到侧边栏文件中，或添加到你模板文件原有的内容之上（或者如果你的主题使用了这些模板的话，也可以通过“钩子”激活）。

这个过程包含两个阶段：

1.确定当前页面在网站结构中的位置

2.输出页面列表

你需要做的是

完成本教程，你需要

• 安装WordPress
• 一个文本编辑器

创建你的插件

我打算在一个插件中建立这个函数，从而保证其主题的独立性。因此，第一步便是建立一个插件文件，我命名其为 tutsplus-list-subpages.php。

打开你的插件文件，添加以下代码：

1. <?php
2. /*Plugin Name: List Subpages
3. Description: This plugin checks if the current page has parent or child pages and if so, outputs a list of the highest ancestor page and its descendants. It creates a function called tutsplus_list_subpages() which you insert into your theme or activate via a hook to work.
4. Version: 1.0
5. Author: Rachel McCollin
6. Author URI: http://rachelmccollin.com
7. License: GPLv2
8. */
9. ?>

很明显，你的代码会因为插件作者和网址（URL）的不同而需要做出相应的改变，你也许已经迫不及待地想要修改这些说明了吧。

在代码说明中包含函数名称这一点是非常有用的，因为它意味着当你在一个网站上安装你的插件的时候，你无须去检查代码以提醒你自己如何去使用它。

确认当前页面在网站层次结构中的位置

为了找到当前页面在网站层次结构中的位置，你需要完成以下4件事情：

1. 检查当前是否真的是一个页面
2. 检查当前页面是否有母页面
3. 如果没有，那么你便可以确认当前所在位置是网站层次中的顶级初始页面部分
4. 如果有，你需要用get_post_ancestors()来确认顶级初始页面

那么就让我们来试一试吧！

首先使用一个条件标签来建立一个新的函数，用来检查当前页面：

1. <?php
2. function tutsplus_check_for_page_tree() {
4. //start by checking if we’re on a page
5. if( is_page() ) {
7. }
9. }
10. ?>

现在，在 is_page()条件标签里，开始定义 $post全局变量：

1. <?php
2. function tutsplus_check_for_page_tree() {
4. // start by checking if we’re on a page
5. if( is_page() ) {
7. global $post;
9. }
11. }
12. ?>

接下来你需要确认的是当前页面是否有母页面，你需要用到 if ( $post->post_parent ) ：

1. <?php
2. function tutsplus_check_for_page_tree() {
4. // start by checking if we’re on a page
5. if ( is_page() ) {
7. global $post;
9. // next check if the page has parents
10. if ( $post->post_parent ) {
12. }
14. }
16. }
17. ?>

如果当前页面有母页面的话，你需要用get_post_ancestors()来确定顶级初始页面：

1. <?php
2. function tutsplus_check_for_page_tree() {
4. //start by checking if we’re on a page
5. if( is_page() ) {
7. global $post;
9. // next check if the page has parents
10. if ( $post->post_parent ){
12. // fetch the list of ancestors
13. $parents = array_reverse( get_post_ancestors( $post->ID ) );
15. // get the top level ancestor
16. return $parents[0];
18. }
19. }
21. }
22. ?>

以上定义了 $parents一个新的变量，这个变量的值就是在当前网站层次分支中顶级页面的ID。return $parents[0];这一行输出了这个值，因此你可以在以后的函数当中使用它。

最后，你需要定义如果当前页面没有母页面，即它本身就是顶级初始页面的情况。在此情况下，你想要输出当前页面的ID，就要将下列代码添加到你的函数中：

1. return $post->ID;

整个函数现在看起来是这样的：

1. <?php
2. function tutsplus_check_for_page_tree() {
4. //start by checking if we’re on a page
5. if( is_page() ) {
7. global $post;
9. // next check if the page has parents
10. if ( $post->post_parent ){
12. // fetch the list of ancestors
13. $parents = array_reverse( get_post_ancestors( $post->ID ) );
15. // get the top level ancestor
16. return $parents[0];
18. }
20. // return the id – this will be the topmost ancestor if there is one, or the current page if not
21. return $post->ID;
23. }
25. }
26. ?>

输出一组子页面列表

既然你已经知道了当前网站层次分支中顶级页面的ID，输出一组子页面列表相对来说就很简单了。你需要用 get_pages()来确认顶级页面的子页面，顶级页面的ID之前已经确认过了。此外，你还需要在列表的最前面输出初始页面的链接。

使用list_pages()确认子页面

首先建立一个新的函数，用来检查当前页面：

1. <?php
2. function tutsplus_list_subpages() {
4. // don’t run on the main blog page
5. if ( is_page() ) {
7. }
9. }
10. ?>

请注意，如果你要将这个函数添加到你的page.php模板中，你可以不用进行这项检查。

在条件标签中你首先要做的就是将已经确认的顶级页面ID添加到tutsplus_check_for_page_tree()函数中，实现代码如下：

1. $ancestor = tutsplus_check_for_page_tree();

接着，我们来定义 get_pages() 函数的参数：

1. $args = array(
2. ‘child_of’ => $ancestor,
3. ‘depth’ => ‘-1’,
4. ‘title_li’ => ”,
5. );

让我们来快速回顾一下我使用的参数：

• ‘child_of’ => $ancestor 确认哪些是$ancestor页面的子页面
• ‘depth’ => ‘-1’ 描述函数运用于网站层次结构中的层次数目。如果你只是想展示一个或两个层次的话你可以改变其赋值。
• ‘title_li’ => ” 确保所输出的不会被包裹在任何HTML标签内，我会在之后添加这些内容。

下一步，你需要运行 list_pages()函数：

1. $list_pages = get_pages( $args );

输出页面列表

既然你已经建立好了你的网页，那么接下来你需要输出它们的链接。为了做到这一点，首先你要检查list_pages()是否返回一个空数组：

1. if ( $list_pages ) {
3. }

在检查中，第一个链接指向顶级页面：

1. <ul class=“page-tree”>
2. <?php // list ancestor page ?>
3. <li class=“ancestor”>
4. <a href=”<?php echo get_permalink( $ancestor ); ?>“><?php echo get_the_title( $ancestor ); ?></a>
5. </li>
6. </ul>

然后接下来，第一个<li>元素仍然在<ul>中，使用wp_list_pages()函数输出包裹在超链接中的页面列表：

1. wp_list_pages( $args );

这将显示页面标题的链接列表。

完整的tutsplus_list_subpages()函数全文应当如下：

1. <?php
2. function tutsplus_list_subpages() {
4. // don’t run on the main blog page
5. if ( is_page() ) {
7. // run the tutsplus_check_for_page_tree function to fetch top level page
8. $ancestor = tutsplus_check_for_page_tree();
10. // set the arguments for children of the ancestor page
11. $args = array(
12. ‘child_of’ => $ancestor,
13. ‘depth’ => ‘-1’,
14. ‘title_li’ => ”,
15. );
17. // set a value for get_pages to check if it’s empty
18. $list_pages = get_pages( $args );
20. // check if $list_pages has values
21. if ( $list_pages ) {
23. // open a list with the ancestor page at the top
24. ?>
25. <ul class=“page-tree”>
26. <?php // list ancestor page ?>
27. <li class=“ancestor”>
28. <a href=”<?php echo get_permalink( $ancestor ); ?>“><?php echo get_the_title( $ancestor ); ?></a>
29. </li>
31. <?php
32. // use wp_list_pages to list subpages of ancestor or current page
33. wp_list_pages( $args );;
36. // close the page-tree list
37. ?>
38. </ul>
40. <?php
41. }
42. }
44. }
45. ?>

激活tutsplus_list_subpages()函数

你可以采取下面两种方式中任意一种来激活tutsplus_list_subpages()函数：

• 在你的一个主题模板文件中调用tutsplus_list_subpages()，比如sidebar.php文件。
• 把它附加到你主题中的一个钩子上。

例如，如果你的主题在sidebar.php文件中有一个tutsplus_sidebar钩子，你可以将以下代码添加到你的 functions.php文件中：

1. <?php add_action( ‘tutsplus_sidebar’, ‘tutsplus_list_subpages’ ); ?>

小结

我演示的这些代码可以让你在你的网站层次结构中的任何位置自动添加相关网页的列表。

如果你是在你的客户网站上使用这些代码，你需要确保客户了解如何分层创建页面，然而这并不意味着客户需要做全面仔细的考虑。

如果你想要这些代码对客户来说变得更加人性化的话，你可以创建一个WordPress小工具（或者也许一段简码就够了）来输出页面列表，而这又是另一个话题了。