Создаем свой сайдбар на WordPress с помощью кастомных типов записей

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

Тем не менее, если покупатели будут редактировать боковую панель, не будучи знакомы с HTML, это без труда приведет к неполадкам, особенно если мы при работе использовали изображения или ссылки.

Смотрите также:

  • Руководство по кастомным типам записей WordPress
  • Custom Post Types: пользовательские таксономии, фильтры и архивы в WordPress
  • Как использовать кастомные поля ввода для создания мета-блоков с обзорами
  • Добавляем баннеры на веб-сайте при помощи произвольных типов записей WordPress
  • SuperCPT: запросто создаем ваши типы записей, таксономию и мета-блоки в WordPress

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

Результатом нашей работы будет что-то вроде этого:

Создаем сайдбар на WordPress при помощи кастомных типов записей

Скачать исходники

Вы сможете без труда сделать это в два шага:

  1. Зарегистрируйте кастомный тип записей для боковых панелей.
  2. Создаете возможность вывода содержимого на боковые панели и добавьте ее в файл sidebar.php в теме.

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

Что вам понадобится

Для выполнения данного урока вам понадобится:

  • Установленный WordPress с доступом в консоль
  • Редактор кода

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

Создание дочерней темы

Если вы работаете над темой, то можете пропустить эту часть, но если вы все начинаете с нуля, то самым простым методом разобраться в данной технике будет создание дочерней темы. Мы создадим дочернюю темы из темы Twenty Fifteen.

В папке темы wp-content создайте новую папку. Нашу мы назвали 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 ContentTheme 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 McCollinAuthor URI:     Template:       twentyfifteenVersion:        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(), когда мы позже будем создавать цикл.

Сейчас, если вы обновите страничку администратора, то на экране увидите кастомный тип поста с названием Sidebars:

Создаем  сайдбар на WordPress при помощи кастомных типов записей

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

Создаем  сайдбар на WordPress при помощи кастомных типов записей

Одна из наших боковых панелей состоит только из картинки. Это специально, так как в дальнейшем мы создадим цикл, который будет отображать данные картинки.

Создание возможности для вывода боковой панели

В данный момент боковые панели не будет выводиться на веб-сайте, так как вы не добавили их в тему. Так что следующим шагом будет написание возможности, которая будет использовать 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 с названием поста
  • Проверяет, есть ли в посте картинки и если да, то отображает их
  • Отображает содержимое поста, который находится внутри элемента section
  • Закрывает элемент 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(); ?>

После этого можем посмотреть на наш веб-сайт, на котором боковые панели будут выведены:

Создаем  сайдбар на WordPress при помощи кастомных типов записей

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

Отмена регистрации области виджетов

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

Если вы работаете со вашей темой, то все, что вам необходимо — это удалить программный код, который зарегистрировал данные виджеты (или для начала, просто не добавлять никакие виджеты). Если вы используете дочернюю тему, вы не можете настроить родительскую, так что небходимо использовать возможность unregister_sidebar() для удаления области виджетов с боковой панели.

Добавите в файл functions.php дочерней темы следующее:

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

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

Сейчас в окне администратора виджеты не выводятся:

Создаем  сайдбар на WordPress при помощи кастомных типов записей

Оформление боковых панелей

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

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

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

Сохраните изменения и посмотрите веб-сайт ещё раз:

Создаем  сайдбар на WordPress при помощи кастомных типов записей

Так гораздо лучше! Сейчас все боковые панели отображаются в нужном стиле.

Заключение

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

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

Источник: code.tutsplus.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *