Главная
Wordpress
Первая картинка из записи вместо миниатюры WordPress без плагина
  • 12 Фев 2015г
  • 3298
  • 36
  • Рубрика: Wordpress

Первая картинка из записи вместо миниатюры WordPress без плагина

Превая картинка из записи

Доброго времени суток 🙂
Тема этой статьи - первая картинка из записи вместо миниатюры WordPress без плагина. Часто авторы не добавляют миниатюры к своим записям или этой функции просто нет в теме, а через какое-то время вы решаете обзавестись таким удобством. Но вот беда, записи, которые вы добавили ранее не имеют миниатюр и если вы изменили тему или доработали ее и оформили красивый вывод картинок и текста в цикле, то старые записи будут смотреться не совсем красиво.
В этом случаи нам поможет данный способ. Его суть заключается в том что с помощью функции, мы вытягиваем первое изображение из записи и устанавливаем его в виде миниатюры. Как и раньше миниатюры добавлять не нужно, просто и далее продолжайте добавлять изображения в свою запись.
И так приступим к выполнению поставленной задачи.

1. Функция установки первой картинки в качестве миниатюры

Первое что вы должны сделать, это открыть Ваш файл functions.php и добавить в него, нижеприведенную функцию.

//Вывод первой картинки с поста
function first_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)){
   $first_img = "/wp-content/themes/НАЗВАНИЕТЕМЫ/images/noimages.jpg";
// укажите путь к изображению, которое будет выводится по умолчанию. 
  }
  return $first_img;
}

Скрипт вытягивает первое изображение из записи, но если его нет, то он ставит картинку по умолчанию. Чтобы вывести изображение по умолчанию вы должны создать его, назвав noimages.jpg и поместить в папку images. В 11 строке укажите путь к изображению.

1. Подключаем функцию вывода первой картинки в теме

Миниатюра подключается во всех файлах где в цикле выводятся записи - это index.php, content.php, archive.php, category.php, single.php и тд,
Для подключения нужно вставить следующий код после определения цикла, который выглядит примерно так:

<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> 

Сам код вывода нашей функции:

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

так картинка будет кликабельна и по ссылке вы перейдете в саму запись.

А вот в записи нужно вывести некликабельную картинку. Для этого нужно в single.php добавить код без ссылки

<img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" />

Теперь в Вашей теме не будет записей без миниатюр.

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

Еще небольшое дополнение к статье.

Если Вам надо, чтобы выводилась миниатюра, а если ее нет, первая картинка с записи, то нужно вместо сроки вывода, что Выше вставлять условие следующего вида:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); }
else { ?>
<img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" />
<?php } ?>

Конечно же добавляете свои классы стилей и оформителе их в CSS. Тогда ваши миниатюры будут выглядеть так, как Вам нужно.

На этом все, спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(16 голосов, в среднем: 5 из 5)

Опубликовано 36 комментариев

  • Index
    Комментариев: 2

    Работает отлично, спасибо!

  • Koks Ozols
    Комментариев: 4

    Спасибо, всё работает, но было бы вообще чудесно, если бы Вы добавили ещё одну проверку в эту функцию на предмет битой ссылки на картинку. Так как если в статье будет опубликована не сама картинка, а ссылка на эту картинку на другой хостинг или сайт и, вдруг она там исчезнет(а это не редкий случай), то Ваше условие "IF" в этом случае не сработает и вместо картинки выведется конфуз из-за 404-ой ошибки.
    А так в принципе, интересное решение.

    • Виталий
      Комментариев: 269

      Если внимательно посмотреть на код, то видно что с 9 строки начинается условие. Если нет первого изображения выводить картинку по умолчанию - noimages.jpg, только в путь нужно указать имя своей темы. Под этим условием, даже зеленым цветом текст выделен. Рад, что код помог Вам 🙂

      • Koks Ozols
        Комментариев: 4

        ==>
        if(empty($first_img)){
        $first_img = "/wp-content/themes/НАЗВАНИЕТЕМЫ/images/noimages.jpg";
        // укажите путь к изображению, которое будет выводится по умолчанию.
        }
        ==>
        :).., ну так я про это условие ничего не говорил, так как оно с помощью регулярки всего-лишь цепляет первую картинку из поста.
        А я Вам указал на совершенно другое условие, которое....,
        цитирую свои же слова:
        ==>
        ...бы вообще чудесно, если бы Вы добавили ещё одну проверку в эту функцию на предмет битой ссылки на картинку. Так как если в статье будет опубликована не сама картинка, а ссылка на эту картинку на другой хостинг или сайт и, вдруг она там исчезнет(а это не редкий случай), то Ваше условие «IF» в этом случае не сработает и вместо картинки выведется конфуз из-за 404-ой ошибки.
        <==
        То есть не плохо было бы добавить условие(я) проверки ссылки на картинку на предмет 404 ошибки, в случае если она находится не на нашем хостинге.
        Например используя метод onerror=test(this); и функции-обработчика:
        function test(e)
        {
        e.src="default.png";
        }

        Так что моё предложение остаётся актуальным.
        Спасибо, что отреагировали.

        • Koks Ozols
          Комментариев: 4

          Я имею ввиду, что если картинка в статье ЕСТЬ, но ссылка на неё битая и в ЭТОМ случае тоже надо выводить картинку по умолчанию, а на данный момент эта функция не сработает при таком условии, потому-что такого условия нету и соответственно мы получим ответ о 404-ой ошибке.
          Надеюсь понятно пояснил, что я имею ввиду.

          • Виталий
            Комментариев: 269

            Теперь я Вас понял 🙂 Данная функция рассчитан на то, что все картинки лежат именно на Вашем хостинге. В одной из статьей я упоминал про то, что не следует держать картинки на чужом хостинге или просто брать с чужого сайта, рано или поздно они пропадут. Кто не захотел заморачиваться с своими картинками пусть заморочится со скриптом 🙂 Возможно когда-то, займусь этим вопросом, но пока так.

            • Koks Ozols
              Комментариев: 4

              Ясно.
              Я попытался сам реализовать этот метод, но увы, это оказалось мне не под силу и я с трудом даже нашёл старенький плагин, который именно для этого и предназначен. Он ищет битые картинки в статьях и предлагает три варианта решения.
              1 – Не показывать битую картинку
              2 – Добавить класс к тегу img
              3 – Заменить её на любую другую(то что мне и надо было…)
              Плагин называется - WP 404 images fix
              Теперь, зная его название, его легко загуглить.
              Несмотря на то, что он очень страрый, но на последней на данный момент версии вордпресс 4.2.1 он прекрасно работает.
              Надеюсь другим эта информация будет очень полезна.
              Всем удачи и никогда не сдавайтесь...

              • Eugene Webber
                Комментариев: 2

                Проще так

              • Eugene Webber
                Комментариев: 2

                Сори код вырезало.
                Проще так <img onerror="this.src='/заглушка.jpg'" src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" /> но и это не верное решение, поисковики все равно битую ссылку увидят.
                Правильнее ответы с сервера читать через get_headers() и если картинка не найдена, только тогда уже выводить изображение по умолчанию.

      • Игорь
        Комментариев: 1

        Спасибо, получилось. Но единственное что меня смущает что в посте получается две картинки. Одна как миниатюра, а другая в записи. ссылка на тестовый сайт http://test-5-axhz.webinice.com/stil-zhizni/eksperiment-s-foto.html если не обрежете по правилам

        • Виталий
          Комментариев: 269

          Вам просто надо в файле записи - single.php убрать вывод миниатюр. То есть в цикле будет выводить миниатюра как первую картинку, а когда переходишь на статью, этого вывода нет, но есть картинка внтури статьи 🙂 Вот и все 🙂

  • Эдуард
    Комментариев: 2

    Прикупил я себе сайт с темой. В этой теме миниатюры автоматом брались с последней картинки. А именно, когда я каждый раз добавляю изображение, миниатюра меняется. В принципе устраивало. Но в одной из категорий понадобилось чтобы миниатюра бралась с первого изображения. В самой статьи хак работает. А вот когда нажимаешь на саму категорию, то тут танцы с бабуном. Ели нашел где она задается. В файле wp-content\themes\default\tpl\archive_board.tpl.
    Вот содержание файла

    {title|45}

    {thumbnail|150|113|thumb mr_5}

    {date|text}
    {comments_number}

    {excerpt|80}

    Строка 6 где задается миниатюра
    {thumbnail|150|113|thumb mr_5}
    Меняю на

  • Эдуард
    Комментариев: 2

    В общем функции php там не работают)) Сори весь код повырезало ))

    • Виталий
      Комментариев: 269

      Судя по коду у Вас там шорткоды.Нужно внимательно смотреть на код, возможно просто надо сделать правильную вставку. Мой код для вставки в ШТМЛ шаблон.

  • Надежда
    Комментариев: 1

    Скажите, а можно ли в теме в которой в тексте статьи миниатюра по умолчанию не выводится как первая картинка, сделать что бы миниатюра выводилась как первая картинка в статье?

    • Виталий
      Комментариев: 269

      Не совсем понятен Ваш вопрос. Вы хотите, чтобы миниатюра была первой картинкой? В чем проблема, просто добавьте код в файл single.php для вывода миниатюр и все. Если надо большого размера, то можно например -

      <?php the_post_thumbnail('medium'); ?>

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

  • Антон
    Комментариев: 1

    А как сделать что бы: если миниатюра задана вручную - выводится она, если миниатюра не задана - в качестве миниатюры берется первое изображение поста?

    • Виталий
      Комментариев: 269

      Спасибо за вопрос, добавлю это к статье. Вам нужно вместо кода вывода:
      <img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" />
      Добавить это условие
      <?php if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); }
      else { ?>
      <img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" />
      <?php } ?>

  • Сергей
    Комментариев: 2

    Здравствуйте, Виталий. Подскажите пожалуйста, не знаете ли Вы способа подключить эту, или подобную функцию, к выводу картинок в RSS ленту? Пытался колдовать с вашей, но знаний явно не достаточно) Если к вашей функции добавить, например:
    add_filter('the_excerpt_rss', 'featuredtoRSS');
    add_filter('the_content_feed', 'featuredtoRSS');
    , то в RSS ленте выводится просто путь к первому изображению из поста, причем даже не в виде ссылки, а просто в текстовом виде. Просто хочу избавиться от миниатюр полностью, загружать изображения в отдельные папки по категориям. Тогда вордпресс не делает по 6-7 копий одного и того же изображения. Ваша функция работает прекрасно, на нескольких темах ее использовал, а вот для RSS такой найти не могу. Буду очень благодарен если поможете, заранее спасибо.

    • Сергей
      Комментариев: 2

      Неправильный код привел, конечно делал с названием вашей функции)
      add_filter('the_excerpt_rss', 'first_post_image');
      add_filter('the_content_feed', 'first_post_image');

    • Виталий
      Комментариев: 269

      Вы в правильном направлении, но немного не доделываете. Смотрите, наша функция то и делает что просто пишет ссылку на изображение, а мы ее вставляем уже в тег img. А в RSS вы по сути просто вкидаете ссылку и все, а как же img тег? Напишите еще одну функцию которая выводит -
      <img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" />
      а потом запустите ее
      add_filter('the_excerpt_rss', 'НОВАЯ ФУНКЦИЯ');
      add_filter('the_content_feed', 'НОВАЯ ФУНКЦИЯ');

  • theNN
    Комментариев: 1

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

    Мне нужно реализовать как раз то, что написано в пункте "дополнение к статье". Но к сожалению плохо понимаю синтаксис php, поэтому не могу внедрить это условие в структуру своего кода. В каком месте здесь его нужно дописать?

    <?php if ( has_post_thumbnail() && !actuate_get_option('disable_thumb')): ?>
    <div class="loop-thumbnail-section">
    <div class="loop-thumbnail-overlay" style="<?php if($image_big) { echo "background-image:url('". $src_big ."');";} ?>" >
    </div>

    Спасибо.

  • Woot
    Комментариев: 3

    всё отлично работает, спасибо автору.
    есть один вопрос.
    Стоит шаблон sydney

    Хотелось бы понять, как сделать так чтобы на превью статей картинка была левее статьи, и статья оптекала саму картинку.

    Сейчас она выше статьи и смотрится как то не айс (((
    http://holidaybyday.ru/category/poleznoe/

    я думаю всё в шаблоне и в style.css ?
    осталось понять где ?)))

    • Виталий
      Комментариев: 269

      В первую очередь на своем сайте, вывод картинки перенесите в коде чуть ниже, то есть внутрь блока
      <header class="entry-header">
      То бишь сразу после этой строки добавьте код с моей статьи.
      Далее добавьте класс картинке, например так:
      <img class="sng_img"
      Стили к примеру так:
      .sng_img {
      float: left;
      margin: 0 25px 25px 0;
      }

      Ну и на последок, чтобы уменьшить отступы.
      style.css строка 1224
      элемент .content-area .hentry
      Убрать отступ сверху - padding-top: 50px; То есть, заменить на padding-top: 0;
      Ответ писал дольше, чем прижал картинку 🙂

  • Woot
    Комментариев: 3

    о дааа )
    спасибо .
    Всё отлично получилось.

    В начале я вставил код
    <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
    <img src="<?php echo first_post_image() ?>" alt="<?php the_title(); ?>" />
    </a>

    в archive.php
    с вашей подсказки перенёс его в content.php
    осталось добавить новый класс в style.css
    и добавить его к вашему коду.

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

  • campusboy
    Комментариев: 1

    В целях безопасности лучше написать return esc_url( $first_img );

  • Босс
    Комментариев: 5

    Подскажите как сделать, чтобы class брался из поста первой картинки а не задавался вручную.
    Т.е. если она в посте по центру стоит, то и в миниатюре также.

    • Босс
      Комментариев: 5

      Чтобы и width, height брало также оттуда. Ну в общем всё оттуда.

      • Виталий
        Комментариев: 269

        Никак. Если Вы ставите картинки по центру, то просто задайте в стилях по центру. В вашей теме же есть какой-то определенный стиль? Вот у меня все миниатюры слева и в записи и в списке тоже. Если миниатюра берется как первая картинка, то ее выводить удобно в списке статей. Но вот в самой статье смысла ее выводить тогда нет. Зачем вам миниатюра и ниже такая же картинка, причем даже по стилю все одинаково?

        • Босс
          Комментариев: 5

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

        • Босс
          Комментариев: 5

          И то что вы говорите что никак, это совсем не так. Тут просто скорее всего нужно подстроить регулярку чтобы брало не саму ссылку картинки а с нужными параметрами - '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',

  • Босс
    Комментариев: 5

    Еще как бы сделать чтобы картинку брало только если она над текстом, а если в тексте то не выводим миниатюру?

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий