Статьи

Создание темы WordPress из статического HTML: создание шаблона архива

Январь 25, 2019

Если вы проходили этот цикл, у вас есть работающая тема с двумя шаблонами страниц.

Шаги, которые я продемонстрировал к этому моменту:

  • готовим разметку для WordPress
  • преобразование HTML в PHP и разбиение файла на файлы шаблонов
  • редактирование таблицы стилей и загрузка вашей темы в WordPress
  • добавив цикл в ваш индексный файл
  • добавление мета-тегов, хука wp_head заголовка и описания сайта в ваш заголовочный файл
  • добавление меню навигации
  • добавление областей виджетов в заголовок и боковую панель
  • добавление областей виджетов, колофона и хука wp_footer в файл wp_footer колонтитула
  • создание файлов шаблонов для статических страниц.

В этой части я покажу вам, как создать другой файл шаблона — файл archive.php . Этот файл используется WordPress для показа архивов категорий, тегов или любого другого типа заархивированного контента.

Единственный список сообщений, для которого он не используется, — это главная страница блога, в которой перечислены последние сообщения блога, использующие front-page.php или index.php .

Что вам нужно

  • ваш редактор кода по вашему выбору
  • браузер для тестирования вашей работы
  • установка WordPress, локальная или удаленная
  • Если вы работаете локально, вам понадобится MAMP, WAMP или LAMP, чтобы запустить WordPress.
  • Если вы работаете удаленно, вам понадобится FTP-доступ к вашему сайту и учетная запись администратора в вашей установке WordPress.

1. Создание архивного шаблона

Начните с создания пустого файла в папке вашей темы и присвоения ему имени archive.php . Добавьте к нему следующее, так же, как вы сделали для шаблона страницы:

1
2
3
4
<?php /* the archive file — for displaying archives */ get_header();
<div class=»two-thirds» id=»content»></div><!— #content—>
<?php get_sidebar();
<?php get_footer();

Это устанавливает основу вашего файла шаблона, с включенными заголовком, боковой #content и нижним колонтитулом, а также с #content div #content .

2. Отображение заголовка страницы

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

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

Внутри #content div добавьте следующее:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<?php
/* Queue the first post, that way we know if this is a date archive so we can display the correct title.
 * We reset this later so we can run the loop properly with a call to rewind_posts().
 */
if ( have_posts() )
  the_post();
  <h2 class=»page-title»>
    <?php if ( is_day() ) { ?>
      Archive for <?php echo get_the_date();
    <?php } elseif ( is_month() ) { ?—>
      Archive for <!—?php echo get_the_date(‘F Y’);
    <?php } elseif ( is_year() ) { ?—>
      Archive for <!—?php echo get_the_date(‘Y’);
    <?php } else { ?—>
      <?php echo get_queried_object()->name;
    <?php } ?>
  </h2>
  <?php rewind_posts();

Он проверяет, для какого архива хранится день, месяц или год, и, если это так, отображает дату соответствующим образом (подробнее об отображении дат см. Страницу Кодекса в get_the_date() ).

Если это не архив дат, WordPress использует get_queried_object() для определения категории, тега, таксономии или типа записи, которые в данный момент запрашиваются, и отображения этого. Обратите внимание, что за этим должно следовать ->name иначе ничего не будет отображаться.

2. Запустите цикл

Цикл на этой странице архива будет аналогичен циклу в index.php, но с другой структурой, позволяющей отображать избранные изображения рядом с текстом, и с использованием the_excerpt() вместо the_content() для отображения выдержка из каждого сообщения вместо его полного содержания.

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

Начните с создания основного цикла. Ниже кода, который вы добавили для заголовка, добавьте этот код:

1
2
3
4
<?php // start the loop proper ?>
<?php while ( have_posts() ) : the_post();
  <article id=»post-<?php the_ID(); ?>»>></article><!— #post-theID—>
<?php endwhile;

Это запускает цикл, но пока не выводит никакого контента из каждого поста.

3. Добавьте рекомендуемое изображение

Первым элементом в цикле является рекомендуемое изображение. Я собираюсь поместить это в элемент <section> который я буду перемещать влево, используя OOCSS в моей теме — вам может понадобиться добавить свой собственный CSS.

Внутри отверстия

добавить тег:

1
2
3
4
</pre>
<section class=»left image quarter»>
  <img class=»size-thumbnail» alt=»» src=»images/featured-image.jpg» />
</section><!— .image —>

Это выберет показанное изображение и отобразит его, используя размер миниатюры.

4. Добавьте выдержку

Отрывок также перемещается влево, но используя OOCSS, я даю ему ширину в три четверти, чтобы он плавал справа от изображения.

Под кодом рекомендуемого изображения добавьте следующее:

01
02
03
04
05
06
07
08
09
10
</pre>
<section class=»left archive-content three-quarters»>
  <h3 class=»entry-title»>
    <a title=»<?php printf( esc_attr__( ‘Permalink to %s’, ‘compass’ ), the_title_attribute( ‘echo=0’ ) ); ?>» href=»<?php the_permalink(); ?>» rel=»bookmark»>
      <?php the_title();
    </a>
  </h3>
  <section class=»entry-content»><?php the_excerpt();
</section>
<!— .archive-content —>

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

Теперь сохраните ваш архив и просмотрите страницу архива. Я создал категорию под названием «Архив» и просматриваю ее на снимке экрана ниже:

создание-WordPress-тема-из-статики-HTML-архив-шаблон

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

Резюме

Архивные шаблоны полезны для отображения архивов вашего контента так, как вы хотите. В дополнение к простому файлу archive.php вы можете создавать сделанные на заказ архивные шаблоны для архивов определенных категорий, тегов, типов записей или таксономий. См. Страницу Кодекса в Иерархии Шаблонов для деталей о том, как они работают.

Ресурсы

32
Share: