Произвольные типы записей для бокового меню

СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ | ПОСМОТРЕТЬ Просмотр

Над чем сегодня работаем:

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

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

Эту проблему можно обойти, заменив поле ввода для виджета в боковой панели на произвольный тип записи(custom post type), и задействовав WP_Query для выведения записей данного типа.

Это можно без труда сделать в два этапа:

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

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

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

  • рабочая платформа на WordPress;
  • редактор для кода.

Ради подстраховки, мы создаем дочернюю тему оформления для Twenty Fifteen, но вы можете добавлять программный код напрямую в текущий шаблон. Также можно без труда воспользоваться специальным плагином, который поможет вам зарегистрировать новый тип записи и создать возможность, а далее добавить ее в файл 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 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:   http://rachelmccollin.co.uk/Template:       twentyfifteenVersion:        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() ) { ?>        <?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() для сброса запроса.

Сейчас файл functions.php необходимо сохранить.

Добавляем возможность в файл боковой панели

Функцию, которую мы только что создали, пока ещё не привязана к 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 );

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

Сейчас в моем меню «Виджеты» в консоли вообще нет никаких областей для виджетов:

Произвольные типы записей для бокового меню

Стилизуем боковые панели

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

Чтобы устранить проблему при работе с Twenty Fifteen , необходимо просто добавить одну строку кода CSS . Откройте файл стилей дочерней темы, и добавьте туда следующий код:

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

Сохраните файл стилей, и снова взгляните на результат:

Произвольные типы записей для бокового меню
Сейчас боковые панели выводятся корректно.

В завершение

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

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

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

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