Как на WordPress-сайте в качестве миниатюры вывести первую картинку из записи?

👍 Научим создавать сайты на WordPress бесплатно за 19 уроков. Подробнее →

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

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

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

Способ 1. Плагин Auto Post Thumbnail

Бесплатный плагин Auto Post Thumbnail позволяет генерировать и устанавливать миниатюры из первого добавленного изображения в тексте для постов и страниц, включая записи пользовательских типов. Если первое изображение не найдено, плагин автоматически продолжит поиск до тех пор, пока в итоге миниатюра не будет создана.

Первым делом его нужно установить и активировать. Следует отметить, что плагин Auto Post Thumbnail “умеет” выводить в качестве миниатюры первое добавленное фото не только для новых статей, но также и для старых. Для новых публикаций он делает это в автоматическом режиме. Чтобы это сработало для уже опубликованных записей, необходимо активировать эту опцию. Поэтому нужно перейти в админ-раздел Настройки -> Auto Post Thumbnail и нажать кнопку Generate Thumbnails.

Страница настроек плагина Auto Post Thumbnail

В итоге плагин проверит все публикации и применит к ним свои алгоритмы.

Страница настроек плагина Auto Post Thumbnail

Следует отметить, что плагин не сработает, если в записи вообще не добавлена ни одна картинка.

Способ 2. Вручную

Этот способ предусматривает внесение специального PHP-кода в файл Вашей активной темы functions.php.

Если Вы не знаете, как редактировать functions.php, то в этом случае Вам поможет плагин ProFunctions.

Итак, в самый его конец необходимо добавить следующие строки:

function wpschool_first_post_img() {
    global $post, $posts;
    $first_image = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches );
    $first_image = $matches[1][0];
    if( empty( $first_image ) ){
        $first_image = "/wp-content/themes/НАЗВАНИЕ_ВАШЕЙ_ТЕМЫ/images/noimages.jpg";
    }
    return $first_image;
}

В коде нужно сделать некоторые изменения. Так, в строке $first_image = “/wp-content/themes/НАЗВАНИЕ_ВАШЕЙ_ТЕМЫ/images/noimages.jpg”; нужно указать полный путь к изображению, которое будет установлено как миниатюра в случае отсутствия изображений в публикации. Эту картинку нужно предварительно создать.

Чтобы приведенная функция была выполнена, ее нужно вызвать. Это необходимо сделать в тех файлах Вашей темы, где собственно и выводится на экран список записей сайта. Обычно это index.php, content.php, archive.php, category.php, single.php и пр. Вывод нашей функции должен осуществляться после определения цикла:

<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?>

В итоге подключение функции будет иметь следующий вид:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php echo wpschool_first_post_img() ?>" alt="<?php the_title(); ?>" />
</a>

Теперь все записи в выведенном списке будут иметь кликабельные миниатюры, ведущие на страницу публикации. Исключением является вывод некликабельной миниатюры в самой записи. Для этого в файле single.php нужно (после определения цикла) вставить следующую строку:

<img src="<?php echo wpschool_first_post_img() ?>" alt="<?php the_title(); ?>" />

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

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

Создай свой первый сайт на WordPress
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Обсуждение: 2
  1. Сурен

    здравствуйте, у меня шаблон generatepress и ваша инструкция вовсе не подходит к шаблону. выскакивает всякие ошибки. А проблема у меня в следующем:
    На моем сайте rianovost.ru картинки выводятся, но только те, которые предварительно загружаю в время создания записи это и отнимает время, и неудобно. Дело в том, что я пишу в ворде, оттуда через специальный плагин загружаю на сайт, в том числе картинки, которые я предварительно загрузил в ворд во время написания поста. Это очень удобно, в ворде много функции. И в самой записи все загружается один в дин. то есть пормахы на стороне врда или плагина исключается . Но на главной странице записи попадают, а вот картинки нет, по этому мне нужно, что выводился первая картинка из записи . Но это еще не все! Есть и другая проблема! Те картинки, которые выводились (Выводятся те картинки, которые предварительно загружаю в библиотеку) у них в постах присутствует описание , это описание по формату (шрифт,цвет, курсив и размер) но вот на главной странице подпись выводилась как обычный текст. И это жутко не красиво! И не только на главной , еще и когда поделюсь в соцсетях, вместе с заголовком “клеится” caption изображения! Подскажите пожалуйста, как делать, что предлагайте?

  2. Сурен

    Здравствуйте! У меня childtheme тема generatepress и там при добавлении записи есть возможность добавить изображение и это изображение появляется в анонсах. Но не всегда удобно добавить изображение таким образом, во первых это долго и во вторых перегружает хостинг. По этому я в записях вставлю изображение из других сайтов (copypaste),и дальше пишу свой текст, и когда сохраняю запись , в самой записи все отлично , но вывод записи на главной странице получается без изображении, но дело в том, что некоторые записи таким образом выводятся на главной с изображениями, а некоторые без изображении . Я не могу понять, в чем причина такой поведении , если отключена функция вывода изображении записи, тогда никакое изображение не должны выводится, но они выводятся на своё усмотрение, некоторые не выводятся, а некоторые выводятся на главной. Прошу подсказать, в чем дело?
    Например изображение этой записи не вышло на главную страницу https://www.rianovost.ru/belarus-buys-first-party-oil..
    А изображение этой записи вышло на главной
    https://www.rianovost.ru/sostoyalsya-telefonnyy-razgo..
    Такая же ситуация и с Open graph при “поделится” на соцсетях то выводится изображение, то нет, когда как)))
    В обеих случаях изображение не загрузил по форме “добавить изображение записи” А просто вставил в запись из других сайтов (copypaste)

Задать вопрос