Статьи

Создание контекстной навигации на боковой панели в WordPress

Иногда я получаю работу клиента, для которой требуется сайт, полностью построенный на страницах. Никаких модных запросов к базе данных, никаких дополнительных файлов шаблонов — просто целая куча страниц в иерархической структуре.

Очень большой сайт, построенный на страницах, может стать громоздким и запутанным для пользователей, если навигация не выполнена правильно, поэтому полезно предоставить список всех страниц в текущей ветви иерархии страниц на каждой странице.

Например, если ваш сайт предназначен для организации и каждая из функций организации имеет страницу верхнего уровня с подстраницами для отдельных отделов, то вам нужно будет перечислить все эти отделы вместе со ссылкой на страницу функций верхнего уровня. Вы захотите сделать это на каждой из этих страниц отдела и на любых подстраницах, которые они могут иметь, а также на самой странице верхнего уровня.

Для этого вы не сможете выводить списки связанного контента, выполняя запросы для текущего типа сообщения или термина таксономии. Вместо этого вам нужно будет определить, где в структуре находится текущая страница, и затем отобразить список ссылок соответственно.

Здесь я покажу вам, как это сделать, создав функцию, которую вы можете добавить в файл боковой панели или, возможно, поверх содержимого файлов вашего шаблона (или активировать через ловушку, если ваша тема использует их).

Это состоит из двух этапов:

  1. определить, где находится текущая страница в структуре
  2. вывод списка страниц

Для завершения этого урока вам понадобится:

  • установка WordPress
  • текстовый редактор

Я собираюсь создать эту функцию в плагине, чтобы ее тема была независимой. Итак, ваш первый шаг — создать файл плагина. Мой называется tutsplus-list-subpages.php .

Откройте файл плагина и добавьте следующее:

1
2
3
4
5
6
7
8
9
<?php
/*Plugin Name: List Subpages
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.
Version: 1.0
Author: Rachel McCollin
Author URI: http://rachelmccollin.com
License: GPLv2
*/
?>

Очевидно, что ваш код будет отличаться, так как изменится автор плагина и URL, и вы можете изменить описание.

Включение имени функции в описание полезно, поскольку это означает, что при установке плагина на сайт вам не нужно проверять код, чтобы напомнить себе, как его использовать.

Чтобы узнать, где находится текущая страница в иерархии страниц, вам нужно сделать четыре вещи:

  1. Проверьте, что это на самом деле страница
  2. Проверьте, есть ли у этого поста родители
  3. Если нет, то вы знаете, что это предок верхнего уровня для этой части иерархии
  4. Если это так, вам нужно определить предка верхнего уровня, используя get_post_ancestors()

Итак, давайте сделаем это!

Создайте новую функцию с условным тегом, чтобы проверить, что мы находимся на странице:

01
02
03
04
05
06
07
08
09
10
<?php
function tutsplus_check_for_page_tree() {
 
    //start by checking if we’re on a page
    if( is_page() ) {
         
    }
 
}
?>

Теперь внутри условного тега is_page() начнем с определения глобальной переменной $post :

01
02
03
04
05
06
07
08
09
10
11
12
<?php
function tutsplus_check_for_page_tree() {
 
    // start by checking if we’re on a page
    if( is_page() ) {
     
        global $post;
     
    }
 
}
?>

Далее вам нужно определить, есть ли у текущей страницы родители, что вы и делаете, используя if( &post->post_parent ) :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<?php
function tutsplus_check_for_page_tree() {
 
    // start by checking if we’re on a page
    if ( is_page() ) {
     
        global $post;
     
        // next check if the page has parents
        if ( $post->post_parent ) {
 
        }
         
    }
 
}
?>

Если у страницы есть предки, вам нужно определить самый верхний из них, что вы делаете с помощью get_post_ancestors() :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
function tutsplus_check_for_page_tree() {
 
    //start by checking if we’re on a page
    if( is_page() ) {
     
        global $post;
     
        // next check if the page has parents
        if ( $post->post_parent ){
         
            // fetch the list of ancestors
            $parents = array_reverse( get_post_ancestors( $post->ID ) );
             
            // get the top level ancestor
            return $parents[0];
             
        }
    }
 
}
?>

Это определяет новую переменную $parents , значением которой является идентификатор самой верхней страницы в текущей ветви иерархии. Строка return $parents[0]; выводит это значение, чтобы вы могли использовать его в более поздней функции.

Наконец, вам нужно определить, что произойдет, если у текущей страницы нет родителей, то есть, если это самый верхний предок. В этом случае вы хотите вывести идентификатор текущей страницы, поэтому добавьте в свою функцию следующее:

1
return $post->ID;

Вся ваша функция теперь будет выглядеть так:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
function tutsplus_check_for_page_tree() {
 
    //start by checking if we’re on a page
    if( is_page() ) {
     
        global $post;
     
        // next check if the page has parents
        if ( $post->post_parent ){
         
            // fetch the list of ancestors
            $parents = array_reverse( get_post_ancestors( $post->ID ) );
             
            // get the top level ancestor
            return $parents[0];
             
        }
         
        // return the id — this will be the topmost ancestor if there is one, or the current page if not
        return $post->ID;
         
    }
 
}
?>

Теперь, когда вы знаете идентификатор самой верхней страницы в текущей ветви иерархии, вывести список ее подстраниц довольно просто. Вы используете get_pages() чтобы идентифицировать дочерние страницы страницы, чей ID вы определили. Вам также нужно будет вывести ссылку на страницу предка в начале списка.

Начните с создания новой функции с проверкой, что мы находимся на странице:

01
02
03
04
05
06
07
08
09
10
<?php
function tutsplus_list_subpages() {
 
    // don’t run on the main blog page
    if ( is_page() ) {
 
    }
 
}
?>

Обратите внимание, что если вы собираетесь добавить эту функцию в шаблон page.php , вы можете не page.php проверку того, что страница отображается.

Первое, что вам нужно сделать внутри этого условного тега, это получить идентификатор страницы, который вы определили в функции tutsplus_check_for_page_tree() , что вы делаете с этой строкой кода:

1
$ancestor = tutsplus_check_for_page_tree();

Ниже определите аргументы для функции get_pages() :

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

Давайте кратко рассмотрим аргументы, которые я использовал:

  • 'child_of' => $ancestor идентифицирует те страницы, которые являются дочерними для страницы $ancestor
  • 'depth' => '-1' указывает функции перейти на столько уровней в иерархии, сколько имеется на сайте. Вы можете изменить это, если вы просто хотите отобразить один или два уровня.
  • 'title_li' => '' гарантирует, что вывод не будет заключен в какие-либо теги HTML — как я добавлю их позже.

Далее вам нужно запустить list_pages() :

1
$list_pages = get_pages( $args );

Теперь, когда у вас есть ваши страницы, вам нужно вывести их со ссылками. Для этого сначала убедитесь, что list_pages() не вернул пустой массив:

1
2
3
if ( $list_pages ) {
 
}

Внутри этой проверки первая ссылка находится на странице верхнего уровня:

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

А затем под этим первым элементом <li> но все еще внутри <ul> , используйте wp_list_pages() для вывода списка страниц, обернутых в них гиперссылками:

1
wp_list_pages( $args );

Это отобразит список заголовков страниц в виде ссылок.

Вся tutsplus_list_subpages() функция tutsplus_list_subpages() теперь будет выглядеть так:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
function tutsplus_list_subpages() {
 
    // don’t run on the main blog page
    if ( is_page() ) {
     
        // run the tutsplus_check_for_page_tree function to fetch top level page
        $ancestor = tutsplus_check_for_page_tree();
     
        // set the arguments for children of the ancestor page
        $args = array(
            ‘child_of’ => $ancestor,
            ‘depth’ => ‘-1’,
            ‘title_li’ => »,
        );
         
        // set a value for get_pages to check if it’s empty
        $list_pages = get_pages( $args );
         
        // check if $list_pages has values
        if ( $list_pages ) {
     
            // open a list with the ancestor page at the top
            ?>
            <ul class=»page-tree»>
                <?php // list ancestor page ?>
                <li class=»ancestor»>
                    <a href=»<?php echo get_permalink( $ancestor ); ?>»><?php echo get_the_title( $ancestor );
                </li>
                 
                <?php
                // use wp_list_pages to list subpages of ancestor or current page
                wp_list_pages( $args );;
             
     
            // close the page-tree list
            ?>
            </ul>
     
        <?php
        }
    }
     
}
?>

Вы можете активировать функцию одним из двух способов:

  • tutsplus_list_subpages() в одном из файлов шаблонов вашей темы, таких как файл sidebar.php
  • Прикрепив его к крючку в вашей теме.

Например, если ваша тема имеет хук sidebar.php файле sidebar.php , вы должны добавить следующее в свой файл functions.php :

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

Код, который я продемонстрировал, позволяет автоматически добавлять список связанных страниц на страницу в любой части иерархии вашего сайта.

Если вы используете его для клиентских сайтов, вам нужно убедиться, что клиент понимает, как создавать страницы иерархически, но в остальном это не означает, что ему вообще придется об этом думать.

Если вы хотите сделать код еще более удобным для клиентов, вы можете создать виджет (или шорткод) для вывода списка страниц, но это тема для другого дня!