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

Admin PHP, WordPress

Вывод миниатюр (thumbnails) в WordPress вместе с изображением по-умолчанию.

PHP код для вывода миниатюры к записи, если она имеется. Если миниатюры для записи нет, то выводится картинка по умолчанию.

Конструкция состоит из вывода миниатюры и текста к записи.

<ul id="post_thumb">

<li class="post_thumb">
<?php
if ( has_post_thumbnail() ) {
    echo '<a href="' . get_permalink() . '" title="'.the_title( '', '', false ).'">';
    the_post_thumbnail( 'thumbnail' );
    echo '</a>';
} else { ?>
<img src="/wp-content/uploads/thumb_default.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
</li>

<li class="post_text">
<?php the_excerpt(); ?>
</li>

</ul>

У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.

Комментарии к статье “Вывод миниатюры в WordPress с изображением по умолчанию” (18)

  • Alexandro
    26.09.2017 в 02:17

    Спасибо за статью!

    А как переделать в случае, если оригинальный код:

    <?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
    <div class="post-thumbnail">
    <a href="<?php the_permalink(); ?>">
    <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
    </a>
    </div><!-- .post-thumbnail -->
    <?php endif; ?>

    Я написал:

    <?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) { ?>
    <div class="post-thumbnail">
    <a href="<?php the_permalink(); ?>">
    <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
    </a>
    </div><!-- .post-thumbnail -->
    <?php } else { ( '' !== get_the_post_thumbnail() && ! is_single() ) ?>
    <div class="post-thumbnail">
    <a href="<?php the_permalink(); ?>">
    <img src="/wp-content/uploads/pic/rockavatar.jpg" alt="<?php the_title(); ?>" />
    </a>
    </div><!-- .post-thumbnail -->
    <?php } ?>

    Но так картинка не выводится и пропадает форматирование плагина Easy Custom Auto Excerpt Options. Как сделать правильно?

    • Admin
      Автор записи
      26.09.2017 в 16:56

      Вставка изображения не должна влиять на вывод анонса. Ведь это разные функции.

      Рабочий код:

      <?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) { ?>

          <div class="post-thumbnail">

              <a href="<?php the_permalink(); ?>">
              <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
              </a>

          </div><!-- .post-thumbnail -->

      <?php } else { ?>

          <div class="post-thumbnail">

              <a href="<?php the_permalink(); ?>">
              <img src="/wp-content/uploads/pic/rockavatar.jpg" alt="<?php the_title(); ?>" />
              </a>

          </div><!-- .post-thumbnail -->

      <?php } ?>
  • Admin
    Автор записи
    26.09.2017 в 17:17

    Поудалял пустые комментарии и поправил форму. Буду отписывать здесь.

    Всё сложно реализовано, плагин не нужен. Вывод анонсов и миниатюр — это стандартные функции WordPress. Лучше лишний раз тег more поставить, зато будет аккуратно всё подрезано. А если всё-таки нужно, чтобы резалось автоматом, то the_content() надо заменить the_excerpt() в файле content.php.

    всплыла иная проблема: в самой статье, рядом с загруженным фото (он в анонсе не отражался) появился та самая вставляемая в анонс картинка…

    Если картинка находится в посте и входит в область анонса, то она будет показываться на главной. Чтобы она не показывалась на главной надо её перенести за область анонса. А если нужно чтобы она была наверху, то можно применить к ней стиль float: left или right и она отправится наверх.

    Также в конструкции выше else не должно повторять is. Вставить нужно именно мой код выше, а не свой.

    Неправильно:

    <?php } else { ( '' !== get_the_post_thumbnail() && ! is_single() ) ?>

    Правильно:

    <?php } else { ?>
  • Admin
    Автор записи
    26.09.2017 в 17:47

    Кстати, вспомнил, что есть ещё плагин для WordPress, который автоматически генерирует первое изображение из статьи и подключает его как миниатюру. Кажется называется Auto Post Thumbnail. Для определенных задач он может оказаться весьма полезным.

  • Alexandro
    27.09.2017 в 02:40

    В общем, этот код выводит картинку не только как миниатюру в анонсах разделов, но и в самой статье, что совсем нехорошо.
    Возможно, причина в том, что код вставлен в файл content (который наверное формирует содержание статей), а надо было вставить в тот файл, который формирует содержание разделов. Посмотрел файл archive, но не понял, что там сделать.
    Ладно, придется вернуть старый content.

    • Admin
      Автор записи
      27.09.2017 в 06:40

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

      Для вывода альтернативного изображения только в архивах (все категории, включая главную и поиск) оберните нужную конструкцию в этот код:

      <?php if ( is_home() || is_archive() || is_search() )  { ?>

      <?php } ?>

      А именно так:

      <?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) { ?>

          <div class="post-thumbnail">

              <a href="<?php the_permalink(); ?>">
              <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
              </a>

          </div><!-- .post-thumbnail -->

      <?php } elseif ( is_home() || is_archive() || is_search() )  { ?>
          <div class="post-thumbnail">

              <a href="<?php the_permalink(); ?>">
              <img src="/wp-content/uploads/pic/rockavatar.jpg" alt="<?php the_title(); ?>" />
              </a>

          </div><!-- .post-thumbnail -->

      <?php } ?>
  • Alexandro
    27.09.2017 в 13:57

    Спасибо большое за отзывчивость! Код работает 🙂
    Можно еще вопрос? А как сделать, чтобы вместо «изображения записи» при открытии страницы с полной записью показывалась другая картинка (хорошо бы разная в разных рубриках или случайная из определенной папки)?

    • Admin
      Автор записи
      28.09.2017 в 13:44

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

      Это сделать просто. Достаточно убрать отображение миниатюры из статьи. А в саму статью вставлять любое другое изображение.

      Например:

      <?php

      if ( is_home() || is_archive() || is_search() ) {

          if ( '' !== get_the_post_thumbnail() ) { ?>

              <div class="post-thumbnail">

                  <a href="<?php the_permalink(); ?>">
                  <?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
                  </a>

              </div><!-- .post-thumbnail -->

          <?php } else { ?>

              <div class="post-thumbnail">

                  <a href="<?php the_permalink(); ?>">
                  <img src="/wp-content/uploads/pic/rockavatar.jpg" alt="<?php the_title(); ?>" />
                  </a>

              </div><!-- .post-thumbnail -->

      <?php } } ?>

      (хорошо бы разная в разных рубриках или случайная из определенной папки)?

      Здесь сложнее. Надо продумывать способ реализации.

  • Alexandro
    02.10.2017 в 02:34

    Не заметил сразу досадную ошибку. Если вставить твой код, то в анонсах раздела и в поиске перед заголовком почему-то появляется цифра «1» (в самой статье нет). Покопался в коде, но так и не понял, откуда она. Послал на почту скриншоты, а также оригинальный файл content1 (неизмененный) и файл content2 (измененный). С первым контентом цифра «1» не появляется, но пропадает форматирование, а со вторым появляется эта цифра.
    В чем тут может быть дело?

    • Admin
      Автор записи
      02.10.2017 в 07:01

      Все на мой код грешите. Не придирайтесь к нему больше, там всё работает :). Он отвечает только за вывод изображений. Сейчас у вас проблема в заголовке.

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

      <?php the_title(! is_single() ); ?>

      В первом файле её нет. Заголовок the_title() выводит единицу, потому что внутри имеется «! is_single». Такая конструкция неправильная.

      Правильный код для вывода заголовка:

      <?php the_title(); ?>

      А если нужно чтобы заголовок показывался только в статье, что вероятно предполагается такой конструкцией the_title(! is_single() ), то код будет такой:

      <?php if (is_single()) { the_title(); } ?>

      но тогда заголовка в разделах не будет.

      Вы сейчас используете другую тему и если ваш файл content.php отвечает за вывод всех заголовков (и для разделов и для статей), то он неправильный. Потому что в разделах будет сразу много h1. Посмотрите как сделан заголовок в предыдущей вашей теме Twenty_Seventeen, вот отрезок:

      if ( is_single() ) {
                  the_title( '<h1 class="entry-title">', '</h1>' );
              } elseif ( is_front_page() && is_home() ) {
                  the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h3>' );
              } else {
                  the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
              }
  • Alexandro
    17.10.2017 в 04:40

    Еще вопрос можно? 🙂

    В некоторых публикациях есть авторы (не те, кто публикуют новость, а авторы материала, например Чехов). Создал для таких дополнительное поле «creator». И в выводе анонса написал (чтоб имя автора выводилось перед названием):

    <h1 class="entry-title">
    <a href="<?php the_permalink(); ?>" rel="bookmark">
    <font style="font-size: 80%; font-weight: bold;">
    <?php if( is_home() || is_archive() || is_search() ) { ?>
    <?php echo get_post_meta($post->ID, 'creator', true); ?>
    <?php }?>
    </font>
    <?php the_title(); ?></a>
    </h1>

    Все нормально, работает. Но хорошо бы после имени автора поставить еще и точку с пробелом, чтоб оно как-то отделялось от названия. И вот с этим никак не разберусь. Если написать просто

    <?php echo get_post_meta($post->ID, 'creator', true); ?>.&nbsp;

    то точка с пробелом выводятся перед анонсом даже если у публикации нет автора. Что выглядит совсем неуместно.
    Значит, надо засунуть точку с пробелом в условие если имеется автор.
    А как это сделать не соображу. Перерыл интернет, но аналогичного случая не нашел, пишут только как просто текст в php вставлять.

    • Admin
      Автор записи
      17.10.2017 в 08:41

      Условие для произвольного поля выводится так:

      <?php if ( get_post_meta($post->ID, 'creator', true) ) : ?>
      <?php echo get_post_meta($post->ID, 'creator', true); ?>.&nbsp;
      <?php endif; ?>
  • Александр
    17.08.2018 в 20:27

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

    • Admin
      Автор записи
      18.08.2018 в 13:57

      Слишком общий вопрос. Надо смотреть какой стиль и куда примешивается. И на основании этого уже править. И это выходит за рамки статьи, все-таки она не о правках в стилях css.

  • Сурен
    07.05.2020 в 22:08

    Здравствуйте! У меня childtheme тема generatepress и там при добавлении записи есть возможность добавить изображение и это изображение появляется в анонсах. Но не всегда удобно добавить изображение таким образом, во первых это долго и во вторых перегружает хостинг. По этому я в записях вставлю изображение из других сайтов (copypaste),и дальше пишу свой текст, и когда сохраняю запись , в самой записи все отлично , но вывод записи на главной странице получается без изображении, но дело в том, что некоторые записи таким образом выводятся на главной с изображениями, а некоторые без изображении . Я не могу понять, в чем причина такой поведении , если отключена функция вывода изображении записи, тогда никакое изображение не должны выводится, но они выводятся на своё усмотрение, некоторые не выводятся, а некоторые выводятся на главной. Прошу подсказать, в чем дело?

    Такая же ситуация и с Open graph при «поделится» на соцсетях то выводится изображение, то нет, когда как)))
    В обеих случаях изображение не загрузил по форме «добавить изображение записи» А просто вставил в запись из других сайтов (copypaste)

    • Admin
      Автор записи
      08.05.2020 в 06:59

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

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Вывод миниатюры в WordPress с изображением по умолчанию"