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

Мы уже рассмотрели ряд этапов, через которые нужно пройти, чтобы создать тему WordPress из статического файла HTML.

В частности, мы уже охватили следующие темы:

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

Ваша тема уже должна содержать файл шаблона для отображения страниц архивов, но на данный момент изображения в ней еще не отображаются так, как нужно.

В этой статье я расскажу, как установить для вашей темы поддержку характерных изображений и как отображать и оформлять их в шаблоне архива.

Что вам потребуется:

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

О характерных изображениях

Характерные изображения, или миниатюры записей - это действительно полезная функция WordPress, которая появилась, начиная с версии 2.9.

Терминология, которая используется для этой функции, может быть немного запутанной, поэтому я постараюсь пояснить вам некоторые термины:

• Характерные изображения - или миниатюры записей - это одиночное изображение, назначаемое записи через пункт «Характерное изображение» панели редактирования страницы. При работе с характерными изображениями в коде обычно используется термин "featured image" (например, при добавлении поддержки характерных изображений к теме) или "thumbnail" (например, при отображении их в файлах шаблонов). Тем не менее, это одно и то же;
• Термин «миниатюра» также используется для размеров изображения. Таким образом, вы можете вывести любое изображение, которое вы загружаете в WordPress, в размере «миниатюра». Это относится ко всем изображениям, а не только к характерным. Таким образом, вы можете выводить миниатюру сообщения в ее миниатюрном, среднем, большом или оригинальном размере.

Все немного запутанно, тем не менее, если вы используете корректный код, проблем возникнуть не должно.

1. Устанавливаем в теме поддержку характерных изображений

Первым этапом является добавление поддержки характерных изображений - без этого вы не будете иметь доступа к разделу «Характерное изображение» панели редактирования сообщения.

Откройте файл functions.php вашей темы и добавьте следующий код перед закрытием тега ?>:

function wptutsplus_theme_support() {
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'wptutsplus_theme_support' );

Сохраните файл функций и откройте панель редактирования одного из ваших сообщений. Как показано на скриншоте ниже, вы должны увидеть, что в ней появилась кнопка «Характерное изображение»:

Теперь функция поддержки характерных изображений для каждой записи подключена. Вам не нужно вручную указывать размер миниатюры - это делается через код.

2. Добавляем характерные изображения в шаблон архивов

Следующим шагом является добавление кода для отображения характерных изображений на страницах архивов. Вы можете сделать это внутри цикла.

Откройте файл archive.php и найдите следующую строку:

<img class="size-thumbnail" alt="" src="images/featured-image.jpg" />

Замените ее следующим кодом:

<?php if ( has_post_thumbnail() ) { ?>
    <a href="<?php the_permalink(); ?>">
    <?php the_post_thumbnail( 'medium', array( 'class' => 'left',
            'alt'   => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) )
        ) ); ?>
    </a>
<?php } ?>

Этот код выполняет следующее:

• Код проверяет, присвоено ли сообщению характерное изображение, используя if ( has_post_thumbnail() ). Если нет, то характерное изображение отображаться не будет;
• Далее, он помещает код изображения в ссылку на запись, чтобы посетители могли нажать и на изображение, и на заголовок поста, если они хотят прочитать запись полностью;
• И, наконец, он отображает характерное изображение, используя the_post_thumbnail(). Параметр 'medium' используется, чтобы указать WordPress, что изображение выводится в среднем размере, массив аргументов, включая класс стиля и аргумент 'alt' используется, чтобы задать атрибуты изображения.

Сохраните файл архивов и зайдите на одну из страниц архивов вашего сайта (не главную страницу блога, а в архив категории или другой аналогичный).

Вот как выглядит теперь моя страница архива:

Ее стили нужно еще немного подправить, потому что изображения «слипаются». Откройте файл style.css и добавьте в него следующий код:

.archive #content article,
.blog #content article {
    margin-top: 10px;
    overflow: auto;
}

Обратите внимание, что с помощью классов .archive и .blog я позиционирую тег <body> на главной странице блога и на любой странице архива.

Теперь записи в архиве выводятся более аккуратно:

3. Добавляем характерные изображения в индексный файл

Теперь у вас есть рабочий шаблон архива с поддержкой характерных изображений. Однако перед тем как закончить, нам нужно скопировать тот же код и в файл index.php.

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

На ней тоже теперь будут отображаться характерные изображения для каждой записи.

Заключение

Характерные изображения являются отличным способом, чтобы сделать страницы архивов более наглядными и удобными для пользователей. Вы также можете добавить характерные изображения в другие шаблоны, например, page.php.

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

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

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