Вывод миниатюр записей в WordPress

Наша цель

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

Пример вывода записей с миниатюрами в WordPress

Пример вывода записей с миниатюрами в WordPress

Некоторые шаблоны WordPress так и отображают записи, но для некоторых приходится самостоятельно допиливать такой функционал. В принципе это простенькая задача, но я опишу ее подробно.

Алгоритм решения задачи

Все довольно просто — достать картинку из содержимого записи и отобразить ее возле выдержки из этой же записи. Реализовать «доставание» картинки можно разными способами: парсить контент записи на наличие изображения, доставать картинку из блока «Миниатюра записи» (но перед этим придется еще и добавлять ее к каждой записи), наконец доставать ее из «Дополнительных полей», но опять-таки ее туда еще нужно и добавлять, что не совсем удобно. Возьмемся за самый простой вариант — парсинг контента.

Реализация

  1. Для парсинга нам нужна специальная функция, которая отлавливает первый попавшийся URL изображения в содержимом записи.
    function catch_image( $content )
    {
        preg_match('/<\s*img [^\>]*src\s*=\s*(["\'])(.*?)\1/im', $content, $results);
        return $results[2];
    }
    

    Ее нужно разместить в файле functions.php шаблона, который мы допиливаем. Лучше всего в конце

  2. Дальше нужно позаботиться об изменении размеров изображения. Я обычно пользуюсь скриптом (ресайзером) TimThumb
    Допустим скрипт мы положим в папку /includes которую создадим в корневой папке шаблона. В данной ситуации удобно создать новую функцию, которая будет отдавать нам изображение заданных размеров, пропущенное через ресайзер. Опять-таки добавляем этот код в конец functions.php

    function resize_image( $img_url, $width = 100, $height = 100, $crop = 1 )
    {
        if( !$img_url )
                return false;
        return get_bloginfo('template_url').'/includes/timthumb.php?src='.$image_url.'&h='.$height.'&w='.$width.'&zc='.$crop;
    }
    
  3. Теперь остается добавить наше изображение к выдержке из записи.

    function add_image_to_excerpt( $excerpt )
    {
        if( is_home() || is_category() ){
            $image_url = catch_image( get_the_content() );
            $excerpt  = "<img src=\"".resize_image( $image_url, '150', '150' );
            $excerpt .= "\" />".$excerpt;
        }
        return $excerpt;
    }
    
    add_filter( 'the_excerpt', 'add_image_to_excerpt' );
    

Вуаля!

<code>...</code>,Wordpress

Комментарии(3)

  1. Igor Petrenko

    а куда последний кусок кода вставлять??

    • Андрей Степасюк

      Весь код вставляется в файл functions.php текущего шаблона.

      • Igor Petrenko

        спасибо,Андрей!!

Оставить комментарий