BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Wordpress » Как в анонсе вывести первую картинку поста на WordPress

Как в анонсе вывести первую картинку поста на WordPress

2014-11-05 / Вр:11:27 / просмотров: 17711

Как в анонсе вывести первую картинку поста на WordPress

Вы наверняка заметили, что на блогах, в основном на главной странице, выводятся анонсы записей. И к каждому анонсу подбирается привлекательная картинка. Это хороший способ привлечь посетителя и соблазнить его прочитать статью.
Чтобы вывести картинку в анонсах, можно воспользоваться функцией, которую предлагает WordPress: вывод миниатюры. Но можно сделать так, что в анонсе будет выводиться первая картинка из поста автоматически. Эта возможность поможет сэкономить время на добавлении миниатюр в записях на блоге.
Итак, чтобы автоматизировать вывод картинки к анонсам записей, откройте файл «functions.php» темы и добавьте такой код:

// Вывод первой картинки с поста
function bloggood_ru_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 = "/img/default.jpg";
  }
  return $first_img;
}

Настройки:
В строке №12 - укажите путь и имя картинки. Эта картинка будет выводиться по умолчанию ко всем анонсам тех постов, в которых нет картинок.

Теперь нужно вывести эту функцию в анонсах. Для этого откройте файл «index.php» и между циклом php вставьте вот такой код:

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

Кто не понял, куда вставлять код, смотрите пример снизу:

<!-- начало цикла -->
<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> 

<!-- выводим функцию, которая отвечает за вывод картинки в анонсе -->
<img src="<?php echo bloggood_ru_image(); ?>" alt="<?php the_title(); ?>"/>

<?php endwhile; ?>
<?php endif; ?>
<!-- конец цикла -->

Чтобы картинка в анонсах не выводилась больших размеров, пропишем нужную ширину.

<img src="<?php echo bloggood_ru_image(); ?>" alt="<?php the_title(); ?>" width="250"/>

В примере я задал ширину для изображения 250 пикселей, вы же ставите подходящую для вас.

Если вам нужно сделать так, чтобы картинка в анонсе была ссылкой, нужно это сделать вот так:

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

Это все! Спасибо за внимание! И не стесняйтесь жать на кнопки социальных сетей, которые размещены чуток ниже ;-).

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

47 Ответов на комментарий - Как в анонсе вывести первую картинку поста на WordPress

  1. Игорь Черноморец

    Привет Степан! Ты имеешь в виду анонсы, которые подписчики получают по почте через сервис Фидбёрнер?

  2. Степан => автор блога

    Привет, Игорь! Нет, не те анонсы что приходят по почте через сервис Фидбёрнер. Я имел в виду анонсы которые размещены на сайте! Краткое описание статьи с кнопкой читать далее. Так как у тебя или у меня на главной странице.

  3. Игорь Черноморец

    Ну тогда я совсем запутался :?:
    Разве это не делается прямо через редактор, при написании самой статьи? Зачем добавлять коды в разные файлы? Не понимаю!

  4. Степан => автор блога

    Игорь, тебе повезло, так как в твоей теме уже стоит этот код. Есть такие темы когда этого кода нет и приходиться до каждой статьи вставлять миниатюры! Еще, если создавать самому темы (шаблоны) для WordPress, такой возможности выводить первую картинку в анонсе не будет, если не прописать этот код.

  5. Игорь Черноморец

    Степан, вот сейчас всё понятно!!! ;-)
    Но, в любом случае, я думаю, что легче добавить просто миниатюру! А вот для тех, кто сами создают темы, так для них эта информация как на вес золота! Спасибо!

  6. Степан => автор блога

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

  7. Елена

    Спасибо огромное! Только я не поняла -русский текст тоже вставляем в файлы сайта? Или Вы это для нас комментарии. а вставлять не надо . И не совсем понятно куда именно вставлять до хеддера . ведь в этих файлах уже есть какой то текст

  8. Елена

    Вообщем, у меня весь сайт поехал. :|

  9. Степан => автор блога

    Здравствуйте, Елена! Текст в коде на русском, это комментарий. Его можно оставлять, это не как не влияет на работу кода.
    Куда вставлять код? Там же все написано.
    Этот код вставляете в файл «functions.php» в самом конце перед знаком «?>»

    // Вывод первой картинки с поста
    function bloggood_ru_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 = "/img/default.jpg";
      }
      return $first_img;
    }
    

    Этот код вставьте в файл «index.php» между циклом

    <!-- выводим функцию, которая отвечает за вывод картинки в анонсе -->
    <img src="<?php echo bloggood_ru_image() ?>" alt="<?php the_title(); ?>"/>
    
  10. Степан => автор блога

    а вы размер картинкам указали?

    <img src="<?php echo bloggood_ru_image() ?>" alt="<?php the_title(); ?>" width="250"/>
    
  11. Елена

    Вот в index не совсем понятно куда вставлять . между каким циклом? размер указала, как у Вас .

    И еще Вы не знаете что за глюк такой после обновления wordpress – не работает кнопка “вставить медиафайл”?

  12. Елена

    Вот файл index

    после какой конкретно строки ?
    я вчера вставила перед

    и у меня исчезли все посты с сайта

  13. Степан => автор блога

    Насчет глюка, у меня такого не было! Но попробуйте зайти в админ-панели “Консоль” => “Обновления”. В обновлении WordPress нажмите на кнопку “Переустановить”. Может поможет.

  14. Степан => автор блога


    Вместо 13 строки

  15. Елена

    Спасибо большое !!!

  16. Степан => автор блога

    Пожалуйста!!!

  17. Игорь

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

  18. Степан => автор блога

    Самый легкий способ:
    когда добавляете картинки “Добавить медиафайл”, выберите нужный вам размер “НАСТРОЙКИ ОТОБРАЖЕНИЯ ФАЙЛА” => “Размер”.
    Я вас правильно понял?

  19. Александр

    Здравствуйте, все получилось, остался только вопрос, как выровнять по центру? и еще вопрос, зачем там прописан ваш домен?

  20. Степан => автор блога

    Здравствуйте, Александр!
    Сделать по центру:

    <center><img src="<?php echo bloggood_ru_image() ?>" alt="<?php the_title(); ?>" width="250"/></center>

    Читайте здесь
    “зачем там прописан ваш домен?” – так назвал php-функцию.
    Читайте про функции здесь

  21. Александр

    Спасибо, за оперативный ответ, все понятно.

  22. Александр

    Добрый день. Все получилось. Спасибо. Только значения width толку не дают. Выводится в анонсе тот размер картинки, который выставлен в самом посте.
    И еще вопросик… Как сделать чтобы в анонсе текст начинался не под картинкой, а справа от нее? Как бы огибал

  23. Степан => автор блога

    Здравствуйте, Александр!
    Попробуйте так:

    <img src="<?php echo bloggood_ru_image() ?>" alt="<?php the_title(); ?>" class="image-post"/>

    в CSS:

    .image-post
    {
        width: 250px !important;
        float: left;
    }
    
  24. Александр

    Спасибо. Все как надо… добавил еще:

    margin: 7px 7px 7px 0;

    Чтобы симпатичнее выглядело
    Еще раз спасибо

  25. Степан => автор блога

    Пожалуйста, Александр!

  26. 2l1k

    Не сработало! Ругается на код, а точнее на цифру, копал в инете подобную проблему, накопал много но ничего не вышло, мб вы поможете!

    вот что пишет: Notice: Undefined offset: 0

    Помогите пожалуйста решить проблемку!

  27. 2l1k

    Ах черт понял, там у меня шерт код стоит, как таковой картинки нет в теле контент.

  28. Степан => автор блога

    Я так понял моя помощь вам уже не нужна?!

  29. Egor

    Добрый день!

    Моя версия новая wordpress 4.6.1 Сделал как написано. Ничего не вышло в анонсах, почему?

  30. Степан => автор блога

    Здравствуйте, Егор!
    У меня же вышло.
    Попробуйте внимательно все прочитать и сделать.

  31. Женя

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

  32. Степан => автор блога

    Почитайте вот эту статью “Добавление загрузчика изображений на страницу или записи WordPress

  33. Эдуард

    Код в файл functions.php я добавил, как у вас указано, в самый конец, перед ?>.

    А вот код, который вставлен в файл index.php:

    <?php
    /**
     * Theme Index Section for our theme.
     *
     * @package ThemeGrill
     * @subpackage ColorMag
     * @since ColorMag 1.0
     */
    get_header(); ?>
    
    	<?php do_action( 'colormag_before_body_content' ); ?>
    
    	<div id="primary">
    		<div id="content" class="clearfix">
    
    			<?php if ( have_posts() ) : ?>
    
    				<?php while ( have_posts() ) : the_post(); ?>
    				
    <img src="<?php echo bloggood_ru_image() ?>" alt="<?php the_title(); ?>"/>
    
    				<?php endwhile; ?>
    
    				<?php get_template_part( 'navigation', 'none' ); ?>
    
    			<?php else : ?>
    
    				<?php get_template_part( 'no-results', 'none' ); ?>
    
    			<?php endif; ?>
    
    		</div><!-- #content -->
    	</div><!-- #primary -->
    
    	<?php colormag_sidebar_select(); ?>
    
    	<?php do_action( 'colormag_after_body_content' ); ?>
    
    <?php get_footer(); ?>
    

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

  34. Степан => автор блога

    Удалите 20 строку и код поставьте сразу после:

    <?php else : ?>

    Строка №26
    Будет это выглядеть вот так:

    ...
             <?php if ( have_posts() ) : ?> 
                    <?php while ( have_posts() ) : the_post(); ?>             
                    <?php endwhile; ?>
                    <?php get_template_part( 'navigation', 'none' ); ?>
                <?php else : ?>
    <img src="<?php echo bloggood_ru_image() ?>" alt="<?php the_title(); ?>"/> 
                    <?php get_template_part( 'no-results', 'none' ); ?>
                <?php endif; ?>
            </div><!-- #content -->
        </div><!-- #primary -->
     ...
    

    Отпишитесь, поучилось ли, если не получилось, но напишите как и что вы сделали.

  35. Виталий

    Здравствуйте, а как вставить код:

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

    в конструкцию, например, такую:

    <?php
    global $post;
    theme_post_wrapper(
                    array(
                            'id' => theme_get_post_id(),
                            'class' => theme_get_post_class(),
                            'thumbnail' => theme_get_post_thumbnail(),
                            'title' => '<a href="' . get_permalink($post->ID) . '" rel="bookmark" title="' . strip_tags(get_the_title()) . '">' . get_the_title() . '</a>',
                            'heading' => theme_get_option('theme_' . (is_home() ? 'posts' : 'single') . '_article_title_tag'),
                            'before' => theme_get_metadata_icons('date,author,edit', 'header'),
                            'content' => theme_get_excerpt(),
                            'after' => theme_get_metadata_icons('category,tag,comments', 'footer')
                    )
    );
    ?>

    вместо функции

    'thumbnail' => theme_get_post_thumbnail(),

    В php, к сожалению, не разбираюсь.

  36. Степан => автор блога

    Здравствуйте,Виталий! Попробуйте сделать вот так, замените:

    'thumbnail' => theme_get_post_thumbnail(),

    на

    'thumbnail' => bloggood_ru_image(),

    Напишите результат.

  37. Виталий

    Здравствуйте, функция выводит адрес картинки с какой-то непонятной “t” site/image/name.jpg?t=1481225563.
    Я уже решил эту проблему разделением на две части кода php и в середину, между ними, вставил обычный код вызова изображения. Спасибо.

  38. Михаил

    Как только для первой картинке в посте установить свойства, например alt=”альтернативный текст”

  39. Степан => автор блога

    зачем Вам такое?

  40. nesnayka

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

    (document.querySelectorAll('.content img') + цикл с .alt = ''),
     а потом, если потребуется установит этот атрибут только для первой картинки 
    (document.querySelector('.content img').alt = 'что вам там нужно')
    
  41. Владимир

    Здравствуйте Степан. Скажите пожалуйста. Сделал, как написано в данной статье. Все картинки вставились. Но когда, что-то делаю с записью в Вордпрессе, консоль пишет ошибку:
    Warning: Cannot modify header information – headers already sent by (output started at E:\OpenServer\domains\mywordpress.loc\wp-content\themes\2lo.wp-loc\functions.php:24) in E:\OpenServer\domains\mywordpress.loc\wp-admin\includes\misc.php on line 1114
    Подскажите пожалуйста, как можно исправить?

  42. Степан => автор блога

    Здравствуйте, Владимир!
    А что у Вас в 24 строке в файле “functions.php”?

  43. Николай

    Здравствуйте! Виводит такую ошибку. Как правельно вставить код ??

  44. Степан => автор блога

    Здравствуйте, Николай.
    Это моя ошибка, справил.
    Там в коде не хватало “;”.
    У Вас это 11 строка.

    <img src="<?php echo bloggood_ru_image(); ?>" alt="<?php the_title(); ?>" width="250"/>
  45. Павел

    Здравствуйте, Степан! Делал все по Вашей инструкции, но картинка выводится не внутри анонса, а над ним, или под ним – в зависимости от того куда копирую код, либо после начала цикла, либо перед концом соответственно. Подскажите пожалуйста как это поправить? Вот исходный фрагмент:

     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    		<?php if ( !is_singular() ) : ?>
    			<?php get_template_part( 'loop', 'blog' ); ?>
    		<?php else : ?>
    			<?php get_template_part( 'loop', 'single' ); ?>
    		<?php endif; ?>
    
    	<?php endwhile; else: ?> 
  46. Степан => автор блога

    Здравствуйте, Павел!
    Попробуйте вместо этого кода вот этот:

    <?php if(have_posts()) : ?>
    <?php while(have_posts()) : the_post(); ?>
    <h2><a href="<?php the_permalink (); ?>"><?php the_title (); ?></a></h2>
    <p><?php the_excerpt (); ?> </p>				  
    <p><a href="<?php the_permalink (); ?>">Читать далее</a>
    <?php endwhile; ?>
    <?php endif; ?>
    

    + добавить для ОТРЫВКА в записях возможность вставлять картинки (читайте тут: Как добавить визуальный редактор для «Цитат (Отрывок)» – WordPress)

  47. Алекса

    День добрый. все получилось, в рубриках записи с первой картинкой, но зато и на главной их теперь по две.

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 809
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716