Меню, Списки архивов и Облака тегов в WordPress

Блог на основе рубрик

 

Если посмотреть на популярный блог Nettuts+, то мы увидим достаточно традиционную структуру, где записи публикуются день за днем в хронологическом порядке. Главная страница представляет новые записи всех типов, начиная с самых последних. В блогах такого типа посетители приходят по двум причинам: посмотреть, нет ли чего нового или найти что-то нужное. Сайт хорошо отрабатывает обе задачи, отображая заметную форму поиска и выводя первым самый новый
контент.

Сайт Nettus+

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

Иерархический контент

Как мы уже знаем, Вордпресс не ограничивается блоговой структурой. Вполне жизнеспособной структурой может стать использование Страниц для создания иерархии содержимого сайта. Давайте посмотрим на примеры кодов на сайте CSS-Tricks. Главная страница с фрагментами кодов содержит 6 дочерних страниц, каждая из которых обслуживает рубрику соответствующего языка программирования. А каждая из страниц языка программирования содержит много дочерних страниц конкретных примеров, создавая вместе огромное количество структурированных примеров кода.

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

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

Вот как выглядит структура таких страниц с учетом их вложенности в админке:

Иерархия страниц

А вот как их можно отобразить в браузере с помощью стилей

Стили меню в зависимости от типа страницы

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

Родительская страница — главная страница этого раздела

Родительская страница использует специальный шаблон page-snippet-cat.php Этот уникальный шаблон страницы позволяет вывести все, что нам нужно на этой странице, но он не должен совсем уж отличаться от остальных страниц сайта и содержать те же основные элементы — хидер, сайдбар и футер. Различие между специальной страницей и всеми остальными заключается в специальном заголовке, который отображает дочерние страницы

wp_list_pages('title_li=&exclude=3285,3473&child_of='.$post->ID);

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

Дочерняя страница — Языки программирования

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

Останется только подключить нужный CSS и JavaScript код для решения стилистических и функциональных задач. CSS добавит нужные стили, а явакод добавит визуальный эффект. Почему мы не добавляем CSS код в код нашего сайта, а JavaScrip в JavaScrip код сайта? Это можно сделать, но 95% страниц сайта его не используют, а значит мы тратим впустую трафик и ресурсы.

Гораздо более правильным будет добавлять их только на те страницы, на которых они используются. Соответствующая вставка в header.php будет выглядеть так

<?php if (is_page_template("page-snippet-cat.php")) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?/css/snippets.css" />
<script type='text/javascript' src='<?php bloginfo('stylesheet_directory'); ?>/js/snippets.js'></script>
<?php } ?>

Дочерняя страница — страница примера кода

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

Т.к. мы находимся глубоко внутри иерархической вложенности, появляется смысл помочь нам сориентироваться по дереву рубрик. Для этой цели отлично подходит плагин NavXT, доступный тут https://wordpress.org/plugins/breadcrumb-navxt/ и добавляющий на сайт хлебные крошки.

<?php if (function_exists('bcn_display')) {bcn_display();} ?>

Как видим — это пример корректной вставки функции плагина в шаблон. Если даже плагин отключить или удалить — шаблон будет работать без ошибок.

Хлебные крошки

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

Создаем идеальную архивную страницу

В терминологии Вордпресса, Архив (archive) — это страница, отображающая записи выбранной рубрики, тега, даты и т.д.

А архивы (archives) – это страница, отображающая список ссылок на все записи и страницы вашего сайта.

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

Создайте новый файл шаблона, назовите его archives.php и включите нужный тег из приведенного набора, который будет создавать список ссылок на все нужное содержимое.

<?php wp_get_archives('type=yearly'); ?> // Список всех записей, упорядоченный по году написания
<?php wp_get_archives('type=monthly'); ?> // Список всех записей, упорядоченный по месяцам
<?php wp_get_archives('type=daily'); ?> // Список всех записей, упорядоченный по дням
<?php wp_list_authors(); ?> // Список всех зарегистрированных авторов блога
<?php wp_list_categories('title_li='); ?> // Список всех рубрик блога
<?php wp_tag_cloud(); ?> // Список всех тегов блога
<?php wp_list_pages('title_li='); ?> // Список всех страниц блога

Собрав все вместе, можно сделать вот такой вариант шаблона:

<?php /* Template Name: Archives */ ?>
<?php get_header(); ?>
<div id="content">
<h2><?php the_title(); ?></h2>
<div class="col">
<h3>Архивы по годам:</h3>
<ul><?php wp_get_archives('type=yearly'); ?></ul>
<h3>Архивы по месяцам:</h3>
<ul><?php wp_get_archives('type=monthly'); ?></ul>
<h3>Архивы по дням:</h3>
<ul><?php wp_get_archives('type=daily'); ?></ul>
<h3>Архивы по рубрикам:</h3>
<ul><?php wp_list_categories('title_li='); ?></ul>
<h3>Архивы по авторам:</h3>
<ul><?php wp_list_authors(); ?></ul>
</div>
<div class="col">
<h3>Все страницы:</h3>
<ul><?php wp_list_pages('title_li='); ?></ul>
<h3>Архивы по тегам:</h3>
<?php wp_tag_cloud(); ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

И если, к примеру, вы найдете в интернете симпатичный шаблон, а в нем будет такой код, то для его руссификации достаточно будет перевести «Archives by Year:», «Archives by Month:» (как в этом примере) и все остальное на русский и сохранить.

Но грамотные шаблоны делаются немного по-другому. В них используются строковые переменные типа __ ("string"); и в зависимости от включенного языка, эти переменные будут отображать соответствующее значение, заданное в файле локализации pomo или pot. При смене языка будет меняться отображаемое значение этой переменной. Поэтому для перевода таких шаблонов нужно создать и перевести .po файл для русского языка.

Производим впечатление с облаком тегов

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

<?php wp_tag_cloud(array(
'smallest' => 10,  // размер шрифта редко используемых тегов
'largest' => 18,  // размер шрифта часто используемых тегов
'unit' => 'px',  // размер задается в пикселях
'orderby' => 'name',  // сортировка по алфавиту
'order' => 'ASC',  // начиная с А
'exclude' => 6  // ID исключаемых тегов
)); ?>

Полный список параметров можно найти тут https://codex.wordpress.org/Template_Tags/wp_tag_cloud