Іноді на головній сторінці не перешкодить банер, в якому можна розмістити оголошення або рекламу. При цьому не завжди є можливість використовувати сніпети або віджети для прикріплення такого банера, щоб відредагувати матеріали або додати новий контент.
Є кілька способів здійснення такої операції. Найпростіший спосіб використовувати віджет і прикріпити його до конкретного розташування на сторінці. Але спосіб, який ми обговоримо в цьому пості, передбачає велику гнучкість рішень та можливостей для відображення не лише одного, а кількох банерів одразу.
Дивіться також:
Отже, у цьому практичному посібнику ми розглянемо:
- як зареєструвати тип публікацій для ваших банерів
- як створити спеціальну функцію для відображення банерів на сторінці
- як додати згадану функцію до великої частини файлу теми так, щоб банер з'являвся лише на головній сторінці
- і нарешті – як оформити банер.
Що вам знадобиться
Для завершення цього практичного посібника вам знадобиться:
- доступ адміністратора до сайту wordpress
- доступ до файлів теми оформлення.
Наприклад, ми створимо дочірню тему на основі теми оформлення. TwentyTwelve, але можна використовувати і код власної теми для згаданих вище цілей.
Як альтернативне рішення можна написати плагін для реєстрації типу постів, що налаштовується, і прикріплення до нього нової функції. З цим способом у разі змін у темі сайту ви не втратите результатів своєї роботи. І як це все відбувається.
Реєструємо тип постів для банера
На першому етапі ми реєструємо новий тип постів. Створюємо файл functions.php для вашої теми або додаємо наступний код до існуючого файлу функцій:
// register a custom post type called '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' );Так з'являється новий тип постів під назвою 'банер'.
Створивши новий тип постів, створюємо новий банер на панелі адміністратора WordPress. Виглядатиме це приблизно так:
Створюємо функцію для відображення банерів
На цьому етапі треба створити функцію за допомогою WP_Query для відображення банерів. Потім цю функцію ви додасте до будь-якої частини теми, де захочете відображати банери.
Код потрібно додати до файлу functions.php (або файл створеного вами плагіна):
// function to show home page banner using query of banner post type
function wptutsplus_home_page_banner() {
// start by setting up the query
$query = new WP_Query( array(
'post_type' => 'banner',
));
// now check if the query has posts and if so, output their content in a banner-box div
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();
}Так виконується запит банерів, який виводить вміст баннера на сторінці. Врахуйте, що так виводиться сам контент, а чи не його заголовок. Якщо хочете відображати назву банерів, то додайте назва() у створювану функцію.
Додаємо функцію до файлу шаблону
До цього часу навіть готовий банер не відображатиметься на сайті, тому що для цього треба створити функцію та прив'язати її до шаблону. Функцію ми внесемо у файл header.php, але можна на вашу думку внести її і в футер сторінки, додати в page.php або у передня сторінка.php.
Оскільки ми хочемо показувати банери лише на головній сторінці, то використовуємо функції if( 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;
}Ось так ми отримаємо помітний «бокс» для банера:
Аналогічно підсвічуємо усі банери, які нам треба створити та оформити. Ще трохи правок у таблиці стилів на сайті:
.home .banner-box .category-highlight {
background: red;
color: #fff;
margin: 0;
padding: 0.5em;
}І ось оновлений банер з'являється на сайті, тепер він виглядає ще переконливіше:
За замовчуванням банери відображаються в хронологічному порядку, порядок можна змінити, додаючи до запиту аргументи, створені на попередньому етапі нашого практичного посібника.
На закінчення
Банери на домашній сторінці можуть бути корисними для відображення нових повідомлень або реклами, або для перенаправлення трафіку з головної сторінки на цільові розділи сайту. У цьому практичному посібнику ми розібрали, як зробити, закріпити та оформити такий банер незалежно від обраної теми оформлення.
Джерело: code.tutsplus.com
Коментарі до запису: 1
все добре, але маю питання.
як покращити цей хак? щоб:
була можливість створити категорію "300х250" там створити пару банерів і виводити їх рандомно по одному в блок на сайті.