Іноді трапляється, що вам потрібно розмістити на головній сторінці вашого сайту красивий наочний банер — наприклад, щось на кшталт анонсу та / або фрагменту, які були б не такі великі за розміром, як ціла запис, або ж щось подібне посилання на новий контент вашого сайту.
Ви ж не хочете редагувати головну сторінку кожен раз, коли додаєте новий розділ. І не хочете вникати в код, щоб розмістити анонс.
Це можна зробити кількома способами. Найпростіший — це використати віджет, який ви можете додати, зареєструвавши область віджетів у відповідному місці у файлах шаблонів вашої теми.
Але підхід, який мені подобається більше, який дає вам більше можливостей — це створити запис типу під назвою «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.
Як це показано на скріншоті:
Створення функції для виводу банерів
Наступний крок полягає в створенні функції з використанням WP_Query, який буде запитувати запис типу банер і відображати всі банери. Потім додаємо цю функцію в тому місці, де ми хочемо виводити банери.
В наш файл functions.php (або у файл плагіна, якщо ви використовуєте цей спосіб) додаємо наступний код:
// функція для виводу банера головної сторінки за допомогою запиту типу запису банер
function wptutsplus_home_page_banner() {
// початок формування запиту
$query = new WP_Query( array(
‘post_type’ => ‘banner’,
));
// перевірка, чи існують посади за запитом, і якщо так, тоді пости виводяться в блоці banner-box
if ( $query->have_posts() ) { ?>
have_posts() ) : $query->the_post(); ?>
Якщо ви хочете включити у ваші банери, заголовки, ви можете зробити це, просто додавши в вашу функцію оператор the_title().
Додавання функції файл шаблона
На поточний момент ви ще не можете показувати банери в будь-якому місці вашого сайту, вам необхідно додати тільки що створену функцію файл шаблона.
Я додам функцію в файл header.php, але ви можете вставити її в будь-якому місці за своїм вибором. Наприклад, в футер або сайдбар, файл page.php або в спеціальний файл front-page.php.
Оскільки я хочу, щоб банери відображалися тільки на головній сторінці сайту, я укладаю свою функцію в тег умови is_home_page() ). Він буде перевіряти чи встановлено на вашому сайті в якості головної сторінка блогу або статична сторінка.
В файл header.php я додаю наступний код відразу після цього тега
.
Так як я працюю зі своєю власною дочірньою темою, я створила в моїй темі новий файл header.php, який є повним аналогом файлу заголовка батьківського теми за винятком цього нового коду:
Банер, який я створила раніше, тепер відображається на моїй головній сторінці:
Стилі банера
На даний момент мій банер виглядає не надто привабливо або помітно. Я збираюся змінити його за допомогою стилів.
У таблицю стилів вашої теми додаємо наступний код:
.home .banner-box {
text-align: center;
color: red;
font-size: 1.2 em;
border: 1px solid red;
padding: 1em;
}
Це дозволить вставити банер в темно велику червону рамку, не надто жирну, але достатню, щоб вона привертала увагу!
Якщо у вас є кілька банерів, і ви хочете, щоб рамкою виділявся лише один з них, ви можете зробити це за допомогою певного стилю.
Я створю інший банер і призначу йому категорію ‘highlight’, потім я додам у таблицю стилів деякі стилі для цієї категорії:
.home .banner-box .category-highlight {
background: red;
color: #fff;
margin: 0;
padding: 0.5 em;
}
Таким чином, виділений банер виходить ще більш помітним:
Він не виглядає занадто акуратним або привабливим, але це показує, як ви можете досягти певного ефекту.
За замовчуванням, банери будуть виводитися у хронологічному порядку за спаданням. Якщо захочете, ви можете змінити цю настройку, додавши аргументи до запиту, створеного на другому етапі.
Висновок
Банери на головній сторінці можуть бути корисним інструментом для відображення тимчасових повідомлень або залучення трафіку до інших розділів вашого сайту.
У цій статті я показала вам, як створити простий банер головної сторінки, застосовуючи користувальницький тип запису. Його можна використовувати в будь-якому місці теми вашого сайту.
Переклад статті «Using a Custom Post Type to Create a Home Page Banner» був підготовлений дружною командою проекту Сайтостроение від А до Я.
