BloGGood.ru

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

До Нового Года осталось:

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

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

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

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

Как в анонсе вывести первую картинку поста на 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>

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

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

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

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

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

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

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Игорь Черноморец отвечает:

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

    Игорь Черноморец отвечает:

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

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

    Степан => автор блога отвечает:

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

  2. Елена

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

    Ответить

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

    Степан => автор блога отвечает:

    Здравствуйте, Елена! Текст в коде на русском, это комментарий. Его можно оставлять, это не как не влияет на работу кода.
    Куда вставлять код? Там же все написано.
    Этот код вставляете в файл «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(); ?>"/>
    

    Ответить

    Елена отвечает:

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

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  3. Елена

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

    Ответить

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

    Степан => автор блога отвечает:

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

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

    Ответить

    Елена отвечает:

    Вот файл index

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

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

    Ответить

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

    Степан => автор блога отвечает:


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

    Ответить

    Елена отвечает:

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  4. Игорь

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  5. Александр

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

    Ответить

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

    Степан => автор блога отвечает:

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

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

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

    Ответить

    Александр отвечает:

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

    Ответить

  6. Александр

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

    Ответить

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

    Степан => автор блога отвечает:

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

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

    в CSS:

    .image-post
    {
        width: 250px !important;
        float: left;
    }
    

    Ответить

  7. Александр

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

    margin: 7px 7px 7px 0;

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  8. 2l1k

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

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

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

    Ответить

    2l1k отвечает:

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  9. Egor

    Добрый день!

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  10. Женя

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

    Ответить

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

    Степан => автор блога отвечает:

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

    Ответить

  11. Эдуард

    Код в файл 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(); ?>
    

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

    Ответить

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

    Степан => автор блога отвечает:

    Удалите 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 -->
     ...
    

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

    Ответить

  12. Виталий

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

    <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, к сожалению, не разбираюсь.

    Ответить

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

    Степан => автор блога отвечает:

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

    'thumbnail' => theme_get_post_thumbnail(),

    на

    'thumbnail' => bloggood_ru_image(),

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

    Ответить

    Виталий отвечает:

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

    Ответить

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

;-) :| :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]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

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

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

3). Довести количество статей до 750

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

5). Создать книгу

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

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

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

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

Количество записей на блоге: 761
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4183