Как создать пользовательскую страницу архива WordPress

  1. Об авторе
  2. Дальнейшее чтение на SmashingMag:
  3. История WordPress Архивов
  4. Как создать пользовательскую страницу архивов в WordPress
  5. Начало работы с основным файлом
  6. Добавление настраиваемого приветственного сообщения
  7. Перечисление 15 последних сообщений
  8. Отображение ссылок на архив авторов
  9. Отображение ссылок на ежемесячные архивы
  10. Полный шаблон страницы архива
  11. Таблица стилей
  12. Как интегрировать этот шаблон с любой темой
  13. Что дальше?

Об авторе

Кароль К. нанимает блогера и писателя. Его работы были опубликованы по всему Интернету, на таких сайтах, как: NewInternetOrder.com , MarketingProfs.com, Adobe.com,… Подробнее о Кароле ...

Если бы я спросил вас, какой тип страницы по умолчанию в WordPress используется по умолчанию, то есть вероятность, что вы скажете шаблон архива. Или, скорее всего, вы вообще не будете думать о шаблоне архива - вот насколько он непопулярен. Причина проста. Как бы ни был хорош WordPress, стандартный подход к архиву далеко не так удобен для пользователя. \ N \ n Исправим это сегодня! Давайте создадим страницу архива для WordPress, которая действительно полезна. Самое приятное, что вы сможете использовать его с любой современной темой WordPress, установленной на вашем сайте в данный момент.

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

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

Дальнейшее чтение на SmashingMag:

Но сначала, что именно мы подразумеваем под «страницей архива»?

История WordPress Архивов

В WordPress вы можете работать с различными шаблонами и структурами страниц в стандартной конфигурации. Глядя на список каталогов темы по умолчанию на момент написания «Двадцать пятнадцать», мы находим следующее:

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

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

Стандартная архивная страница в Двадцать Пятнадцать. ( Посмотреть большую версию )

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

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

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

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

Вот почему мы собираемся создать собственную страницу архива.

Как создать пользовательскую страницу архивов в WordPress

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

  • включить специальное приветственное сообщение (может содержать текст, изображения, форму для подписки и т. д. - стандартный материал WordPress);
  • список 15 последних сообщений (настраивается);
  • отображать ссылки на автора архива;
  • отображать ссылки на ежемесячный архив;
  • добавить дополнительные области виджетов (для отображения таких вещей, как самый популярный контент, категории, теги).

Наконец, страница будет адаптивной и не будет зависеть от текущей темы сайта, на котором она используется.

При этом мы должны начать с использования некоторой темы в качестве основы нашей работы здесь. Я буду использовать Зериф Лайт , Признаюсь, я могу быть немного предвзятым, потому что это одна из наших собственных тем (в ThemeIsle). Тем не менее, это была одна из 10 самых популярных тем, выпущенных в прошлом году в директории тем WordPress, так что я надеюсь, что вы позволите этой слайде скользить.

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

Начало работы с основным файлом

Лучшая модель для создания вашей архивной страницы - это файл page.php вашей текущей темы по нескольким причинам:

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

Поэтому, начиная с файла page.php темы Zerif Lite, я собираюсь сделать копию и назвать ее tmpl_archives.php.

(Убедитесь, что ваша страница не называется чем-то вроде page-archives.php. Все имена файлов, начинающиеся с page-, будут рассматриваться как новые шаблоны страниц в основном файле. иерархия тем WordPress , Вот почему мы используем префикс tmpl_ здесь.)

Далее все, что я собираюсь сделать, это изменить одну строку в этом файле:

<? php get_template_part ('content', 'page'); ?>

Мы изменим это на это:

<? php get_template_part ('content', 'tmpl_archives'); ?>

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

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

Кроме того, не забывайте о стандартном пользовательском комментарии объявления шаблона, который вам нужно поместить в самом начале вашего нового файла (в данном случае, tmpl_archives.php):

<? php / * Имя шаблона: архивная страница Custom * /?>

После этого нам остается следующая файловая структура (с некоторыми элементами, удаленными для удобства чтения):

<? php / * Имя шаблона: пользовательская страница архива * / get_header (); ?> <div class = "clear"> </ div> </ header> <! - / END HOME SECTION -> <div id = "content" class = "site-content"> <div class = "container "> <div class =" content-left-wrap col-md-9 "> <div id =" primary "class =" content-area "> <main id =" main "class =" site-main "role = "main"&gt; <? php while (have_posts ()): the_post (); // стандартный цикл WordPress. ?&gt; <? php get_template_part ('content', 'tmpl_archives'); // загрузка нашего пользовательского файла. ?&gt; <? php endween; // конец цикла. ?> </ main> <! - #main -> </ div> <! - #primary -> </ div> <div class = "sidebar-wrap col-md-3 content-left-wrap "&gt; <? php get_sidebar (); ?> </ div> </ div> <! - .container -&gt; <? php get_footer (); ?>

Далее, давайте создадим другую часть головоломки - файл пользовательского содержимого. Мы начнем с файла content-page.php, сделав копию и переименовав его в content-tmpl_archives.php.

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

<? php / ** * Шаблон, используемый для отображения содержимого архива * /?> <article id = "post - <? php the_ID ();?>" <? php post_class (); ? >> <header class = "entry-header"> <h1 class = "entry-title"&gt; <? php the_title (); ?> </ h1> </ header> <! - .entry-header -> <div class = "entry-content"&gt; <? php the_content (); ?> <! - ЭТО ТАМ, ГДЕ ПРОХОДИТ РАЗЛИЧНАЯ ЧАСТЬ -> </ div> <! - .entry-content -> </ article> <! - #post - ## ->

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

Добавление настраиваемого приветственного сообщения

Об этом на самом деле уже позаботился WordPress. Следующая строка делает волшебство:

<? php the_content (); ?>

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

Итак, мы начинаем с создания нового файла archives-page-functions.php, размещения его в главном каталоге темы и регистрации в нем двух новых областей виджетов:

if (! function_exists ('archives_page_widgets_init')): function archives_page_widgets_init () {/ * Первый виджет страницы архива, отображаемый влево. * / register_sidebar (array ('name' => __ ('Виджет страницы архива LEFT', 'zerif-lite'), 'description' => __ ('Этот виджет будет показан слева от вашей страницы архива.' , 'zerif-lite'), 'id' => 'archives-left', 'before_widget' => '<div class = "archives-widget-left">', 'after_widget' => '</ div>' , 'before_title' => '<h1 class = "widget-title">', 'after_title' => '</ h1>',)); / * Второй виджет страницы архива, отображаемый вправо. * / register_sidebar (array ('name' => __ ('Виджет страницы архива RIGHT', 'zerif-lite'), 'description' => __ ('Этот виджет будет показан справа от вашей страницы архива.' , 'zerif-lite'), 'id' => 'archives-right', 'before_widget' => '<div class = "archives-widget-right">', 'after_widget' => '</ div>' , 'before_title' => '<h1 class = "widget-title">', 'after_title' => '</ h1>',)); } endif; add_action ('widgets_init', 'archives_page_widgets_init');

Далее нам понадобится несколько пользовательских стилей для страницы архива, поэтому давайте также «поставим в очередь» новый файл CSS:

if (! function_exists ('archives_page_styles')): function archives_page_styles () {if (is_page_template ('tmpl_archives.php')) {wp_enqueue_style ('archives-page-style', get_template_directory_uri (). '/ archives-page-style.) CSS'); // стандартный способ добавления таблиц стилей в WP. }} endif; add_action ('wp_enqueue_scripts', 'archives_page_styles');

Это условная операция постановки в очередь. Он будет работать только в том случае, если посетитель просматривает страницу архива.

Кроме того, давайте не забудем включить этот новый файл archives-page-functions.php, добавив эту строку в самый конец файла functions.php текущей темы:

требуют get_template_directory (). '/Archives-page-functions.php';

Наконец, новый блок, который мы будем использовать в нашем основном файле content-tmpl_archives.php, довольно прост. Просто поместите следующее прямо под вызовом the_content ();

<? php / * Включение областей виджетов для страницы архива. * /?&gt; <? php if (is_active_sidebar ('archives-left')) dynamic_sidebar ('archives-left'); ?&gt; <? php if (is_active_sidebar ('archives-right')) dynamic_sidebar ('archives-right'); ?> <div style = "clear: both; margin-bottom: 30px;"> </ div> <! - очищает плавающее ->

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

Перечисление 15 последних сообщений

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

Вы, наверное, спрашиваете, почему произвольное количество 15 постов? Ну, у меня нет веской причины, поэтому давайте сделаем это настраиваемым через настраиваемые поля.

Вот как мы собираемся это сделать:

  • Настройка количества постов будет возможна через настраиваемое поле archived-posts-no.
  • Если номер указан неверно, шаблон по умолчанию будет отображать 15 последних сообщений.

Ниже приведен код, который делает это. Поместите его прямо под предыдущим разделом в файле content-tmpl_archives.php, который обрабатывает новые области виджетов.

<? php $ how_many_last_posts = intval (get_post_meta ($ post-> ID, 'archived-posts-no', true)); / * Здесь мы проверяем, что выбранное число является разумным. Если оно больше 200 или меньше 2, мы просто сбрасываем его на значение по умолчанию 15. * / if ($ how_many_last_posts> 200 || $ how_many_last_posts <2) $ how_many_last_posts = 15; $ my_query = new WP_Query ('post_type = post & nopaging = 1'); if ($ my_query-> have_posts ()) {echo '<h1 class = "widget-title"> Last'. $ how_many_last_posts. ' Posts <i class = "fa fa-bullhorn" style = "vertical-align: baseline;"> </ i> </ h1> & nbsp; '; echo '<div class = "archives-latest-section"> <ol>'; $ counter = 1; while ($ my_query-> have_posts () && $ counter <= $ how_many_last_posts) {$ my_query-> the_post (); ?> <li> <a href="<?php the_permalink() ?> "rel =" bookmark "title =" Постоянная ссылка на <? php the_title_attribute ();?> "&gt; <? php the_title (); ?> </a> </ li&gt; <? php $ counter ++; } echo '</ ol> </ div>'; wp_reset_postdata (); }?>

По сути, все, что это делает, это просматривает значение настраиваемого поля, устанавливает количество отображаемых сообщений и затем извлекает эти сообщения из базы данных с помощью WP_Query () ;. Я также использую иконки Font Awesome, чтобы добавить блики этому блоку.

Отображение ссылок на архив авторов

(Этот раздел полезен, только если вы имеете дело с блогом с несколькими авторами. Пропустите его, если вы являетесь единственным автором.)

Эта функциональность может быть достигнута с помощью действительно простого блока кода, помещенного прямо в наш основной файл content-tmpl_archives.php (ниже предыдущего блока):

<h1 class = "widget-title"> Наши авторы <i class = "fa fa-user" style = "vertical-align: baseline;"> </ i> </ h1> & nbsp; <div class = "archives-авторы-раздел"> <ul&gt; <? php wp_list_authors ('exclude_admin = 0 & optioncount = 1'); ?> </ ul> </ div>

Мы обсудим стили в течение минуты. В данный момент обратите внимание, что все делается с помощью вызова функции wp_list_authors ().

Отображение ссылок на ежемесячные архивы

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

Вот как это выглядит в файле content-tmpl_archives.php:

<h1 class = "widget-title"> По месяцам <i class = "fa fa-calendar" style = "vertical-align: baseline;"> </ i> </ h1> & nbsp; <div class = "архивы по месяцам"> <p&gt; <? php wp_get_archives ('type = month & format = custom & after = |'); ?> </ p> </ div>

На этот раз мы отображаем это как один абзац с записями, разделенными трубкой (|).

(У Smashing Magazine уже есть действительно хороший учебник о том, как настроить отдельные страницы архива для категорий, тегов и других таксономий в WordPress.)

Полный шаблон страницы архива

Хорошо, просто для ясности, давайте посмотрим на наш полный файл content-tmpl_archives.php, который является основным файлом, который заботится о отображении нашего пользовательского архива:

<? php / ** * Шаблон, используемый для отображения содержимого архива * /?> <article id = "post - <? php the_ID ();?>" <? php post_class (); ? >> <header class = "entry-header"> <h1 class = "entry-title"&gt; <? php the_title (); ?> </ h1> </ header> <! - .entry-header -> <div class = "entry-content"&gt; <? php the_content (); ?&gt; <? php if (is_active_sidebar ('archives-left')) dynamic_sidebar ('archives-left'); ?&gt; <? php if (is_active_sidebar ('archives-right')) dynamic_sidebar ('archives-right'); ?> <div style = "clear: both; margin-bottom: 30px;"> </ div> <! - очищает плавающее -&gt; <? php $ how_many_last_posts = intval (get_post_meta ($ post-> ID, ' архив-посты-нет ', правда)); if ($ how_many_last_posts> 200 || $ how_many_last_posts <2) $ how_many_last_posts = 15; $ my_query = new WP_Query ('post_type = post & nopaging = 1'); if ($ my_query-> have_posts ()) {echo '<h1 class = "widget-title"> Last'. $ how_many_last_posts. ' Posts <i class = "fa fa-bullhorn" style = "vertical-align: baseline;"> </ i> </ h1> & nbsp; '; echo '<div class = "archives-latest-section"> <ol>'; $ counter = 1; while ($ my_query-> have_posts () && $ counter <= $ how_many_last_posts) {$ my_query-> the_post (); ?> <li> <a href="<?php the_permalink() ?> "rel =" bookmark "title =" Постоянная ссылка на <? php the_title_attribute ();?> "&gt; <? php the_title (); ?> </a> </ li&gt; <? php $ counter ++; } echo '</ ol> </ div>'; wp_reset_postdata (); }?> <h1 class = "widget-title"> Наши авторы <i class = "fa fa-user" style = "vertical-align: baseline;"> </ i> </ h1> & nbsp; <div class = "archives-авторы-раздел"> <ul&gt; <? php wp_list_authors ('exclude_admin = 0 & optioncount = 1'); ?> </ ul> </ div> <h1 class = "widget-title"> По месяцам <i class = "fa fa-calendar" style = "vertical-align: baseline;"> </ i> </ h1 > & NBSP; <div class = "архивы по месяцам"> <p&gt; <? php wp_get_archives ('type = month & format = custom & after = |'); ?> </ p> </ div> </ div> <! - .entry-content -> </ article> <! - #post - ## ->

Таблица стилей

Наконец, давайте посмотрим на таблицу стилей и, самое главное, на эффект, который она нам дает.

Вот файл archives-page-style.css:

.archives-widget-left {float: left; ширина: 50%; } .archives-widget-right {float: left; отступ слева: 4%; ширина: 46%; } .archives-latest-section {} .archives-latest-section ol {font-style: italic; размер шрифта: 20 пикселей; отступы: 10px 0; } .archives-latest-section ol li {padding-left: 8px; } .archives-авторы-раздел {} .архивы-авторы-раздел ul {list-style: none; выравнивание текста: по центру; граница вершины: 1px пунктирная # 888; граница снизу: 1px пунктирная # 888; отступы: 10px 0; размер шрифта: 20 пикселей; поле: 0 0 20px 0; } .archives-авторы-раздел ul li {display: inline; отступы: 0 10px; } .archives-авторы-раздел ul li a {текст-украшения: нет; } .archives-by-month-section {ext-align: center; расстояние между словами: 5 пикселей; } .archives-by-month-section p {border-top: 1px dotted # 888; граница снизу: 1px пунктирная # 888; отступы: 15px 0; } .archives-by-month-section pa {text-украшение: нет; } @media только экран и (max-width: 600px) {.archives-widget-left {width: 100%; } .archives-widget-right {width: 100%; }}

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

ОК, посмотрим результат! Вот как это выглядит на веб-сайте, который уже содержит довольно мало контента в архиве:

Наша пользовательская страница архива в теме Zerif Lite. ( Посмотреть большую версию )

Как интегрировать этот шаблон с любой темой

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

  1. Возьмите файл archives-page-style.css и файл archives-page-functions.php, который мы здесь создали, и поместите их в главный каталог вашей темы.
  2. Отредактируйте файл functions.php вашей темы и добавьте эту строку в самом конце: require get_template_directory (). '/Archives-page-functions.php' ;.
  3. Возьмите файл page.php вашей темы, сделайте копию, переименуйте ее, измените вызов функции get_template_part () на get_template_part ('content', 'tmpl_archives');; а затем добавьте основной комментарий объявления в самом начале: / * Название шаблона: Архив страницы Custom * /.
  4. Возьмите файл content-page.php вашей темы, сделайте копию, переименуйте его в content-tmpl_archives.php и включите все пользовательские блоки, которые мы создали в этом руководстве, прямо под the_content (); вызов функции.
  5. Проверьте и наслаждайтесь.

Вот как это выглядит в стандартной теме Twenty Fifteen:

Наша пользовательская страница архива в теме «Двадцать пятнадцать». ( Посмотреть большую версию )

Что дальше?

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

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

Php get_template_part ('content', 'page'); ?
Php get_template_part ('content', 'tmpl_archives'); ?
Php / * Имя шаблона: архивная страница Custom * /?
Php / * Имя шаблона: пользовательская страница архива * / get_header (); ?
Gt; <?
Gt; <?
Php get_sidebar (); ?
Php get_footer (); ?
Php / ** * Шаблон, используемый для отображения содержимого архива * /?