Получение и вывод первой картинки в wordpress

Доброе утро, уважаемые коллеги. Часто, при создании свой темы для блога или сайта, в шаблоне нужно получить первую (или не первую) картинку. Как это сделать, вы узнаете в этой записи.

Получение и вывод первой картинки в wordpress

Для того, чтобы получить первую картинку с записи wodpress, я использую следующую функцию:

function get_post_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ 
  	$img_dir = get_bloginfo('template_directory');
    $first_img = $img_dir . '/images/post-default.jpg';
  }
  return $first_img;
}

Особенности данной функции:

  1. Если картинки в посте нет, то она берется из папки images, а картинка называется — post-default.jpg. Вам следует самому положить картинку в эту папку.
  2. Изначально функция берет первую картинку, но если вы хотите использовать какую-то другую, то вам следует поменять индекс массива $matches. То есть, нужно менять этот код:
    $first_img = $matches [1] [0];
    
  3. Скрипт ищет картинку в посте с помощью регулярного выражения. Он работает только, если картинка не является ссылкой, то есть вариант:
    <a href="#"><img src="#" /></a>

    не будет работать.

Данную функцию необходимо скопировать в файл functions.php вашей темы. Для того чтобы использовать её, нужно в шаблоне прописать следующий код:

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo get_post_image(); ?>" alt="<?php the_title(); ?>" /></a>

Этот код выведет первую картинку с поста с ссылкой на него.

Я надеюсь, что помог вам получить первую картинку записи wordpress. Если у вас что-то не получилось, то пишите в комментариях о своих проблемах, а я вам обязательно помогу.

Категории: wordpress

Метки:


  • Андрей

    Попробовал использовать приведенный выше код. Вроде работает, но не всегда. В случае, если запись содержит больше одной картинки по непонятной причине может показывать или первую (для одних записей) или вторую картинку (для других записей). Т.е. код в некоторых случаях при наличии 2-х картинок НЕВЕРНО определяет которая из них первая. Как исправить такую багу ?

    С уважением. Андрей.

    • Денис

      Хм, использую этот код на всех своих сайтах, где требуется данная функция — полет отличный, функция возвращает первую картинку.

      Я могу предположить, что проблема возникает из-за того, что в некоторых записях (где возвращается вторая картинка), регулярное выражение пропускает первую картинку и возвращает вторую.

      Найдите запись, в которой происходит данный баг, откройте её исходный код и сохраните его. Создайте скрипт, в котором исходный код, который вы только что сохранили, присвойте какой-то переменной. Далее, пропустите её через то РВ, что используется в функции. Если код ловится регуляркой, то будет думать дальше, если нет — напишите сюда исходный код той картинки.

  • Андрей

    Здравствуйте.

    Не очень я понял, что надо сделать, поэтому просто даю две ссылки:
    1. Страница с двумя картинками в записи — httр://viptk.ru/?p=1150
    2. Титульная страница, где для этой записи только начало и
    одна картинка (которая и должна быть первой) —
    httр://viptk.ru/category/other1

    С уважением. Андрей.

    • Денис

      Да, действительно регулярное выражение в вашем примере не ищет первую картинку, проблема в нём. На вашем сайте есть страницы, для которых скрипт нормально ищет картинку? Или везде он показывает именно вторую?

  • Андрей

    На большинстве страниц с двумя картинками скрипт нормально определяет первую картинку. Например:
    httр://viptk.ru/?p=1127
    httр://viptk.ru/?p=1111
    Но есть немало и таких где ошибается. Например:
    httр://viptk.ru/?p=1150
    httр://viptk.ru/?p=1089

    Выше я дал адреса записей, а на главной сайта — httр://viptk.ru все эти записи даны в сокращенном варианте (анонсы) и видно как отработал СКРИПТ по каждой из записей.

    • Денис

      Я взял 2 записи. В первой записи скрипт нормально работает, а во второй — нет. Сравнил исходный код каждой из четырех ссылок — он одинаковый. Пропустил все ссылки через регулярное выражение, оно работает. Почему-то в контексте скрипт перестает искать ссылки. Попробуйте найти отличия между исходными кодами двух любых статей (одна — рабочая, другая — нет). Если найдете, напишите их, я помогу подправить РВ. Сам я найти отличия не смог.

  • Андрей

    Еще раз прочитал ваш пост и вижу, что:

    3. Скрипт ищет картинку в посте с помощью регулярного выражения. Он работает только, если картинка не является ссылкой, то есть вариант:
    1.
    не будет работать.

    Картинки в мои записи я добавляю стандартным для WP способом (через иконку загрузить/вставить). А таким образом получается картинка — ссылка. Но такой вариант лучше для списка записей, поскольку переход на полный текст записи возможен и через картинку и через кнопку «читать полностью».
    Может можно отредактировать скрипт, чтобы он нормально работал и в случае картинка-ссылка ?

    • Денис

      Что-то я никак не пойму, в чём у вас проблема. Покрутил исходный код вместе с рег. выражением, функция работает через раз. Как появится свободное время, попробую ещё разок посмотреть.

  • Илья

    Доброго времени суток!
    Подобных кодов в инете нашел полно, все они схожи между собой. НО, ни один не работает как следует. Все как нужно выводит только в последней статье, на статье которая ниже вообще ошибку выдает…
    Пробовал менять регулярные выражения в функции, пробовал убирать тег ссылки из текста статьи, но толку нет.
    Если кто знает решение, подскажите пожалуйста.

    • Денис

      Привет!
      Можете залить вашу тему, в которой ошибка, на какой-нибудь ФО и кинуть ссылку сюда. Я, когда будет свободная минутка, посмотрю.
      P.S. Странно, что функция не работает. Я её взял с другого своего сайта, где все отлично функционирует.

  • Alex

    Спасибо большое. Очень нужная функция в ВП. Но осталось несколько вопросов:

    1. Как задать минимальный размер для картинки, т.е. если первая картинка поста меньше 20px, выводить картинку по умолчанию ?
    2. Есть раздел, в котором публикуются видеоролики. Для этого раздела картинка по умолчанию не подходит, т.к. она не отражает содержимое поста. Как для этого раздела прописать, если картинка >20px не найдена, то использовать video.jpg ?

    Заранее благодарю за ответы. Спасибо.

    • 1. Когда вы получаете в шаблоне ссылку на картинку, там можно её (ссылку) обработать с помощью другой РВ. Парсите размеры, если они вас не устраивают, ставите свои.
      2. Тоже уже можно в шаблоне менять картинку на нужную. Если категория такая-то, а картинка по умолчанию, выводить такую-то картинку.

      • Alex

        Понятно, что ничего не понятно ((( Если не сложно, можно с примерами ? Буду очень признателен.

        Спасибо.

        • Так, ну, пример тут привести достаточно сложно. Всё, что вам нужно знать — это, как использовать функцию preg_match.

  • Boris

    как заставить скрипт работать, если картинка является ссылкой? а то
    не работает с плагином nextgen gallery, в нем как раз картинки на странице выводятся в виде превью с ссылкой на большую картинку

    • Вероятно, нужно изменить регулярное выражение.

  • Alexandr

    Отличная функция спасибо.

    Также очень благодарен адекватным и актуальным комментариям по теме.
    Из них нашел ответы на пару возникших вопросов.

  • Евгений

    Привет !

    Как задать размер выводимой картинки, если мне нужна ее миниатюра из поста?

    Спасибо.

    • Привет. Можно, например, использовать html атрибуты тега img.

  • yurec

    У меня после того как прописал вообще вадает ошибку и немогу даже в админку зайти… что делать хз

    • Ну, для того чтобы исправить всё — удалить изменения в файле functions.php, используя FTP.
      А по ошибкам — уже нужно детально смотреть, какие ошибки.

      • yurec

        уже все исправил.. я просто в этом еще новичок, но стараюсь… а вот с выводом картинки ничего не получается.. был бы благодарен вам за помощь skype yurka1200507

        • Скайпа, к сожалению, нет. Пишите вопросы в комментарии, постараюсь помочь.

  • sumnamelodiya

    Спасибо за функцию)
    У меня правда с этим регулярным выражением всегда выбиралась последняя картинка в посте, вместо первой.
    Но если РВ чуть изменить, то берется первая, так работает: ‘/]+src=[\'»]([^\'»]+)[\'»].*>/i’

    • sumnamelodiya

      оу, обрезался код.

      • Да, что-то с этой функцией не так. На моих проектах вроде бы работает, а люди пишут, что нет 🙁