Делим шаблон 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(‘left’); ?>. В скобках указывается вторая часть названия файла. Функция get_sidebar(‘left’) подключает файл sidebar-left.php.
Если на вашей практике в чужих шаблонах вы встретите функцию get_sidebar(‘left’) без атрибутов в скобках 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() — используется для вывода заголовка записи.
the_time() — выводит дату текущей записи. Можно использовать как у нас в примере или немного в другом виде, примеры можно посмотреть в официальном руководстве.
Также в шаблоне 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.
