На многих сайтах материал делиться на категории и когда мы в них заходим, то видим не только заголовок и текст, но и миниатюру записи (на английском thumbnail). Примером может служить мой сайт:

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

Для работ sc миниатюрами их необходимо сначала включить в CMS. Для того чтобы включить миниатюры в WordPress необходимо добавить специальный код в файл functions.php.

Файла functions.php у нас еще нет, он используется для написания php функций и запуска встроенного функционала в CMS. Давайте создадим файл functions.php в нашей теме my_theme_tmp.

В файле functions.php наберите код:

Этот код включит поддержку миниатюр в CMS, без него у вас в панели управления просто не будет возможности добавлять миниатюру. После добавления кода в файл functions.php заходите в админку и начинайте создание новой записи, справа у вас появился метабокс «Миниатюра записи» (Featured Image).

В WordPress есть стандартный размер миниатюры, который в случаи необходимости можно изменить, добавив специальный код:

add_theme_support( ‘post-thumbnails’ );

В полный код файла functions.php будет выглядеть вот так:

После того как настройки все сделаны можно переходить к работе с выводом миниатюры в цикле файла archive.php.

Вывод миниатюры записи в WordPress

Для вывода картинки записи необходимо вставить специальный код рядом с текстом записи в шаблоне archive.php.

На картинке показано место, куда вставлять код:

В код я добавил класс thumb, он будет нам необходим, чтобы выровнять миниатюру слева от текста, а не над ним.

Заходим по адресу /wp-content/themes/my_theme_tmp/css/style.css и добавляем стиль:

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

Для того чтобы все стало на свои места мы можем добавить очистку выравнивания в нужное место. Самый простой способ через тег <br clear=»all» />.

После доработки кода у вас должно получиться так:

Функции которые использовались в этом уроке:

the_permalink() — ссылка на полную запись. Пока у нас не работает, так как нужна доработка шаблона.

if ( has_post_thumbnail() ) { — конструкция проверяет есть ли миниатюра у записи. Функция has_post_thumbnail() проверяет наличие миниатюры и возвращает true если миниатюра есть.

the_post_thumbnail() — выводит миниатюру для записи стандартного размера или того размера который мы указали в файле functions.php ( set_post_thumbnail_size( 200, 200, true ) ).

function_exists( ‘add_theme_support’ ) — проверяет была ли запущена функция в коде выше в данном случаи функция add_theme_support.

add_theme_support( ‘post-thumbnails’ ) — добавляет в тему возможность работать в миниатюрами.

set_post_thumbnail_size( 200, 200, true ) — указывает размер миниатюры для записи.

На этом все. Скачивайте мои исходники, разбирайтесь в моем коде и делайте также у себя.

 

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

/* */