Как создать тему для WordPress. Часть 4: миниатюры постов

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

Урок обновлен 6 сентября 2015 г. Файлы урока вы можете скачать здесь.

Предыдущие посты из серии можно найти по метке: создание темы из верстки.

Что такое миниатюры изображений?

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

Раньше они были достаточно маленькие по размеру, от чего и произошло название “миниатюра”, или, по-английски, thumbnail. Но сейчас в темах могут использоваться и очень большие миниатюры, которые могут быть размером как ширина страницы. Например, в шаблоне Striped, из которого мы делаем тему, миниатюры представляют собой полноформатные изображения.

Striped by HTML5Up

 

Но наша тема пока не поддерживает вывод миниатюр. Давайте это исправим.

Поддержка миниатюр в functions.php

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

Теперь вы можете зайти в консоль, нажать “Добавить новую запись” и задать миниатюру для одной или нескольких записей.

Если вы хотите изменить размер миниатюр, то функцию нужно дополнить еще одной строкой:

В этом примере я добавляю собственный размер изображений, который будет называться full-thumbnail, и будет иметь размеры 650х250 пикселей.

Вывод миниатюр в блоге

Наш следующий шаг – сделать так, чтобы миниатюры были видны на страницах блога.

Сначала, давайте заменим вывод картинки-заглушки на код вывода миниатюр. Для этого в файле index.php, найдите строку

и замените ее на функцию, которая будет выводить миниатюры:

Сначала мы проверяем, присвоена ли записи миниатюра, и затем, если присвоена, выводим ее. В параметрах функции передаются два значения: первое – размер миниатюры, я указала full-thumbnail, это то название размера изображений, которое мы настроили в файле функций. Второе значение – массив, в котором мы назначили для миниатюры класс.

Миниатюры как ссылки на пост

Еще немного дополним наш код, и сделаем так, чтобы миниатюра записи была ссылкой на саму запись:

Как и в предыдущем уроке, мы добавили the_permalink(), функцию, которая выводит ссылку на текущий пост.

Итоги

Следуя этому уроку, мы добавили к нашей теме поддержку миниатюр, а затем сделали вывод миниатюр в шаблоне. Чтобы не пропустить следующий урок, подписывайтесь на RSS блога, или присоединяйтесь в фейсбуке!




11 комментариев к “Как создать тему для WordPress. Часть 4: миниатюры постов”

  1. Webliberty

    У меня раньше на главной странице не было миниатюр, выводилось полноформатное изображение, также как и в полной записи. Страница получалась слишком длинной. Сделал миниатюры, но не с помощью предложенной функции, а как-то по другому… Решение нашел на одном из блогов.

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

    Ответить
    • Ирина

      Ну да, можно и так 🙂 Но тогда нужно будет обязательно вставлять изображение в саму запись. А если делать через the_post_thumbnail(), то можно сделать миниатюру уникальной картинкой, которая в самой записи использоваться не будет.

      Ответить
      • Алла

        Спасибо. На вас у меня последняя надежда. Я новичок. У меня в index.php нет и еще код
        куда-то нужно вставлять?
        Я правильно поняла, что миниатюра в самой статье выводится не должна?
        Спасибо. Извините за глупые вопросы)

        Ответить
        • Алла

          коды почему-то в комментарии не прошли(

          Ответить
        • Ирина

          Алла, коды не прошли, потому что вордпресс запрещает их отправку через формы.
          В этом посте рассказыватеся только про то, как добавить миниатюры на главную страницу, но, действуя по аналогии, Вы можете добавить их и к страницам записей.
          О том, как создать шаблон для страницы отдельной записи, читайте в части 8: https://oriolo.ru/create-theme-from-html-8/

          Ответить
  2. Medved

    Отличная статья. Без воды и все по делу. По данному гайду верстал свой первый шаблон. Ирина огромное спасибо за ваши подробные уроки!

    Ответить
  3. Лео

    Я чего-то картинку с роботом не нашел и код с миниатюрами пока неясно куда вставлятть.

    Ответить
    • Ирина

      Я сейчас занимаюсь переписыванием серии статей с использованием болеее простой темы, чтобы было понятнее и нагляднее.

      Ответить
  4. Ukraine

    Ирина, вопрос – файл functions.php нужно каким-нибудь образом где-то подключать, наподобие того, как мы в подключаем стили и скрипты или все эти функции functions.php, которые мы прописываем в functions.php сами подхватываются?

    Ответить
  5. Александр

    Куда делась проверка наличия миниатюры записи в последнем коде?

    Ответить
  6. Евгений

    Ирина, спасибо за Ваши уроки.
    Очень помогают

    Ответить

Оставить комментарий