Вы наверняка заметили, что на блогах, в основном на главной странице, выводятся анонсы записей. И к каждому анонсу подбирается привлекательная картинка. Это хороший способ привлечь посетителя и соблазнить его прочитать статью.
Чтобы вывести картинку в анонсах, можно воспользоваться функцией, которую предлагает 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>
Это все! Спасибо за внимание! И не стесняйтесь жать на кнопки социальных сетей, которые размещены чуток ниже .
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329385 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274099 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 218697 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186296 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 176785
47 Ответов на комментарий - Как в анонсе вывести первую картинку поста на WordPress
Добавить комментарий
Метки: wordpress, без плагинов
Привет Степан! Ты имеешь в виду анонсы, которые подписчики получают по почте через сервис Фидбёрнер?
Привет, Игорь! Нет, не те анонсы что приходят по почте через сервис Фидбёрнер. Я имел в виду анонсы которые размещены на сайте! Краткое описание статьи с кнопкой читать далее. Так как у тебя или у меня на главной странице.
Ну тогда я совсем запутался
Разве это не делается прямо через редактор, при написании самой статьи? Зачем добавлять коды в разные файлы? Не понимаю!
Игорь, тебе повезло, так как в твоей теме уже стоит этот код. Есть такие темы когда этого кода нет и приходиться до каждой статьи вставлять миниатюры! Еще, если создавать самому темы (шаблоны) для WordPress, такой возможности выводить первую картинку в анонсе не будет, если не прописать этот код.
Степан, вот сейчас всё понятно!!!
Но, в любом случае, я думаю, что легче добавить просто миниатюру! А вот для тех, кто сами создают темы, так для них эта информация как на вес золота! Спасибо!
Видишь, Игорь, миниатюры нужно добавлять в ручную, а здесь вместо миниатюры выводиться автоматически первая картинка из статьи. Экономия времени.
Спасибо, Игорь, за комментарий.
Спасибо огромное! Только я не поняла -русский текст тоже вставляем в файлы сайта? Или Вы это для нас комментарии. а вставлять не надо . И не совсем понятно куда именно вставлять до хеддера . ведь в этих файлах уже есть какой то текст
Вообщем, у меня весь сайт поехал.
Здравствуйте, Елена! Текст в коде на русском, это комментарий. Его можно оставлять, это не как не влияет на работу кода.
Куда вставлять код? Там же все написано.
Этот код вставляете в файл «functions.php» в самом конце перед знаком «?>»
Этот код вставьте в файл «index.php» между циклом
а вы размер картинкам указали?
Вот в index не совсем понятно куда вставлять . между каким циклом? размер указала, как у Вас .
И еще Вы не знаете что за глюк такой после обновления wordpress – не работает кнопка “вставить медиафайл”?
Вот файл index
после какой конкретно строки ?
я вчера вставила перед
и у меня исчезли все посты с сайта
Насчет глюка, у меня такого не было! Но попробуйте зайти в админ-панели “Консоль” => “Обновления”. В обновлении WordPress нажмите на кнопку “Переустановить”. Может поможет.
Вместо 13 строки
Спасибо большое !!!
Пожалуйста!!!
Подскажите как сделать чтобы бралась уменьшенная картинка
в вордпрессе три вида картинок по умолчанию при добавлении – маленькая (обычно 150х150) средня ну и большая
как сделать чтобы бралась сюда именно маленькая ?
это нужно если чтобы вес страницы не огромный был, показывает то уменьшенные большие картинки
Самый легкий способ:
когда добавляете картинки “Добавить медиафайл”, выберите нужный вам размер “НАСТРОЙКИ ОТОБРАЖЕНИЯ ФАЙЛА” => “Размер”.
Я вас правильно понял?
Здравствуйте, все получилось, остался только вопрос, как выровнять по центру? и еще вопрос, зачем там прописан ваш домен?
Здравствуйте, Александр!
Сделать по центру:
Читайте здесь
“зачем там прописан ваш домен?” – так назвал php-функцию.
Читайте про функции здесь
Спасибо, за оперативный ответ, все понятно.
Добрый день. Все получилось. Спасибо. Только значения width толку не дают. Выводится в анонсе тот размер картинки, который выставлен в самом посте.
И еще вопросик… Как сделать чтобы в анонсе текст начинался не под картинкой, а справа от нее? Как бы огибал
Здравствуйте, Александр!
Попробуйте так:
в CSS:
Спасибо. Все как надо… добавил еще:
Чтобы симпатичнее выглядело
Еще раз спасибо
Пожалуйста, Александр!
Не сработало! Ругается на код, а точнее на цифру, копал в инете подобную проблему, накопал много но ничего не вышло, мб вы поможете!
вот что пишет: Notice: Undefined offset: 0
Помогите пожалуйста решить проблемку!
Ах черт понял, там у меня шерт код стоит, как таковой картинки нет в теле контент.
Я так понял моя помощь вам уже не нужна?!
Добрый день!
Моя версия новая wordpress 4.6.1 Сделал как написано. Ничего не вышло в анонсах, почему?
Здравствуйте, Егор!
У меня же вышло.
Попробуйте внимательно все прочитать и сделать.
Не подскажите как вывести изображение из статьи вместо миниатюр. Вместо них пустое поле для картинки. Пробовал сделать по Вашим советам, но что-то ничего не получается. Уже несколько дней мучаюсь …
Почитайте вот эту статью “Добавление загрузчика изображений на страницу или записи WordPress“
Код в файл functions.php я добавил, как у вас указано, в самый конец, перед ?>.
А вот код, который вставлен в файл index.php:
Но на главной странице в анонсе опубликованной записи у меня никакая картинка не выводится!
У меня в сам пост, в саму запись сверху вставлено изображение. И, как я понимаю, с помощью вашего кода должно выводится это изображение в анонсе поста. Почему этого не происходит?
Удалите 20 строку и код поставьте сразу после:
Строка №26
Будет это выглядеть вот так:
Отпишитесь, поучилось ли, если не получилось, но напишите как и что вы сделали.
Здравствуйте, а как вставить код:
в конструкцию, например, такую:
вместо функции
В php, к сожалению, не разбираюсь.
Здравствуйте,Виталий! Попробуйте сделать вот так, замените:
на
Напишите результат.
Здравствуйте, функция выводит адрес картинки с какой-то непонятной “t” site/image/name.jpg?t=1481225563.
Я уже решил эту проблему разделением на две части кода php и в середину, между ними, вставил обычный код вызова изображения. Спасибо.
Как только для первой картинке в посте установить свойства, например alt=”альтернативный текст”
зачем Вам такое?
Михаил, Реализация зависит от структуры вашего поста и наличия в самом вордпрессе тех или иных плагинов, работающих с картинками.
Но проще всего это сделать при помощи JS.
В конце поста выведите JS код, который в случае наличия этих атрибутов у других картинок, кроме первой, соберет все картинки из блока content и уничтожит атрибуты у всех, кроме первой
Здравствуйте Степан. Скажите пожалуйста. Сделал, как написано в данной статье. Все картинки вставились. Но когда, что-то делаю с записью в Вордпрессе, консоль пишет ошибку:
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
Подскажите пожалуйста, как можно исправить?
Здравствуйте, Владимир!
А что у Вас в 24 строке в файле “functions.php”?
Здравствуйте! Виводит такую ошибку. Как правельно вставить код ??
Здравствуйте, Николай.
Это моя ошибка, справил.
Там в коде не хватало “;”.
У Вас это 11 строка.
Здравствуйте, Степан! Делал все по Вашей инструкции, но картинка выводится не внутри анонса, а над ним, или под ним – в зависимости от того куда копирую код, либо после начала цикла, либо перед концом соответственно. Подскажите пожалуйста как это поправить? Вот исходный фрагмент:
Здравствуйте, Павел!
Попробуйте вместо этого кода вот этот:
+ добавить для ОТРЫВКА в записях возможность вставлять картинки (читайте тут: Как добавить визуальный редактор для «Цитат (Отрывок)» – WordPress)
День добрый. все получилось, в рубриках записи с первой картинкой, но зато и на главной их теперь по две.