» » » Функция the_post_thumbnail() — миниатюра записи в анонсе WordPress
logotip

Функция the_post_thumbnail() — миниатюра записи в анонсе WordPress

Всем привет! Сегодня на seo-mayak.com урок на тему: миниатюра записи в анонсе WordPress. Заодно мы разберем работу функции the_post_thumbnail() и поговорим о размерах миниатюр.

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

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

miniatiura zapisi

Поэтому всем очень советую по возможности вместо плагинов пользоваться функциями WordPress, благо таковые имеются.

Я уже публиковал несколько статей, посвященных использованию миниатюр на популярном блоговом движке, такие как:

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

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

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

Размеры изображений WordPress

В настройках WordPress ( Настройки -> Медиафайлы ) по умолчанию заданны следующие размеры:

Размер миниатюры — 150х150 пикселей;
Средний размер — 300х300 пикселей;
Крупный размер — 640х640 пикселей;
Исходный размер не задается.

Каждому указанному размеру WordPress присваивает обозначение или название, как угодно:

150х150 — thumbnail;
300х300 — medium;
640х640 — large;
Исходный размер — full.

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

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

В данной ситуации есть два решения.

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

Решение №2. Можно обойтись без перезаливки изображений, тем самым забив на рекомендации PageSpeed и изменить размеры в самой функции.

Итак, самое время познакомить Вас с функцией вывода изображений, которая называется the_post_thumbnail().

Функция the_post_thumbnail()

Скажу сразу, функция the_post_thumbnail() — это тег шаблона, который работает только внутри цикла WordPress.

На заметку! Функция the_post_thumbnail() работает на основе get_the_post_thumbnail().

Единственное отличие функции the_post_thumbnail() от get_the_post_thumbnail() в том, что в ней нельзя указать ID записи, в качестве параметра, так как функция всегда берет миниатюру с текущего поста в цикле.

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

Функция the_post_thumbnail() может принимать один или два параметра. Первым параметром всегда идет размер изображения, например:

<?php the_post_thumbnail('medium'); ?>

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

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

<?php the_post_thumbnail(array(50,50)); ?>

Где 50,50 — новые размеры для миниатюры.

Вторым параметром функция может принимать CSS класс, например:

<?php the_post_thumbnail('medium', array('class' => 'miniature')); ?>

В файле style.css, для класса .miniature, можно прописать следующие стили:

.miniature{
    background: #D2D2D2;  /* задний фон */
    border: 1px solid #888888;  /* рамка */
    border-radius: 8px;  /* закругление углов */
    float: left;  /* Выравнивание по левому краю */
    height: 181px;  /* Высота изображения */
    width: 250px;  /* Ширина изображения */
    margin-bottom: 5px;  /* Внешний отступ снизу */
    margin-right: 15px;  /* Внешний отступ справа */
    padding: 5px;  /* Внутренние отступы */ 
}

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

Но прописывать свой CSS класс в функции вовсе не обязательно, так как всем миниатюрам, созданными функцией get_the_post_thumbnail(), WordPress присваивает общий класс .wp-post-image, но кроме того, миниатюры получают отдельный класс, в зависимости от их размера:

.attachment-thumbnail — размер миниатюры;
.attachment-medium — средний размер;
.attachment-large — крупный размер;
.attachment-full — исходный размер.

Итак, с функцией и ее параметрами мы немного разобрались, осталось выяснить, как с помощью the_post_thumbnail() миниатюра записи выводится в анонс.

Как вывести миниатюру в анонс статьи

За анонсы записей в шаблонах WordPress отвечают следующие файлы:

index.php — главная страница
category.php — страницы категорий
archive.php — страницы архивов
tag.php — страницы меток

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

Также, основные файлы могут быть разделены на дополнительные, так сказать, подфайлы. Советую почитать статью — Функция get_template_part(). Структура современных шаблонов WordPress.

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

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

Итак, Внутри цикла ищем строчку с тегами заголовка. У кого-то это может быть тег h1, у кого-то h2, но в большинстве случаев строчка выглядит так:

<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

И ниже этой строчки вставляем следующий код:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_post_thumbnail('medium'); ?></a>

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

Но если кому-то принципиально не хочется чтобы миниатюра была ссылкой, то достаточно будет прописать так:

<?php the_post_thumbnail('medium'); ?>

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

И еще один момент. Если в Вашем шаблоне за обрезание текста отвечает функция the_content(), то тег more должен быть проставлен выше первого изображения в записи, иначе получится так:

miniatiura zapisi2

Вот в принципе и все! Если что-то не понятно, задавайте вопросы в комментариях.

До встречи!

С уважением, Виталий Кириллов

(следующая статья)

Комментарии: 98

  1. Максим:

    Здравствуйте Виталий,у меня проблема:
    http://rghost.ru/56644187
    Как видно на скрине миниатюра выводится и сверху анонса и в самом анонсе,как убрать её сверху,а внутри оставить,подскажите пожалусйта

    Ответить
  2. Максим:

    прошлая проблема решена,появилась новая:
    http://rghost.ru/56644445
    как сделать так чтобы подвинуть текст и заголовок анонса вправо до сайдбара

    Ответить
    • Виталий Кириллов:

      Максим надо в стилях подправить ширину записи.
      Вместо:

      div.col5 {
        width:390px;
      }
      

      Прописать так:

      div.col5 {
        width:630px;
      }
      
      Ответить
  3. артем:

    здравствуйте. валидатор кода ругается на мой сайт в плане того, что для миниатюр не прописан в коде alt (Attribute alt not allowed on element a at this point). Подскажите, пожалуйста, в каком файле может содержаться код для миниатюры записи, в котором надо вставить alt ?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Артем! У всех по разному.

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

      Тут 2 вараинта, или искать где создается миниатюра или выводить миниатюру через функцию wp_get_attachment_image_src. Тогда вы сами сможете управлять альтами.
      Вот тут вроде описано как можно ею сменить альт help-wp.ru/miniatyura-posta-v-wordpress-kak-vyvesti-miniatyuru-kak-zadat-razmer-miniatyury

      Ответить
  4. rukodelie-dom:

    Какая есть возможность вывести картинку через CSS код в комментариях — sv kament?

    Ответить
  5. Лариса:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Лариса! Надо сделать миниатюры к каждой записи, тогда все будет выводиться нормально.

      Ответить
  6. Лариса:

    Виталий, приветствую вас!
    К сожалению добавление миниатюр к каждой записи, ситуацию никак не изменило((((
    Помогите, пожалуйста

    Ответить
    • Виталий Кириллов:

      Лариса, приведите в комментарии содержимое файла, отвечающего за вывод категорий. Обязательно воспользуйтесь преобразователем! Я посмотрю.

      Ответить
  7. Игорь:

    Виталий, добрый день. Поставил код в файл index.php для добавления ссылке к миниатюре. Получилось так (http://prntscr.com/6mhy86), что сверху старой миниатюры вышла новая с ссылкой на пост. Как можно это исправить? Чтобы при создании поста я добавил миниатюру и она уже сама прикрепляла ссылку к посту, не добавляя новой миниатюры. Спасибо.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Игорь! Напишите мне через форму обратной связи. После моего ответа пришлите мне файлы Вашего шаблона, я посмотрю чего вы там напутали)

      Ответить
  8. Максим:

    Большое спасибо за полезную статью!

    Ответить
  9. Ксения:

    Здравствуйте,Виталий.Миниатюру я в анонсе сделала,но нет обтекания текстом.Как можно исправить?

    Ответить
    • Виталий Кириллов:

      Ксения, я к сожалению не могу в рамках комментария дать вам урок по css.
      За обтекание тестом отвечает селектор float. Чтобы текст обтекал картинку слева, стили прописываются так:
      float: left;

      Ответить
  10. danunahren:

    А у меня миниатюры выводятся сверху статьи на странице со статьёй. менял тему то же самое. в чём может быть дело?

    Ответить
    • Виталий Кириллов:

      Мне трудно давать советы в слепую. Возможно Вы не в то место вставляете код вывода миниатюр.

      Ответить
  11. Дмитрий:

    Добрый день, Виталий! Столкнулся с проблемой корректного вывода миниатюры записи: картинка в анонсе, дублируется и в посте. Попытался поменять согласно информации в интернете — теперь нет в посте. Но и в анонсе теперь нет! Не знаю как вернуть картинку в анонс….

    Ответить
  12. Фёдор:

    Добрый день.
    Шаблон сайта поддерживает создание миниатюр, но на странице с записями не выводиться миниатюра к записи.

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Федор, все шаблоны разные, возможно вы не в то место вставляете файл.

      Ответить
      • Фёдор:

        Спасибо, Виталий. Но что предпринять? Где найти это место?

        Ответить
        • Виталий Кириллов:

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

          Ответить
          • Фёдор:

            Для вывода записей использую плагин Posts in Page и на странице вывода записей прописываю шорткод и получается вот так planetaznaniybcn.ru/shkolnaya-zhizn/2014-2015-uchebnyj-god/shkolnoe-otdelenie , а хочется , чтобы ещё картинки-миниатюры присутствовали.
            Спасибо.

            Ответить
  13. Алексей:

    подскажите как удалить стандартный класс wp-post-image ?
    вывожу миниатюру для анонса так
    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('medium', array('class' => '')); ?></a>

    Ответить
    • Виталий Кириллов:

      Алексей, так вы задайте свой класс, пропишите его в коде: the_post_thumbnail(‘medium’, array(‘class’ => ‘Свой класс’));

      Ответить
      • Алексей:

        оптимизирую css уменьшаю код очень нужно удалить в одной категории этот класс wp-post-image Есть варианты? или это не реально?

        Ответить
        • Виталий Кириллов:

          К сожалению на данный момент вариантов нет.

          Ответить
  14. Татьяна:

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

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

    Виталий, будьте добры, подскажите пожалуйста, у меня такой вопрос:
    У меня в блоге создается две миниатюры, одна на странице категории, другая в самом анонсе, как убрать миниатюру из анонса, что бы она оставалась на странице категорий?
    С Уважением, Александр!

    Ответить
    • Виталий Кириллов:

      Александр, немного не понял, что значит в самом анонсе? Где расположен этот анонс?

      Ответить
      • Александр:

        Вот взгляните пожалуйста razbormebeli.ru, блог ещё не наполнен, но вы можете найти статью флок в типах мебельных тканей, миниатюра будет и в самой записи и в анонсе. Подскажите как убрать из записи?

        Ответить
        • Виталий Кириллов:

          Александр, тег more должен быть проставлен выше первого изображения в записи, иначе получится такая петрушка.

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

    Виталий, извините, я возможно не правильно пытаюсь донести до вас свою проблему.
    razbormebeli.ru/category/tipy-mebelnyx-tkanej/page/2/ на этой ссылке миниатюра записи меня устраивает, а здесь razbormebeli.ru/2015/09/16/flok/ вы можете видеть две одинаковых картинки одна находиться слева, а другая такая же выше и имеет горизонтальный вид в белой рамке, в самом верху записи, так вот эта картинка которая вверху появляется после создания миниатюры. Мне бы хотелось, чтобы картинка была только в первой ссылке, а во второй её не было. Посмотрите как это выглядит razbormebeli.ru/category/napolniteli-dlya-mebeli/ статья Ватин, когда заходишь в запись картинка которая сделана миниатюрой, занимает много места, это не красиво, она исчезнет только тогда, когда удаляю миниатюру. Надеюсь вы меня поняли. Извините ещё раз.

    Ответить
    • Виталий Кириллов:

      Я то Вас понял, а Вот Вы меня видимо нет. Ответьте мне на вопрос. При написании статьи вы обрезаете текст для анонса с помощью тега more?

      Ответить
      • Александр:

        Нет, я его вообще не трогаю.

        Ответить
    • Виталий Кириллов:

      Какой функцией у Вас выводятся анонсы?

      Ответить
      • Александр:

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

        Ответить
        • Виталий Кириллов:

          Может и есть… Я не пользуюсь плагинами и поэтому не в теме.

          Ответить
          • Александр:

            Я всё уже перепробовал, мне кажется в самой теме, что-то нужно изменить, что-то там прописано, и в этом проблема. Может такое быть?

            Ответить
            • Виталий Кириллов:

              Александр, у нас какой-то непредметный разговор получается. Если нет знаний Вы врятли справитесь самостоятельно. Записывайтесь ко мне на обучение.

              Ответить
              • Александр:

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

                Ответить
                • Виталий Кириллов:

                  Тогда напишите мне через форму обратной связи.

                  Ответить
              • Константин:

                Виталий, добрый день. Действительно как то не все понятно с настройкой миниатюры. Я тоже не профессионал. Прочитал ваши рекомендации и сделал одну единственную вставку:
                «….Итак, Внутри цикла ищем строчку с тегами заголовка. У кого-то это может быть тег h1, у кого-то h2, но в большинстве случаев строчка выглядит так:
                1
                <span class="hidden-link" data-link="» rel=»bookmark»>
                И ниже этой строчки вставляем следующий код:
                view sourceprint?
                1
                <span class="hidden-link" data-link="» title=»» rel=»bookmark»>…..»
                После этого миниатюры стало две. одна ссылкой (как вы и говорили), а вторая по умолчанию.Причем, убирая миниатюру со страницы записей, пропадают обе.
                Не могли бы вы подробнее ответить как это исправить? в конце статьи вы так поверхностно упомянули об этом, что ничего не понятно. Или это специально, чтобы к вам на обучение запись пополнить?)

                Ответить
                • Виталий Кириллов:

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

                  Ответить
                • Виталий Кириллов:

                  Константин, воспользуйтесь преобразователем и вставьте код файла прямо в комментарий (код публиковать не буду), я посмотрю, что там не так.

                  Ответить
  17. Jake:

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

    Ответить
    • Виталий Кириллов:

      Просто надо убрать из файла single.php или из прикрепленных к нему файлов код вывода миниатюры.

      Ответить
      • L:

        «Просто надо убрать из файла single.php или из прикрепленных к нему файлов код вывода миниатюры.»

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

        Ответить
  18. maloir:

    Здравствуйте знаете что плохого в ваших постах? что вы пишите посты для пользователей которые имеют сайт на wordpress но не для тех кто только в нем разбирается, вот к примеру я 3 дня назад создал сайт не смотря на то что названия ваших статей полностью отвечают ответу на мои вопросы сделать я ни чего не могу по вашим постам, информации для «новеньких» полный 0. Очень сожалею что убил на ваш сайт кучу времени… То есть вы не думаете о новичках, а зря…

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

    Спасибо, всё теперь стало отлично!

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

    А у меня такой вопрос. Я, у себя на блоге когда делюсь анонсами в контакте, то картинка со статьи к репосту не загружается, а в остальных соц. сетях картинка грузится. Пробовал задавать миниатюру, тогда картинка с миниатюры грузится, но она намного меньше чем я делаю картинки. И миниатюры не так красиво смотрятся на блоге. Что можете посоветовать в этом случае? Как сделать, чтобы картинки к репосту загружались?

    Ответить
    • Виталий Кириллов:

      Все зависит от скриптов социальных кнопок, к WordPress это не имеет никакого отношения.

      Ответить
  21. Петр:

    Здравствуйте. Я вместо миниатюры в анонс вывожу первую картинку статьи. В файл functions.php добавил вот этот код:

    function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

    return $first_img;
    }

    а в место где выводится анонс вставляю код:

    <img src="<?php echo catch_that_image(); ?>"

    Когда смотрю код вывода картинки в анонсе, у меня отсутствует alt, title, width, height. Подскажите, пожалуйста, как мне их вывести, чтобы они были как на странице записи. Спасибо за ответ. С уважением Пётр.

    Ответить
    • Виталий Кириллов:

      Здравствуйте Петр! Создайте еще 4 копии данной функции и сделайте им уникальные названия. Затем в регулярном выражении вместо src вставьте alt или любой другой тег. Название функций будут содержать нужные Вам данные.
      Если не получится, пишите, приведу пример.

      Ответить
  22. Петр:

    Здравствуйте, Виталий. Я понял принцип реализации данной идеи. Только у меня возникли проблемы с подстановкой нужного кода. Приведите, пожалуйста пример. Спасибо. С уважением Пётр.

    Ответить
    • Виталий Кириллов:

      В файл functions.php вставляем следующее:

      function catch_that_alt() {
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('/<img.+alt=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
      $first_img = $matches [1] [0];
      return $first_img;
      }
      function catch_that_title() {
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('/<img.+title=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
      $first_img = $matches [1] [0];
      return $first_img;
      }
      function catch_that_width() {
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('/<img.+width=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
      $first_img = $matches [1] [0];
      return $first_img;
      }
      function catch_that_height() {
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('/<img.+height=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
      $first_img = $matches [1] [0];
      return $first_img;
      }
      

      Затем там, где выводятся картинка, добавляем теги следующим образом:

      <img src="<?php echo catch_that_image(); ?>" alt="<?php echo catch_that_alt(); ?>" title="<?php echo catch_that_title(); ?>" width="<?php echo catch_that_width(); ?>" height="<?php echo catch_that_height(); ?>"/>
      
      Ответить
  23. Петр:

    Виталий, огромное человеческое Вам спасибо!

    Ответить
  24. Евген:

    добрый день. вопрос: задал миниатюру записи! но при нажатии на «читать далее», открывается миниатюра в полном размере! как сделать так, чтобы ее не было при открытии статьи, но миниатюра записи была!спасибо

    Ответить
  25. Юрий:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Юрий! Чтобы миниатюры не было в теле статьи, надо убрать код вывода миниатюры из файла single.php.

      Ответить
      • Юрий:

        Извините, забыл уточнить: нужно чтобы миниатюра отсутствовала в теле статьи только в нескольких постах (в порядке исключения). Если править файл single.php, то картинка исчезнет со всех опубликованных постов, а это не допустимо. Есть ли какое-то решение данной задачи?

        Ответить
        • Виталий Кириллов:

          Вот функция, которую надо вставить в файл single.php:

          <?php if(!is_single(xxx,xxx)):?>
          <?php the_post_thumbnail('thumbnail'); ?>
          <?php endif ?>

          Где xxx id тех записей, где не надо выводить миниатюру.

          Ответить
  26. Алексей:

    Виталий, здравствуйте. Огромное спасибо Вам за статью. Подскажите, пожалуйста, в какой файл необходимо вставить вот это:

    «Затем там, где выводятся картинка, добавляем теги следующим образом:
    <img src="» alt=»» title=»» width=»» height=»»/>»

    Ответить
  27. Елена:

    Виталий, что-то ни как я не разберусь с миниатюрами(
    У меня есть в функциях вордпресс-добавление миниатюры к записи, но миниатюра, в итоге,выводится и в анонсе, и в теле статьи (в открытом виде).
    Вы писали в ответах, что надо убрать из файла single.php или из прикрепленных к нему файлов код вывода миниатюры. Но , в single.php у меня нет кода вывода миниатюры, а также из прикрепленных ( а в статье у Вас по ссылке это get_template_part) — такой строчки у меня также нет в single.
    В стилях я нашла вот такие строчки про миниатюру:
    }
    .attachment-post-thumbnail {
    display: block;
    float: left;
    height: auto;
    margin: 0 15px 5px 0;
    max-width: 40%;
    width: auto;
    }
    .single #content .attachment-post-thumbnail,
    .page #content .attachment-post-thumbnail {
    clear: both;
    display: block;
    float: none;
    margin: 0 0 20px;
    max-width: 100%;
    padding: 0;

    Может как-то иначе там это прописано? Подскажите пожалуйста.
    Спасибо

    Ответить
    • Виталий Кириллов:

      Приведите в комментарии код файла single.php. Я его публиковать не буду, просто посмотрю.
      Код, что вы привели относится к оформлению и позиционированию миниатюры. От отношение к функционалу не имеет.

      Ответить
      • Елена:

        Здравствуйте,Виталий.
        Вот мой код single
        Спасибо

        Ответить
        • Виталий Кириллов:

          К сожалению код не прошел, воспользуйтесь преобразователем.

          Ответить
          • Елена:

            ЕХ, Виталий, не прошу уроков,но как, подскажите?)

            Ответить
  28. Виктор:

    Здравствуйте, Виталий, выручайте, необходимо поправить в шаблоне код чтобы дополнительные размеры появлялись только у миниатюр, а не у картинок (загруженных медиафайлов к статьям). Имеется такой код в functions.php:
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 223, 137, true );
    add_image_size( 'schema-featured', 680, 350, true ); //featured
    add_image_size( 'schema-related', 211, 150, true ); //related
    add_image_size( 'schema-widgetthumb', 70, 60, true ); //widget
    add_image_size( 'schema-widgetfull', 300, 200, true ); //sidebar full width
    add_image_size( 'schema-slider', 772, 350, true ); //slider

    Ответить
    • Виталий Кириллов:

      Здравствуйте Виктор!
      Так не получится.

      Ответить
  29. Виктор:

    Жаль, спасибо вам что ответили.

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

    Здравствуйте! При создании постов, у меня все миниатюры разных размеров. Хотя в настройках->медиафайлы указан конкретный размер. Как можно исправить?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Александр!
      Чтобы миниатюры были одинакового размера, исходные картинки также должны быть одинаковых размеров, ведь миниатюры создаются в соответствии с пропорциями сторон.
      Можно в настройках->медиафайлы поставить галочку в опции «Обрезать миниатюру точно по размерам (обычно сохраняются пропорции миниатюр)», но это не всегда помогает.

      Ответить
      • Александр:

        Вот именно, Виталий. Галочка стоит, но это не помогает. Получается выход только один — изначально подогнать все фото под единый размер, и потом загружать?

        Ответить
      • Александр:

        Если я в стиле wp-post-image ставлю height:350px — то миниатюры все одинаковые, но становятся то растянутые, то сплюснутые.

        Ответить
        • Виталий Кириллов:

          Я это все проходил, поэтому делаю все исходные картинки, для которых планирую создавать миниатюры, одинаковых размеров.

          Ответить
  31. Пётр:

    Здравствуйте, в коде не силён — миниатюра выводится и сверху анонса и в самом анонсе,как убрать её сверху,а внутри оставить,подскажите пожалусйта. И как прописать чтоб первая картинка в посте автоматически становилась его миниатюрой.

    Ответить
    • KLF:

      Вот почитай тут
      turbo-blog.ru/pervaya-kartinka-v-vide-miniatyury-stati/

      Ответить
  32. Egor:

    Добрый день!
    Версия 4.6.1 не получается вставить, помогите?

    Ответить
  33. Тимур:

    Здравствуйте Виталий. Спасибо за статью. Возник вопрос по анонсам. При нажатии на кнопку «share» в Facebook выводится анонс и с изображением и его размерами все ок, но вот текст из заголовка дублируется в текст анонса. И это выглядит не-очень. Совсем не-очень. Прям не-очень.

    Ответить
    • Виталий Кириллов:

      Здравствуйте! Дайте ссылочку, я гляну исходный код.

      Ответить
    • Виталий Кириллов:

      Тимур, так заголовок не дублируется, так как он выводится в Facebook в единственном экземпляре. Вообще убрать заголовок не получиться.

      Ответить
  34. Aleksey:

    Подскажите как сделать так чтобы миниатюра не была ссылкой на пост.
    а была ссылкой на другой ресурс. и откуда брать эту ссылку куда её можно будет вставлять?
    Может есть уже какой модуль, плагин?

    Ответить
    • Виталий Кириллов:

      Я такого плагина не знаю.

      Ответить
  35. Константин:

    наверное вы это имели ввиду)

    Ответить
    • Виталий Кириллов:

      Обратите внимание на строчку:

      <?php the_post_thumbnail( 'custom-size' ); ?>

      Если Вы читали статью, то функция the_post_thumbnail() по умолчанию не может иметь значение «custom-size», это уже разработчики шаблона постарались.
      Какое изображение Вы хотите вывести: миниатюру, средний или полный размер?
      И еще как выглядит урл миниатюры на Вашем сайте?
      По умолчанию урлы миниатюр должны иметь такую структуру:

      /wp-content/uploads/2017/06/название_изображения-150x111.jpg
      Ответить
  36. Алексей:

    Здравствуйте! Не откажите в помощи! Миниатюры постов на главной вывожу следующим кодом:

    <a data-link="<?php the_permalink() ?>" rel="bookmark"><?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'my-thumb' );
    echo '<img src="' . $thumbnail[0] . '" />'; ?><?php the_title();?></a>

    Подскажите пожалуйста что нужно дописать чтобы в коде страницы у миниатюр отображались ширина и высота?
    И будет ли такая ссылка без таитла полезна для внутренней перелинковки если нет то можно делать таким образом?

    <a data-link="<?php the_permalink() ?>" title="<?php the_title(); rel="bookmark"><?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'my-thumb' );
    echo '<img src="' . $thumbnail[0] . '" />'; ?><?php the_title();?></a>

    Есть сомнения так как используется два раза the_title()

    Ответить
    • Виталий Кириллов:

      Здравствуйте!
      Пропорции прописываются так:

      <a data-link="<?php the_permalink() ?>" rel="bookmark"><?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'my-thumb' );
      echo '<img src="' . $thumbnail[0] . '" alt="" width="150" height="150" />'; ?><?php the_title();?></a>

      Наличие или отсутствие title для ссылки никак не влияет на перелинковку. Здесь по желанию. Если пользователю будет так удобней, то делайте.
      the_title() можно использовать два раза, ничего страшного в этом нет.

      Вот ознакомитесь с комментарием, где я рассказывал как автоматически выводить пропорции картинок.

      Ответить
      • Алексей:

        alt — указывается в админке при загрузке/редактировании медиафайла А есть ли способ выдернуть его и прописать в коде?
        пробую делать так alt="'.get_the_title( ).'"
        но выводятся в alt тайтлы!

        Ответить
        • Виталий Кириллов:

          Я вам ссылку на коммент дал, внимательно его читайте, там все ответы.
          Вот эта функция получает alt первой картинки поста:

          function catch_that_alt() {
          global $post, $posts;
          $first_img = '';
          ob_start();
          ob_end_clean();
          $output = preg_match_all('/<img.+alt=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
          $first_img = $matches [1] [0];
          return $first_img;
          }
          Ответить
          • Алексей:

            коммент по ссылке почитал все испробовал alt выводится пустой

            Ответить
  37. Юрий:

    Здравствуйте. Подскажите пожалуйста, а как можно задать одну (единую) картинку для всех записей, то есть могу ли сделать так, что-бы одна картинка выводилась для всех записей?!
    Думаю, можно просто прописать html картинки в нужном месте в файле, отвечающем за вывод анонсов

    Ответить
  38. Василий:

    Подскажите пожалуйста, как мне получить ширину и высоту прикрепленного к записи изображения? Суть в том, что я хочу сделать на сайте разметку видео записей по schema.org и для этого требуется заполнить соответствующие поля, вот некоторые из них:

    <img itemprop="contentUrl" src=" (здесь будет the_post_thumbnail_url()) ">
    <meta itemprop="width" content=" (А как получить ширину?) ">
    <meta itemprop="height" content=" (И как получить высоту?) ">

    Ответить
  39. sergey:

    yadi.sk/i/jSiN0v_h3WfYya Не работает миниатюры Первый раз с этим сталкиваюсь
    UBUNTU 16.04 VESTACP Помогите пожалуйста

    Ответить
  40. Игорь:

    Ссылки в тег H делать не стоит.

    Ответить
  41. денис:

    Спасибо друг, помог, сделал вывод по размерам)

    Ответить

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

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS