Розбиття шаблону WordPress на частини – підручник 15
На даний момент у нас тема показує зовнішній вигляд шаблону і тепер ми можемо переходити до процесу наповнення та налаштування виведення даних.
Створіть 3 категорії (Верстка, Дизайн, Розробка сайтів), у кожну категорію помістіть по 3 записи. Якщо не знаєте, чим заповнити нові записи, не морочіться, скористайтесь сервісом Lorem Ipsum. Сервіс допомагає генерувати довільний текст. Робіть текст не менше ніж 3 абзацу у кожному записі.
Шаблон аналізу
Для виведення записів ми будемо використовувати шаблон із трьома колонками (threecolumn.html). Цей html файл вже завантажений і давайте змінимо розширення файлу з html на php. Файл потрібно перейменувати на ім'я, яке Wordpress зможе правильно використовувати archive.php.
Файл з ім'ям archive.php система Wordpress використовує для виведення списку статей.
Розділяємо шаблон так само як із нашим файлом index.php у попередніх уроках, розставляємо функції.
<?php get_header(); ?>
<?php get_footer(); ?>
Тому що ми вже робили на попередніх уроках, повторюватися не будемо і підемо далі, для вас це самостійна робота, потім перевіримо.
Необхідно поділити шаблон archive.php.
Для початку створимо 2 файл sidebar-left.php і sidebar-right.php. У файл sidebar-left.php переносимо код із файлу archive.php який я покажу нижче:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<section> <header> <h2>Ipsum Dolor</h2> </header> <p> Vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat. </p> <ul class="link-list"> <li><a href="#">Sed dolore viverra</a></li> <li><a href="#">Ligula non varius</a></li> <li><a href="#">Dis parturient montes</a></li> <li><a href="#">Nascetur ridiculus</a></li> </ul> </section> <section> <header> <h2>Magna Phasellus</h2> </header> <ul class="link-list"> <li><a href="#">Sed dolore viverra</a></li> <li><a href="#">Ligula non varius</a></li> <li><a href="#">Nec sociis natoque</a></li> <li><a href="#">Penatibus et magnis</a></li> <li><a href="#">Dis parturient montes</a></li> <li><a href="#">Nascetur ridiculus</a></li> </ul> </section> |
У файл sidebar-right.php із файлу archive.php переносимо наступний код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<section> <header> <h2>Magna Phasellus</h2> </header> <ul class="link-list"> <li><a href="#">Sed dolore viverra</a></li> <li><a href="#">Ligula non varius</a></li> <li><a href="#">Nec sociis natoque</a></li> <li><a href="#">Penatibus et magnis</a></li> <li><a href="#">Dis parturient montes</a></li> <li><a href="#">Nascetur ridiculus</a></li> </ul> </section> <section> <header> <h2>Ipsum Dolor</h2> </header> <p> Vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat. </p> <ul class="link-list"> <li><a href="#">Sed dolore viverra</a></li> <li><a href="#">Ligula non varius</a></li> <li><a href="#">Dis parturient montes</a></li> <li><a href="#">Nascetur ridiculus</a></li> </ul> </section> |
Після створення двох файлів (sidebar-left.php, sidebar-right.php) та перенесення в них коду, необхідно підключити цей код до файлу archive.php. Підключення виконується за допомогою функції
<?php get_sidebar(«ліворуч»); ?>. У дужках вказується друга частина назви файлу. функція get_sidebar(«ліворуч») підключає файл sidebar-left.php.
Якщо на вашій практиці у чужих шаблонах ви зустрінете функцію get_sidebar(«ліворуч») без атрибутів у дужках get_sidebar(), це означає, що сайдбар був створений у папці шаблону та підключений до стандартного імені (sidebar.php).
При розробці сайтів все потрібно робити поступово та акуратно, а у нас після маніпуляцій шаблон все одно вийшов громіздким, нам необхідно ще трохи відокремити статичні частини шаблону в окремі файли.
Створимо два файли content-top.php і content-bottom.php. Для підключення цих файлів ми будемо використовувати функцію get_template_part() із двома атрибутами get_template_part( «content-top», get_post_format() ). У першому атрибуті ми вказуємо ім'я файлу, який треба підключити, а у другому атрибуті функцію get_post_format() яка повертає формат запису. Другий атрибут опціональний і це означає, що він просто не обов'язковий, якщо надалі ви його використовувати не будете. Докладніше про функцію можна почитати у кодексі wordpress.
Розділіть шаблон index.php також як archive.php за допомогою get_template_part().
Думаю, правильно не викладатиме сюди довгий код, а викласти нижче результат і щоб ви самі розібрали шаблон. Самостійний розбір за отриманими рекомендаціями буде ефективнішим, чим читати довге простирадло інформації. Будуть питання, пишіть у коментарях.
Доробки після поділу шаблону
Для правильного виведення заголовка та дати використовуємо наступний код:
|
1 2 3 4 5 6 7 8 |
<header> <h2 class="entry-title"><a title="<?php echo the_title_attribute( 'echo=0' ); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><br /> <span class="date"> <span class="month"><?php the_time('M'); ?></span> <span class="day"><?php the_time('j'); ?></span> <span class="year"><?php the_time('Y'); ?></span> </span> </header> |
Разберем код шаблона по порядку:
the_title_attribute() – виведення заголовка запису для атрибуту title.
the_permalink() - Виводить посилання на запис, поки що працювати не буде, оскільки шаблон окремого запису ми ще не налаштовували.
the_title() – використовується для виведення заголовка запису.
час() – виводить дату поточного запису. Можна використовувати як у нас у прикладі, чи трохи в іншому вигляді, приклади можна подивитися в офіційне керівництво.
Також у шаблоні archive.php я використав функцію the_excerpt() яка виводить відрізок статті до тега Далі, який можна вставити в записі. Якщо в архіві потрібно виводити не відрізок, а повну статтю, то можна використовувати функцію the_content().
Доповнив шаблон функціями, які стануть у нагоді для стилізації окремих записів шаблону:
post_class() – додаткові класи корисні для розробників тем, ця функція може виводити категорію запису, запис типу. Детальніше розглядатимемо пізніше, якщо нам буде це необхідно. Якщо буде потрібно додати свій клас, то його можна вписати як атрибут функції post_class(‘class-name’).
the_ID() – виводить ID запису у списку всіх записів.
Приклад використання:
|
1 |
<section class="is-post is-post-excerpt" <?php post_class(); ?> id="post-<?php the_ID(); ?>"> |
Файли уроку
На цьому урок закінчую, у наступному поговоримо про те, як вивести мініатюру до запису.
/*
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.
