Небольшой лайфхак, который отделяет первый абзац и главное изображение в отдельное поле.
Это позволит гибко управлять и создавать Лид с кастомным оформлением, а также вставлять изображение в любое место страницы.
Изображение записи WordPress
Устанавливается в отдельное поле в редакторе текста и в шаблоне WordPress вызывается функцией: the_post_thumbnail_url и еще целым рядом похожих функций, которые выводят почти то же самое, но для других задач.
Я все время обходил стороной это поле и добавлял изображение в редакторе в основной контент. А для рубрик и похожих записей выдергивал его простым кодом в пару строк:
<div class="image">
<?php if ( has_post_thumbnail()){ ?>
<img src="<?= the_post_thumbnail_url(); ?>" >
<?php }else{ ?>
<img src="<?= get_post_image(); ?>" >
<?php } ?>
</div>В данной статье опишу, как связать изображение записи с возможностью его увеличивать в модальном окне. Для этого будем использовать мой плагин: WordPress: плавное увеличение изображений на Higslide
Отрывок the_excerpt
Также в данную связку добавим и отрывок. Это такое же поле, которое существует независимо от основного контента. В шаблоне выводится одной строкой.
Особенность отрывка в том, что его удобно ставить в самое начало текста и позиционировать как «лид» — эдакая интригующая замануха.
Выводим изображение записи и отрывок
<article class="single-content">
<figure class="post-thumbnail">
<a href="<?= the_post_thumbnail_url('full'); ?>">
<img src="<?= the_post_thumbnail_url('medium'); ?>">
</a>
</figure>
<div class="post-excerpt">
<?php if( has_excerpt() ){
the_excerpt();
} ?>
</div>
<?php the_content(); ?>
</article>В коде не делается проверка на наличие привязанного изображения через has_post_thumbnail, как это делаю я в другом шаблоне в примере первого кода.
Для вывода изображения используется функция the_post_thumbnail_url — это прямая ссылка на картинку. Она вызывается два раза — с размерами «medium» и «full». Эти размеры настраиваются в админке.
Таким образом имитируем изображение со ссылкой на медиафайл если бы добавляли его через редакторы. Мы получаем кликабельное изображение, где видимым оно будет обрезанное и оптимизированное под формат статьи, а при клике — загрузится в полном размере.
Пример можно посмотреть на этой странице.