WordPress: улучшаем статью с помощью the_excerpt и post_thumbnail

Подпишись на Telegram

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

Изображение записи 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». Эти размеры настраиваются в админке.

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

Пример можно посмотреть на этой странице.