在 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() {
  3. //start by checking if we’re on a page
  4. if( is_page() ) {
  5. }
  6. }
  7. ?>

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

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

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

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

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

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

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

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

  1. return $post->ID;

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

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

输出一组子页面列表

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

使用list_pages()确认子页面

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

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

请注意,如果你要将这个函数添加到你的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 ) {
  2. }

在检查中,第一个链接指向顶级页面:

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

激活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小工具(或者也许一段简码就够了)来输出页面列表,而这又是另一个话题了。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 lk2768783601@gmail.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年9月5日 下午3:30
下一篇 2023年9月5日 下午3:36

相关推荐

  • 构建你的 WordPress 小工具(3)

    文本是《一步步创建你的第一个 WordPress 小工具(共5篇)》专题的第 3 篇。阅读本文前,建议先阅读前面的文章: 创建一个WordPress小工具(1) 编写和注册你的 WordPress 小工具(2) 如果你一直是跟随本系列教程来操作的话,那么你现在将会有你自己的WordPress小工具插件作为下一步的开始。你必须创建一个新类来编写你的小工具,并添…

    2023年9月5日
    740
  • 在正确的工具区域内显示你创建的WordPress小工具(5)

    文本是《一步步创建你的第一个 WordPress 小工具(共5篇)》专题的第 5 篇。阅读本文前,建议先阅读前面的文章: 创建一个WordPress小工具(1) 编写和注册你的 WordPress 小工具(2) 构建你的 WordPress 小工具(3) 为你的 WordPress 小工具创建表单(4) 创建你的WordPress小工具的最后一步是在网站上显…

    2023年9月5日
    1100
  • 创建一个WordPress小工具(1)

    对于非程序员要创建一个WordPress站点,小工具是很棒的。它们能够添加菜单、列表供稿、文本以及更多东西到小工具区,并且不限于侧边栏。现在许多主题都在页脚添加了小工具区,并且大主题框架通常在多个位置设有小工具区,如头部或内容的上下方。 在这个五部分的系列教程中,我将带你一起完成创建您的第一个小工具所需的步骤。 本系列包括: 介绍小工具和小工具API 编写和…

    wordpress开发 2023年9月5日
    800
  • 编写和注册你的 WordPress 小工具(2)

    文本是《一步步创建你的第一个 WordPress 小工具(共5篇)》专题的第 2 篇。阅读本文前,建议先阅读前面的文章: 创建一个WordPress小工具(1) 本文是系列教程《创建你的第一个WordPress小工具》的第二部分,向你展示如何创建属于你的第一个WordPress小工具。在第一部分的教程中,你已经了解了WordPress小工具API(Appli…

    wordpress开发 2023年9月5日
    740
  • 为你的 WordPress 小工具创建表单(4)

    文本是《一步步创建你的第一个 WordPress 小工具(共5篇)》专题的第 4 篇。阅读本文前,建议先阅读前面的文章: 创建一个WordPress小工具(1) 编写和注册你的 WordPress 小工具(2) 构建你的 WordPress 小工具(3) 在本系列教程的前三部分,你已经开始创建你的WordPress小工具。在这一部分,我将向你展示如何为你的W…

    2023年9月5日
    1140
关注微信