Вывод миниатюр (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>
<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>
Спасибо за статью!
А как переделать в случае, если оригинальный код:
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div><!-- .post-thumbnail -->
<?php endif; ?>
Я написал:
<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. Как сделать правильно?
Вставка изображения не должна влиять на вывод анонса. Ведь это разные функции.
Рабочий код:
<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 } ?>
Поудалял пустые комментарии и поправил форму. Буду отписывать здесь.
Всё сложно реализовано, плагин не нужен. Вывод анонсов и миниатюр — это стандартные функции WordPress. Лучше лишний раз тег more поставить, зато будет аккуратно всё подрезано. А если всё-таки нужно, чтобы резалось автоматом, то the_content() надо заменить the_excerpt() в файле content.php.
Если картинка находится в посте и входит в область анонса, то она будет показываться на главной. Чтобы она не показывалась на главной надо её перенести за область анонса. А если нужно чтобы она была наверху, то можно применить к ней стиль float: left или right и она отправится наверх.
Также в конструкции выше else не должно повторять is. Вставить нужно именно мой код выше, а не свой.
Неправильно:
Правильно:
Кстати, вспомнил, что есть ещё плагин для WordPress, который автоматически генерирует первое изображение из статьи и подключает его как миниатюру. Кажется называется Auto Post Thumbnail. Для определенных задач он может оказаться весьма полезным.
В общем, этот код выводит картинку не только как миниатюру в анонсах разделов, но и в самой статье, что совсем нехорошо.
Возможно, причина в том, что код вставлен в файл content (который наверное формирует содержание статей), а надо было вставить в тот файл, который формирует содержание разделов. Посмотрел файл archive, но не понял, что там сделать.
Ладно, придется вернуть старый content.
Это ведь базовая концепция, а дальше с ней можно делать всё что угодно.
Для вывода альтернативного изображения только в архивах (все категории, включая главную и поиск) оберните нужную конструкцию в этот код:
<?php } ?>
А именно так:
<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 } ?>
Спасибо большое за отзывчивость! Код работает 🙂
Можно еще вопрос? А как сделать, чтобы вместо «изображения записи» при открытии страницы с полной записью показывалась другая картинка (хорошо бы разная в разных рубриках или случайная из определенной папки)?
Это сделать просто. Достаточно убрать отображение миниатюры из статьи. А в саму статью вставлять любое другое изображение.
Например:
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 } } ?>
Здесь сложнее. Надо продумывать способ реализации.
Не заметил сразу досадную ошибку. Если вставить твой код, то в анонсах раздела и в поиске перед заголовком почему-то появляется цифра «1» (в самой статье нет). Покопался в коде, но так и не понял, откуда она. Послал на почту скриншоты, а также оригинальный файл content1 (неизмененный) и файл content2 (измененный). С первым контентом цифра «1» не появляется, но пропадает форматирование, а со вторым появляется эта цифра.
В чем тут может быть дело?
Все на мой код грешите. Не придирайтесь к нему больше, там всё работает :). Он отвечает только за вывод изображений. Сейчас у вас проблема в заголовке.
Если что идет не так, значит что-то вы там другое нахимичили. В данном случае единицу выводит конструкция:
В первом файле её нет. Заголовок the_title() выводит единицу, потому что внутри имеется «! is_single». Такая конструкция неправильная.
Правильный код для вывода заголовка:
А если нужно чтобы заголовок показывался только в статье, что вероятно предполагается такой конструкцией the_title(! is_single() ), то код будет такой:
но тогда заголовка в разделах не будет.
Вы сейчас используете другую тему и если ваш файл content.php отвечает за вывод всех заголовков (и для разделов и для статей), то он неправильный. Потому что в разделах будет сразу много h1. Посмотрите как сделан заголовок в предыдущей вашей теме Twenty_Seventeen, вот отрезок:
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>' );
}
Спасибо, проблема решилась! 🙂
Еще вопрос можно? 🙂
В некоторых публикациях есть авторы (не те, кто публикуют новость, а авторы материала, например Чехов). Создал для таких дополнительное поле «creator». И в выводе анонса написал (чтоб имя автора выводилось перед названием):
<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 вставлять.
Условие для произвольного поля выводится так:
<?php echo get_post_meta($post->ID, 'creator', true); ?>.
<?php endif; ?>
Спасибо большое, работает!
В wordpress изображение пока маленькое находится на белом фоне,а после увеличения становится на черном.
Подскажите пожалуйста- как изменить черный фон под изображением на белый ?
Слишком общий вопрос. Надо смотреть какой стиль и куда примешивается. И на основании этого уже править. И это выходит за рамки статьи, все-таки она не о правках в стилях css.
Здравствуйте! У меня childtheme тема generatepress и там при добавлении записи есть возможность добавить изображение и это изображение появляется в анонсах. Но не всегда удобно добавить изображение таким образом, во первых это долго и во вторых перегружает хостинг. По этому я в записях вставлю изображение из других сайтов (copypaste),и дальше пишу свой текст, и когда сохраняю запись , в самой записи все отлично , но вывод записи на главной странице получается без изображении, но дело в том, что некоторые записи таким образом выводятся на главной с изображениями, а некоторые без изображении . Я не могу понять, в чем причина такой поведении , если отключена функция вывода изображении записи, тогда никакое изображение не должны выводится, но они выводятся на своё усмотрение, некоторые не выводятся, а некоторые выводятся на главной. Прошу подсказать, в чем дело?
Такая же ситуация и с Open graph при «поделится» на соцсетях то выводится изображение, то нет, когда как)))
В обеих случаях изображение не загрузил по форме «добавить изображение записи» А просто вставил в запись из других сайтов (copypaste)
Разобрались? Вижу сейчас там все выводится. В любом случае надо изучать код в теме. На вскидку может быть все что угодно.