Створюємо довільну сторінку архівів в WordPress
- Історія архівів WordPress
- Як створити довільну сторінку архівів в WordPress
- Починаємо з основного файлу
- Додаємо довільне вітання
- Додаємо нові області віджетів
- Висновок останніх 15 записів
- Висновок посилань на авторські архіви
- Висновок посилань на архіви по місяцях
- Повний шаблон архівної сторінки
- Таблиця стилів
- Як інтегрувати цей шаблон в будь-яку тему
Якщо я запитаю вас, який стандартний тип сторінок в WordPress використовуєте найрідше, то, швидше за все, ваша відповідь буде - шаблон архівів. Або, що ще ймовірніше, ви взагалі навіть не чули про шаблон архівів - настільки він непопулярний. Причина проста. Стандартний спосіб використання архівів далекий від розуміння «дружнього до користувачів».
Давайте виправимо це сьогодні! Давайте створимо сторінку архівів WordPress, яка буде дійсно корисною. Найприємніша річ - те, що ви зможете використовувати ці архіви в будь-якій сучасній темі WordPress, встановленої на вашому сайті. Однак давайте спочатку розберемося, що ми маємо на увазі під «сторінкою архівів»?
Історія архівів WordPress
У WordPress ви працюєте з масою різних шаблонів і структурних елементів, які входять в стандартну конфігурацію. Якщо поглянути на список директорій стандартної теми Twenty Fifteen, то ми побачимо наступне:
- Сторінка помилок 404
- Сторінка архівів (наш сьогоднішній гість)
- Сторінка вкладених зображень
- Контрольний аркуш (головна сторінка)
- Шаблон сторінок (для стандартних сторінок)
- Сторінка результатів пошуку
- Сторінки окремих записів і вкладень
Незважаючи на різні цілі, всі ці сторінки дуже схожі за своєю структурою, і найчастіше вони відрізняються лише кількома ділянками або кількома рядками коду. Єдине видиме відмінність між індексного сторінкою і архівної сторінкою - це додатковий заголовок вгорі, який змінюється в залежності від сторінки, що переглядається.
Ідея, яка була покладена в основу архівної структури, полягає в тому, щоб запропонувати адміністратору блогу зручний і простий спосіб виведення архівів за різними критеріями. Зрештою, всі ці різні архівні сторінки - це просто версії індексного сторінки; вони виводять контент, опублікований в певний часовий проміжок, певним автором, з певними мітками і рубриками.
Звучить добре, якщо дивитися на це з позицій програміста, проте це не найзручніший підхід з точки зору користувачів. В даному випадку відсутній один важливий рівень - рівень, який пролягає між наміром користувача знайти контент і окремими елементами архівів.
Ось, що я маю на увазі. В даний момент єдиний вбудований спосіб виведення архівних посилань на сайті WordPress - це висновок через віджет. Таким чином, якщо ви хочете дозволити користувачам заглиблюватися в архіви, причому ви хочете зробити це зрозумілим для людей способом, вам довелося б присвятити весь сайдбар під одні архіви (лише для того, щоб розкрити різні види структурування: архіви за датою, архіви рубрик, архіви міток, авторські архіви і т.д.).
Нам потрібен якийсь посередник, якась сторінка, яка буде вітати відвідувача, пояснювати йому, що він знаходиться в архіві, і вказувати на той контент, яким він цікавиться, або пропонувати популярний контент.
Саме з цієї причини ми і вирішили створити довільну сторінку архівів.
Як створити довільну сторінку архівів в WordPress
Ось те, що ми збираємося зробити. Наша довільна архівна сторінка буде заснована на спеціальному шаблоні сторінок. Цей шаблон дозволить нам зробити наступне:
- Додати довільне повідомлення (може містити текст, зображення, форму реєстрації тощо - стандартний контент WordPress).
- Виводити 15 останніх записів (налаштовується)
- Відображати посилання на авторські архіви
- Відображати посилання на архіви по місяцях
- Мати додаткові області віджетів (щоб виводити такі речі, як популярний контент, рубрики, теги).
Нарешті, сторінка буде адаптований, і її можна буде використовувати на будь-якому сайті.
Однак нам дійсно знадобиться взяти за основу деяку тему. Я скористався темою Zerif Lite . Зізнаюся, що це одна з наших власних тем. Тим не менш, це одна з 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 / * Template Name: Archive Page Custom * /?>Зрештою, ми залишимося з наступною структурою (деякі елементи вилучені з неї для зручності):
<? Php / * Template Name: Archive Page Custom * / 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"> <? php while (have_posts ()): the_post (); // standard WordPress loop. ?> <? Php get_template_part ( 'content', 'tmpl_archives'); // loading our custom file. ?> <? Php endwhile; // end of the loop. ?> </ Main> <! - #main -> </ div> <! - #primary -> </ div> <div class = "sidebar-wrap col-md-3 content-left-wrap "> <? php get_sidebar (); ?> </ Div> </ div> <! - .container -> <? Php get_footer (); ?>Далі, давайте створимо наступний пункт - довільний контентний файл. Ми скористаємося файлом content-page.php, скопіювавши і перейменувавши його в content-tmpl_archives.php.
У цьому файлі нам потрібно буде видалити все зайве, залишивши тільки структурні елементи, а також виклики базових WordPress-функцій:
<? Php / ** * The template used to display archive content * /?> <Article id = "post - <? Php the_ID ();?>" <? Php post_class (); ? >> <header class = "entry-header"> <h1 class = "entry-title"> <? Php the_title (); ?> </ H1> </ header> <! - .entry-header -> <div class = "entry-content"> <? Php the_content (); ?> <! - THIS IS WHERE THE FUN PART GOES -> </ 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 () {/ * First archive page widget, displayed to the LEFT. * / Register_sidebar (array ( 'name' => __ ( 'Archives page widget LEFT', 'zerif-lite'), 'description' => __ ( 'This widget will be shown on the left side of your archive page.' , 'zerif-lite'), 'id' => 'archives-left', 'before_widget' => '<div class = "archives-widget-left">', 'after_widget' => '</ div>' , 'before_title' => '<h1 class = "widget-title">', 'after_title' => '</ h1>',)); / * Second archive page widget, displayed to the RIGHT. * / Register_sidebar (array ( 'name' => __ ( 'Archives page widget RIGHT', 'zerif-lite'), 'description' => __ ( 'This widget will be shown on the right side of your archive page.' , '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 '); // standard way of adding style sheets in WP. }} Endif; add_action ( 'wp_enqueue_scripts', 'archives_page_styles');Це умовна операція постановки в чергу. Вона буде працювати тільки в тому випадку, якщо відвідувач переглядає архівний аркуш.
Потрібно не забути включити наш новий файл archives-page-functions.php шляхом додавання наступного рядка в самий кінець файлу functions.php поточної теми:
require get_template_directory (). '/Archives-page-functions.php';Нарешті, новий блок, який ми будемо використовувати в нашому основному файлі content-tmpl_archives.php, досить простий. Помістіть наступний код під викликом the_content () ;:
<? Php / * Enabling the widget areas for the archive page. * /?> <? Php if (is_active_sidebar ( 'archives-left')) dynamic_sidebar ( 'archives-left'); ?> <? Php if (is_active_sidebar ( 'archives-right')) dynamic_sidebar ( 'archives-right'); ?> <Div style = "clear: both; margin-bottom: 30px;"> </ div> <! - clears the floating ->Все, що нам тепер залишиться - це подбати про єдино недостатньому файлі, 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)); / * Here, we're making sure that the number fetched is reasonable. In case it's higher than 200 or lower than 2, we're just resetting it to the default value of 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 =" Permanent Link to <? Php the_title_attribute ();?> "> <? Php the_title (); ?> </a> </ li> <? Php $ counter ++; } Echo '</ ol> </ div>'; wp_reset_postdata (); }?>Все, що робить цей код - це отримує значення довільного поля, задає кількість виведених записів, після чого вибирає ці записи з бази даних, використовуючи WP_Query () ;. Також я використовую деякі іконки Font Awesome, щоб додати цим блоком певний шарм.
Висновок посилань на авторські архіви
Цей розділ корисний тільки в тому випадку, якщо ви працюєте з блогом з численними авторами. Пропустіть його, якщо у вас один автор.
Ця функціональність може бути реалізована за допомогою простого блоку коду, який потрібно помістити в наш файл content-tmpl_archives.php (під попереднім блоком):
<H1 class = "widget-title"> Our Authors <i class = "fa fa-user" style = "vertical-align: baseline;"> </ i> </ h1> & nbsp; <Div class = "archives-authors-section"> <ul> <? Php wp_list_authors ( 'exclude_admin = 0 & optioncount = 1'); ?> </ Ul> </ div>Ми перейдемо до стилів через пару хвилин. В даний момент зверніть увагу на що, що все робиться за допомогою виклику функції wp_list_authors ().
Висновок посилань на архіви по місяцях
Я додав цей елемент в самий кінець, оскільки це не найкорисніший компонент з точки зору читачів. Однак його важливо мати на архівної сторінці, щоб вам не довелося використовувати віджети для виведення архівів по місяцях в інших місцях сайту.
Ось, як це буде виглядати в файлі content-tmpl_archives.php:
<H1 class = "widget-title"> By Month <i class = "fa fa-calendar" style = "vertical-align: baseline;"> </ i> </ h1> & nbsp; <Div class = "archives-by-month-section"> <p> <? Php wp_get_archives ( 'type = monthly & format = custom & after = |'); ?> </ P> </ div>В даному випадку ми виведемо це у вигляді окремого абзацу із записами, розділеними прямим слешем (|).
Повний шаблон архівної сторінки
Давайте поглянемо на повний файл content-tmpl_archives.php, який є нашим основним файлом для виведення довільного архіву:
<? Php / ** * The template used to display archive content * /?> <Article id = "post - <? Php the_ID ();?>" <? Php post_class (); ? >> <header class = "entry-header"> <h1 class = "entry-title"> <? Php the_title (); ?> </ H1> </ header> <! - .entry-header -> <div class = "entry-content"> <? Php the_content (); ?> <? Php if (is_active_sidebar ( 'archives-left')) dynamic_sidebar ( 'archives-left'); ?> <? Php if (is_active_sidebar ( 'archives-right')) dynamic_sidebar ( 'archives-right'); ?> <Div style = "clear: both; margin-bottom: 30px;"> </ div> <! - clears the floating -> <? Php $ how_many_last_posts = intval (get_post_meta ($ post-> ID, ' archived-posts-no ', true)); 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 =" Permanent Link to <? Php the_title_attribute ();?> "> <? Php the_title (); ?> </a> </ li> <? Php $ counter ++; } Echo '</ ol> </ div>'; wp_reset_postdata (); }?> <H1 class = "widget-title"> Our Authors <i class = "fa fa-user" style = "vertical-align: baseline;"> </ i> </ h1> & nbsp; <Div class = "archives-authors-section"> <ul> <? Php wp_list_authors ( 'exclude_admin = 0 & optioncount = 1'); ?> </ Ul> </ div> <h1 class = "widget-title"> By Month <i class = "fa fa-calendar" style = "vertical-align: baseline;"> </ i> </ h1 > & nbsp; <Div class = "archives-by-month-section"> <p> <? Php wp_get_archives ( 'type = monthly & format = custom & after = |'); ?> </ P> </ div> </ div> <! - .entry-content -> </ article> <! - #post - ## ->Таблиця стилів
Нарешті, давайте подивимося на таблицю стилів. Ось як виглядає файл archives-page-style.css:
.archives-widget-left {float: left; width: 50%; } .Archives-widget-right {float: left; padding-left: 4%; width: 46%; } .Archives-latest-section {} .archives-latest-section ol {font-style: italic; font-size: 20px; padding: 10px 0; } .Archives-latest-section ol li {padding-left: 8px; } .Archives-authors-section {} .archives-authors-section ul {list-style: none; text-align: center; border-top: 1px dotted # 888; border-bottom: 1px dotted # 888; padding: 10px 0; font-size: 20px; margin: 0 0 20px 0; } .Archives-authors-section ul li {display: inline; padding: 0 10px; } .Archives-authors-section ul li a {text-decoration: none; } .Archives-by-month-section {ext-align: center; word-spacing: 5px; } .Archives-by-month-section p {border-top: 1px dotted # 888; border-bottom: 1px dotted # 888; padding: 15px 0; } .Archives-by-month-section pa {text-decoration: none; } @Media only screen and (max-width: 600px) {.archives-widget-left {width: 100%; } .Archives-widget-right {width: 100%; }}В основному стилі стосуються шрифтів і декількох структурних елементів, за винятком пари вирівнювань, а також блоку адаптивного дизайну в кінці.
Давайте подивимося, як це буде виглядати на практиці. Ось сайт, який має масу контенту в архіві:
Як інтегрувати цей шаблон в будь-яку тему
Довільна сторінка архівів, яку ми створили тут, представлена для теми Zerif Lite, яка є в офіційному каталозі WordPress. Однак, як я вже говорив, вона може використовуватися разом з будь-якою темою. Ось як це зробити:
- Беремо файли archives-page-style.css і archives-page-functions.php, які ми створили в керівництві, після чого поміщаємо їх в головний каталог теми.
- Редагуємо functions.php теми і додаємо наступний рядок в самий кінець: require get_template_directory (). '/Archives-page-functions.php';
- Беремо файл page.php теми, робимо його копію, перейменовуємо її, міняємо виклик функції get_template_part () на get_template_part ( 'content', 'tmpl_archives') ;, після чого додаємо описовий коментар в самий початок: / * Template Name: Archive Page Custom * /.
- Беремо файл content-page.php вашої теми, робимо його копію, перейменовуємо його в content-tmpl_archives.php, і додаємо в нього все довільні блоки, які ми створили в керівництві, відразу під викликом функції the_content () ;.
- Тестуємо і насолоджуємося.
Ось як це буде виглядати в стандартній темі Twenty Fifteen:
Джерело: smashingmagazine.com
Однак давайте спочатку розберемося, що ми маємо на увазі під «сторінкою архівів»?Php get_template_part ( 'content', 'page'); ?
Php get_template_part ( 'content', 'tmpl_archives'); ?
Php / * Template Name: Archive Page Custom * /?
Php / * Template Name: Archive Page Custom * / get_header (); ?
Gt; <?
Gt; <?
Php get_sidebar (); ?
Php get_footer (); ?
