Это четвертый пост из серии о том, как создать собственную тему для блога. Из него вы узнаете, как добавить к теме поддержку миниатюр изображений, и сделать вывод миниатюр на главной странице блога.
Предыдущие посты из серии можно найти по метке: создание темы из верстки.
Что такое миниатюры изображений?
Миниатюры изображений для записей используются во всех современных темах для WordPress. Миниатюра – это изображение, которое можно назначить для каждой записи, и которое будет выводиться в шаблоне рядом с текстом.
Раньше они были достаточно маленькие по размеру, от чего и произошло название “миниатюра”, или, по-английски, thumbnail. Но сейчас в темах могут использоваться и очень большие миниатюры, которые могут быть размером как ширина страницы. Например, в шаблоне Striped, из которого мы делаем тему, миниатюры представляют собой полноформатные изображения.
Но наша тема пока не поддерживает вывод миниатюр. Давайте это исправим.
Поддержка миниатюр в functions.php
Для того, чтобы добавить к теме поддержку миниатюр, необходимо будет внести изменения в файл functions.php. Поэтому сначала создадим этот файл, а затем добавим в него функцию для поддержки миниатюр:
|
1 2 3 4 5 |
<?php if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); } ?> |
Теперь вы можете зайти в консоль, нажать “Добавить новую запись” и задать миниатюру для одной или нескольких записей.
Если вы хотите изменить размер миниатюр, то функцию нужно дополнить еще одной строкой:
|
1 2 3 4 5 6 |
<?php if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); add_image_size( 'full-thumbnail', 650, 250, true ); // название, ширина, высота, жесткая обрезка } ?> |
В этом примере я добавляю собственный размер изображений, который будет называться full-thumbnail, и будет иметь размеры 650х250 пикселей.
Вывод миниатюр в блоге
Наш следующий шаг – сделать так, чтобы миниатюры были видны на страницах блога.
Сначала, давайте заменим вывод картинки-заглушки на код вывода миниатюр. Для этого в файле index.php, найдите строку
|
1 |
<img class="thumbnail" src="http://placehold.it/650x250"> |
и замените ее на функцию, которая будет выводить миниатюры:
|
1 2 3 |
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'full-thumbnail', array( 'class' => 'thumbnail' ) ); } ?> |
Сначала мы проверяем, присвоена ли записи миниатюра, и затем, если присвоена, выводим ее. В параметрах функции передаются два значения: первое – размер миниатюры, я указала full-thumbnail, это то название размера изображений, которое мы настроили в файле функций. Второе значение – массив, в котором мы назначили для миниатюры класс.
Миниатюры как ссылки на пост
Еще немного дополним наш код, и сделаем так, чтобы миниатюра записи была ссылкой на саму запись:
|
1 2 3 |
<a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail( 'full-thumbnail', array( 'class' => 'thumbnail' ) ); ?> </a> |
Как и в предыдущем уроке, мы добавили the_permalink(), функцию, которая выводит ссылку на текущий пост.
Итоги
Следуя этому уроку, мы добавили к нашей теме поддержку миниатюр, а затем сделали вывод миниатюр в шаблоне. Чтобы не пропустить следующий урок, подписывайтесь на RSS блога, или присоединяйтесь в фейсбуке!
11 комментариев к “Как создать тему для WordPress. Часть 4: миниатюры постов”
Webliberty
У меня раньше на главной странице не было миниатюр, выводилось полноформатное изображение, также как и в полной записи. Страница получалась слишком длинной. Сделал миниатюры, но не с помощью предложенной функции, а как-то по другому… Решение нашел на одном из блогов.
В итоге за основу миниатюры берется первая картинка из статьи и сжимается до указанных размеров. Решение конечно не ахти какое, нужно бы найти время и переделать на нормальное.
Ирина
Ну да, можно и так 🙂 Но тогда нужно будет обязательно вставлять изображение в саму запись. А если делать через
the_post_thumbnail(), то можно сделать миниатюру уникальной картинкой, которая в самой записи использоваться не будет.Алла
Спасибо. На вас у меня последняя надежда. Я новичок. У меня в index.php нет и еще код
куда-то нужно вставлять?
Я правильно поняла, что миниатюра в самой статье выводится не должна?
Спасибо. Извините за глупые вопросы)
Алла
коды почему-то в комментарии не прошли(
Ирина
Алла, коды не прошли, потому что вордпресс запрещает их отправку через формы.
В этом посте рассказыватеся только про то, как добавить миниатюры на главную страницу, но, действуя по аналогии, Вы можете добавить их и к страницам записей.
О том, как создать шаблон для страницы отдельной записи, читайте в части 8: https://oriolo.ru/create-theme-from-html-8/
Medved
Отличная статья. Без воды и все по делу. По данному гайду верстал свой первый шаблон. Ирина огромное спасибо за ваши подробные уроки!
Лео
Я чего-то картинку с роботом не нашел и код с миниатюрами пока неясно куда вставлятть.
Ирина
Я сейчас занимаюсь переписыванием серии статей с использованием болеее простой темы, чтобы было понятнее и нагляднее.
Ukraine
Ирина, вопрос – файл functions.php нужно каким-нибудь образом где-то подключать, наподобие того, как мы в подключаем стили и скрипты или все эти функции functions.php, которые мы прописываем в functions.php сами подхватываются?
Александр
Куда делась проверка наличия миниатюры записи в последнем коде?
Евгений
Ирина, спасибо за Ваши уроки.
Очень помогают