Створюємо свій сайдбар на WordPress за допомогою кастомних типів записів

Ми часто використовуємо текстові віджети для додавання різного контенту на бічні панелі сайтів, які створюємо WordPress. Вони зручні у використанні, приймають як звичайний текст, так і HTML, тому за допомогою їх ви зможете додавати абсолютно будь-які типи контенту.

Проте, якщо ваші клієнти редагуватимуть бічну панель, не будучи знайомі з HTML, це легко призведе до неполадок, особливо якщо ми при роботі використовували картинки або посилання.

Дивіться також:

• Посібник з кастомних типів записів WordPress
• Custom Post Types: таксономії, фільтри та архіви в WordPress
• Як використовувати кастомні поля для створення мета-блоків із оглядами
• Додаємо банери на сайті за допомогою довільних типів записів WordPress
• SuperCPT: легко створюємо свої типи записів, таксономію та мета-блоки в WordPress

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

Результатом нашої роботи буде щось на кшталт цього:

Завантажити вихідні

Ви зможете зробити це за два кроки:

1. Зареєструйте кастомний тип постів для бічних панелей.
2. Створюйте функцію виведення контенту на бічні панелі та додайте її до файлу sidebar.php у вашій темі.

Ми також створимо бічні панелі WordPress, подивимося як вони виглядають і трохи змінимо їх оформлення.

Що вам знадобиться

Для виконання цього уроку вам знадобиться:

• Встановлений WordPress з доступом до консолі
• Редактор коду

Для цього уроку ми створимо дочірню тему з Twenty Fifteen, але ви зможете використовувати приклад коду для зміни вашої власної теми, або ж ви можете використовувати плагін для реєстрації нового кастомного типу запису та створення функції, а потім додати функцію до файлу sidebar.php вашої теми.

Створення дочірньої теми

Якщо ви працюєте над вашою темою, то можете пропустити цю частину, але якщо ви починаєте з нуля, то найпростішим способом розібратися в цій техніці буде створення дочірньої теми. Ми створимо дочірню тему з теми Twenty Fifteen.

У папці вашої теми WP-зміст створіть нову папку. Нашу ми назвали tutsplus-sidebar-custom-post-type.

У папці створіть два порожні файли style.css и functions.php. Також створіть копію файлу з sidebar.php вашої батьківської теми. Ви можете редагувати це пізніше, і WordPress буде використовувати файл шаблонів для показу бічної панелі з вашої дочірньої теми замість файлу з батьківської Twenty Fifteen.

У вашу нову таблицю стилів style.css додайте наступне:

/*
Theme Name:     Tuts+ Use a Cusotm Post Type for Sidebar Content
Theme URI:      
Description:    Theme to support tuts+ tutorial on using a CPT for sidebars. Child theme for the Twenty Fifteen theme.
Author:         Rachel McCollin
Author URI:     
Template:       twentyfifteen
Version:        1.0
*/
 
@import url("../twentyfifteen/style.css");

Вам знадобиться самостійно змінити деталі теми та автора, діючи на наш приклад.

Після цього ви можете активувати тему на вашому сайті за допомогою меню Зовнішній вигляд → Теми в консолі адміністратора WordPress.

Реєстрація кастомного типу постів

Наступним кроком буде реєстрація кастомного типу постів для бічної панелі. Ви можете це зробити у файлі для функцій теми (або, якщо ви використовували плагін, створіть новий файл у папці wp-content/plugins).

Відкрийте файл 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 для їх бічних панелей і повторне використання цієї назви може призвести до конфлікту класів виведення тегом шаблону post_class ()коли ми пізніше будемо створювати цикл.

Тепер, якщо ви оновите вашу сторінку адміністратора, на екрані побачите кастомний тип посту з назвою бічні панелі:

Тепер додамо кілька бічних панелей так само, як ви додавали звичайний пост. На скріншоті ви можете побачити наші:

Одна з наших бічних панелей складається лише із зображення. Це спеціально, оскільки надалі ми створимо цикл, який виводитиме ці зображення.

Створення функції для виведення бічної панелі

На даний момент бічні панелі не відображатимуться на вашому сайті, оскільки ви не додали їх у вашу тему. Тому наступним кроком буде написання функції, яка використовуватиме WP_Query, щоб виводити пости у бічній панелі.

Код функції

Додайте у файл функцій наступний код:

function tutsplus_sidebars() {
     
    $args = array(
        'post_type' => 'sidebar_post'
    );
     
    $query = new WP_query ( $args );
    if ( $query->have_posts() ) { ?>
 
        <?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>
      
        <aside id="post-<?php the_ID(); ?>" <?php post_class( 'sidebar-post' ); ?>>
            <h3 class="sidebar-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'compass' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
      
            <?php if ( has_post_thumbnail() ) { ?>
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail( 'medium', array(
                        'class' => 'aligncenter',
                        'alt'   => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
                    ) ); ?>
                </a>
            <?php } ?>
             
            <section class="sidebar-content">
                <?php the_content(); ?>
            </section><!-- .entry-content -->
             
        </aside>
      
        <?php endwhile; /* end the loop*/ ?>
      
        <?php rewind_posts();
    }
}

Давайте переглянемо цей код, щоб зрозуміти, що він виконує:

• Спочатку він створює функцію під назвою tutsplus_sidebars(), яку ми пізніше додамо до файлу sidebar.php
• Усередині тієї функції задаються аргументи для WP_Query, а саме пост типу sidebar_post
• Код перевіряє, чи повертає запит пост і якщо так, то запускає цикл
• Код відкриває елемент aside, використовуючи the_ID() и post_class () для створення ID та класів у CSS
• Код додає елемент h3 під назвою поста
• Перевіряє, чи є у пості зображення і якщо так, то виводить їх
• Виводить вміст посту, який знаходиться всередині елемента розділ
• Закриває елемент aside, зупиняє цикл та використовує rewind_posts() для скидання запиту

Після цього збережіть файл функцій.

Додавання функції до файлу шаблонів бічної панелі

Функція, яку ви щойно написали, ніяк не прикріплена до WordPress, тому на цьому етапі її неможливо запустити. Для цього вам потрібно викликати її у файлі sidebar.php.

Відкрийте файл sidebar.php у вашій темі. Якщо ви працюєте з дочірньою темою від Twenty Fifteen, використовуйте копію, яку ви створили раніше.

Якщо ви бажаєте, щоб у вашій бічній панелі були лише пости, без віджетів, видаліть код для виведення віджетів. Якщо ж ви хочете, щоб віджети були присутні, залиште його.

У нашому випадку ми видалимо віджети з файлу Twenty Fifteen для бічної панелі, тому я видаляю наступні рядки з кодом:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <div id="widget-area" class="widget-area" role="complementary">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </div><!-- .widget-area -->
<?php endif; ?>

Тепер додамо функцію для виведення бічної панелі. У Twenty Fifteen ми додамо її наприкінці файлу sidebar.php, після рядка ENDIF;. У вашій темі ви можете вставити її будь-де:

<?php tutsplus_sidebars(); ?>

Після цього можемо подивитися на наш сайт, на якому бічні панелі вже будуть виведені:

Нам все ще потрібно оформити все в одному стилі, але ми приступимо до цього після того, як «підчистимо» область віджетів.

Скасування реєстрації області віджетів

Якщо ви працюєте з дочірньою темою і не хочете використовувати віджети у бічній панелі, щоб уникнути плутанини, повністю видаліть область віджетів у дочірній темі. Це означає, що на сторінці адміністратора в меню Зовнішній вигляд → Віджети більше не відображатимуться. Якщо ви цього не зробите, користувачі зможуть додавати віджети, і для них буде незрозуміло, чому вони не відображаються на екрані.

Якщо ви працюєте зі своєю темою, то все, що вам потрібно, це видалити код, який зареєстрував ці віджети (або для початку, просто не додавати ніякі віджети). Якщо ви використовуєте дочірню тему, ви не можете змінити батьківську, тому необхідно використовувати функцію unregister_sidebar() для видалення області віджетів з бокової панелі.

Додати до файлу functions.php вашої дочірньої теми наступне:

function tutsplus_unregister_sidebar_widget_area() {
    unregister_sidebar( 'sidebar-1' );
}
add_action( 'widgets_init', 'tutsplus_unregister_sidebar_widget_area', 15 );

Це скасує реєстрацію області віджету бічна панель-1, ID якої ми видалили у файлі sidebar.php. Зауважте, що при приєднанні функції до дії widgets_init, ми встановили пріоритет 15, щоб переконатися, що ця функція запуститься після реєстрації бічної панелі, яка має пріоритет. 10 за замовчуванням.

Тепер у вікні адміністратора віджети не відображаються:

Оформлення бічних панелей

На цьому етапі наші бічні панелі не співпадають за стилем з іншим контентом, оформленим за допомогою таблиці стилів Twenty Fifteen. Якщо ви використовуєте свою тему, у вас може не виникнути подібна проблема або навпаки можуть виникнути інші проблеми щодо оформлення, які потрібно буде виправити.

Для того, щоб позбавитися цієї проблеми в Twenty Fifteen, вам необхідно всього лише додати один рядок CSS. Відкрийте таблицю стилів style.css вашої дочірньої теми та додайте наступний код:

.sidebar-post {
    margin: 0 20%;
}

Збережіть зміни та перегляньте свій сайт ще раз:

Так набагато краще! Тепер усі бічні панелі виводяться у потрібному стилі.

Висновок

Використання кастомного типу постів для ваших бічних панелей може спростити життя людям, які хочуть вносити зміни на сайті, але не мають досвіду в HTML і програмуванні. Використання постів також означає, що вони можуть використовувати редактор записів wordpress, щоб створити нові бічні панелі і вивести їх на сайті.

За бажанням, використовуючи цю техніку, ви можете додавати додаткові елементи в WP_Query. Можливо, ви також могли б створити класифікацію для постів на бічній панелі та використовувати її під час виведення. Або ви можете виводити різний контент (наприклад, включаючи або опускаючи заголовок посту або зображення), залежно від класифікації (або краще виводити метадані). Ви також можете додавати аргументи для сортування постів за допомогою меню_замовлення та використовувати це при реєстрації постів.

Джерело: code.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/