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

Иногда случается, что вам нужно разместить на главной странице вашего сайта красивый наглядный баннер — например, что-то вроде анонса и / или сниппета, которые были бы не такие большие по размеру, как целая запись, или же что-то вроде ссылки на новый контент вашего сайта.

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

Это можно сделать несколькими способами. Самый простой — это использовать виджет, который вы можете добавить, зарегистрировав область виджетов в соответствующем месте в файлах шаблонов вашей темы.

Но подход, который мне нравится больше, который дает вам больше возможностей — это создать запись пользовательского типа под названием «banner» и использовать ее для отображения одного или нескольких баннеров.

Вы даже можете использовать ее для отображения определенной категории баннеров, отбираемых из всех имеющихся у вас. Если у вас есть несколько баннеров, но вы хотите особо выделить один из них:

баннер главной страницы

В этой статье…

  • Я покажу вам, как зарегистрировать запись пользовательского типа для баннеров;
  • Я покажу вам, как создать функцию для отображения баннеров в файле функций вашей темы;
  • Я покажу вам, как добавить указанную функцию в файл заголовка вашей темы, так чтобы она работала только на главной странице;
  • Наконец, я покажу вам, как задавать стили баннеров.

Что вам потребуется?

Для выполнения заданий этой статьи вам потребуется:

  • Установленная и настроенная система WordPress;
  • Доступ к файлам шаблонов вашей темы.

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

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

В этом случае, если вы смените тему вашего сайта, вы не потеряете результаты проделанной ранее работы. Здесь я буду использовать элементы так, чтобы весь код находился в одном месте, и вы могли его загрузить.

Регистрация типа записи «Баннер»

Первым шагом является регистрация нового типа записи. Создайте новый файл functions.php для вашей темы или добавьте следующий код в существующий файл функций:

// регистрация пользовательского типа записи 'banner'
function wptutsplus_create_post_type() {
    $labels = array(
        'name' => __( 'Banners' ),
        'singular_name' => __( 'banner' ),
        'add_new' => __( 'New banner' ),
        'add_new_item' => __( 'Add New banner' ),
        'edit_item' => __( 'Edit banner' ),
        'new_item' => __( 'New banner' ),
        'view_item' => __( 'View banner' ),
        'search_items' => __( 'Search banners' ),
        'not_found' =>  __( 'No banners Found' ),
        'not_found_in_trash' => __( 'No banners found in Trash' ),
    );
    $args = array(
        'labels' => $labels,
        'has_archive' => true,
        'public' => true,
        'hierarchical' => false,
        'supports' => array(
            'title',
            'editor',
            'excerpt',
            'custom-fields',
            'thumbnail',
            'page-attributes'
        ),
        'taxonomies' => array( 'post_tag', 'category'),
    );
    register_post_type( 'banner', $args );
}
add_action( 'init', 'wptutsplus_create_post_type' );

Таким образом, мы создаем новый тип записи под названием ‘banner’. Создав тип записи, создаем новый баннер с помощью панели администрирования WordPress.

Как это показано на скриншоте:

;banner;

Создание функции для вывода баннеров

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

В наш файл functions.php (или в файл плагина, если вы используете этот способ) добавляем следующий код:

// функция для вывода баннера главной страницы с помощью запроса типа записи баннер
function wptutsplus_home_page_banner() {
 
    // начало формирования запроса
    $query = new WP_Query( array(
        'post_type' => 'banner',
    ));
 
    // проверка, существуют ли посты по запросу, и если так, тогда посты выводятся в блоке banner-box
    if ( $query->have_posts() ) { ?>
        <div class="banner-box">
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
            <div id="post-<?php the_ID(); ?>" <?php post_class( 'banner' ); ?>><?php the_content(); ?></div>
            <?php endwhile; ?>
        </div>
    <?php }
    wp_reset_postdata();
 
}

Таким образом, мы выполняем запрос типа записи «Баннер», а затем выводим содержимое каждого баннера, если найдены записи, удовлетворяющие запросу. Обратите внимание, что я вывожу только контент, а не заголовок.

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

Добавление функции в файл шаблона

На текущий момент вы еще не можете отображать баннеры в любом месте вашего сайта — вам необходимо добавить только что созданную функцию в файл шаблона.

Я добавлю функцию в файл header.php, но вы можете вставить ее в любом месте по своему выбору. Например, в футер или сайдбар, в файл page.php или в специальный файл front-page.php.

Поскольку я хочу, чтобы баннеры отображались только на главной странице сайта, я заключаю свою функцию в тег условия is_home_page() ). Он будет проверять установлена ли на вашем сайте в качестве главной страница блога или статическая страница.

В файл header.php я добавляю следующий код сразу после открывающегося тега <div id="main">.

Так как я работаю со своей собственной дочерней темой, я создала в моей теме новый файл header.php, который является полным аналогом файла заголовка родительской темы за исключением этого нового кода:

<?php if ( is_front_page() ) {
    wptutsplus_home_page_banner();
}
?>

Баннер, который я создала раньше, теперь отображается на моей главной странице:

Баннер

Стили баннера

На данный момент мой баннер выглядит не слишком привлекательно или броско. Я собираюсь изменить его с помощью стилей.

В таблицу стилей вашей темы добавляем следующий код:

.home .banner-box {
    text-align: center;
    color: red;
    font-size: 1.2em;
    border: 1px solid red;
    padding: 1em;
}

Это позволит вставить баннер в темно красную большую рамку, не слишком жирную, но достаточную, чтобы она привлекала внимание!

красная большая рамка

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

Я создам другой баннер и назначу ему категорию ‘highlight’, затем я добавлю в таблицу стилей некоторые стили для этой категории:

.home .banner-box .category-highlight {
    background: red;
    color: #fff;
    margin: 0;
    padding: 0.5em;
}

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

выделенный баннер

Он не выглядит слишком аккуратным или привлекательным, но это показывает, как вы можете достичь определенного эффекта.

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

Заключение

Баннеры на главной странице могут быть полезным инструментом для отображения временных сообщений или привлечения трафика к другим разделам вашего сайта.

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

Перевод статьи «Using a Custom Post Type to Create a Home Page Banner» был подготовлен дружной командой проекта Сайтостроение от А до Я.