ЗАВАНТАЖИТИ ВИХІДНІ ФАЙЛИ | ПОДИВИТИСЯ ДЕМО
Над чим сьогодні працюємо:
Створюючи веб-сайти, я часто користуюся текстовими віджетами, коли потрібно помістити довільний контент в бічну панель на сторінці. Ці віджети дуже зручні за рахунок підтримки звичайного тексту і HTML.
Але якщо мої клієнти пізніше захочуть щось змінити в бічній панелі сайту, і при цьому зовсім не розбираються в HTML, це створить певні труднощі, особливо якщо використовуються зображення або посилання.
Цю проблему можна обійти, замінивши поле для віджета у бічній панелі на довільний тип запису (custom post type), і задіявши WP_Query для відображення записів даного типу.
Це можна зробити в два етапи:
- Зареєструвати довільний тип запису для вашої бічній панелі;
- Створити функцію, яка буде відображати контент в бічній панелі, і додати її в файл sidebar.php у папці з вашим шаблоном.
Ми також створимо кілька бічних панелей через консоль WordPress, перевіримо, як вони виглядають, і трохи попрацюємо над їх стилем.
Що вам знадобиться
- робоча платформа на WordPress;
- редактор коду.
Заради підстраховки, ми створюємо дочірню тему оформлення для Twenty П’ятнадцять, але ви можете додавати код прямо в поточний шаблон. Також можна скористатися спеціальним плагіном, який допоможе вам зареєструвати новий тип запису і створити функцію, а потім додати її в файл sidebar.php в папці вашої теми.
Створюємо дочірню тему оформлення
Якщо ви маєте намір працювати з власним шаблоном, то цей етап можна пропустити. Для реалізації іншого варіанту краще підстрахуватися і створити дочірню тему оформлення. Ми будемо працювати з дочірньою темою для Twenty Fifteen.
Папки themes, яка за замовчуванням знаходиться в wp-content, створіть нову папку і введіть назву для вашої нової теми. Ми використовуємо назву tutsplus-sidebar-custom-post-type.
У цій папці створіть 2 файлу: style.css і functions.php. Скопіюйте файл sidebar.php з папки Twenty Fifteen в папку вашої дочірньої теми. Пізніше ми його відредагуємо, а WordPress буде використовувати файл бічній панелі з папки дочірньої теми замість основної папки Twenty Fifteen.
У новий файл стилів помістіть наступний код:
/*
Theme Name: Tuts+ Use a Cusotm Post Type for Content Sidebar
Theme URI: http://rachelmccollin.co.uk/tutsplus-use-custom-post-type-for-sidebars/
Description: Theme to support tuts+ tutorial on using a CPT for sidebars. Child theme for the Twenty Fifteen theme.
Author: Rachel McCollin
Author URI: http://rachelmccollin.co.uk/
Template: twentyfifteen
Версія: 1.0
*/
@import url(«../twentyfifteen/style.css»);
Потім відредагуйте інформацію про шаблон і автора, так як тут вказані дані іншої людини.
Тепер активуйте вашу тему оформлення на сайті через консоль WordPress.
Реєструємо довільний тип запису
Далі потрібно зареєструвати довільний тип запису для бічної панелі. Це робиться у файлі functions.php в папці вашої теми оформлення.
Відкрийте файл functions.php в папці вашої теми оформлення, і внесіть туди наступний код:
function tutsplus_create_sidebar_post_type() {
$labels = array(
‘name’ => __( ‘Sidebars’ ),
‘singular_name’ => __( ‘Sidebar’ ),
‘add_new’ => __( ‘New Sidebar’ ),
‘add_new_item’ => __( ‘Add New Sidebar’ ),
‘edit_item’ => __( ‘Edit Sidebar’ ),
‘new_item’ => __( ‘New Sidebar’ ),
‘view_item’ => __( ‘View Sidebar’ ),
‘search_items’ => __( ‘Search Sidebars’ ),
‘not_found’ => __( ‘No Sidebars Found’ ),
‘not_found_in_trash’ => __( ‘No Sidebars found in Trash’ ),
);
$args = array(
‘labels’ => $labels,
‘has_archive’ => false,
‘public’ => true,
‘hierarchical’ => false,
‘supports’ => array(
‘title’,
‘editor’,
‘excerpt’,
‘custom-fields’,
‘thumbnail’,
‘page-attributes’
),
);
register_post_type( ‘sidebar_post’, $args );
}
add_action( ‘init’, ‘tutsplus_create_sidebar_post_type’ );
Це дія зареєструє довільний тип запису sidebar_post. Врахуйте, що я цілеспрямовано ставлю назва sidebar_post, а не sidebar, так як у багатьох шаблонах клас .sidebar вже використовується для бічної панелі, а це може призвести до конфлікту між CSS-класами, які використовуються тегом шаблону post_class().
Тепер, якщо оновити сторінку консолі, то можна побачити доданий довільний тип запису:
Спробуйте додати кілька записів для бічної панелі. Процес схожий з створенням нової записи:
Одна з моїх записів містить тільки зображення. Це зроблено спеціально, так як цикл, який я збираюся далі використовувати, буде відображати прикріплені зображення.
Створюємо функцію для відображення записів в бічній панелі
На даний момент, ваші бічні панелі не будуть відображатися на сайті, так як ви не додали їх в тему оформлення. Тому далі ми пропишемо функцію, яка використовує WP_Query для виведення записів в бічній панелі.
Створення функції
В файл functions.php потрібно вставити наступний код:
function tutsplus_sidebars() {
$args = array(
‘post_type’ => ‘sidebar_post’
);
$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>
have_posts() ) : $query->the_post(); /* start the loop */ ?>
