Совмещение миниатюр и скрипта первой картинки поста
Сегодня хочу поделиться небольшим хаком (методом) для отображения картинок постов блога на главной и страницах архивов. Реализовать это можно по разному. Не будем рассматривать вариант, когда текст поста в цикле выводится через функцию the_content() — тогда все картинки в начале статьи отображаются в блоге по умолчанию. Есть еще 2 ситуации — во-первых, это, конечно, миниатюры для постов (если начинаете новый проект, рекомендую использовать именно его) и, во-вторых, специальный скрипт для автоматического получения первой картинки поста. Второй вариант полезен для возрастных блогов со множеством статей, для которых нужно украсить страницы архивов и главную. Предлагаю эти 2 варианта совместить.
Собственно с данной ситуацией я столкнулся при усовершенствовании блога Вебдванольные заметки. Ему уже несколько лет, поэтому просматривать все посты (более 500) и делать для каждого из них красивую миниатюру, либо расставлять в тексте ссылку more — слишком неэффективный вариант. Поэтому я воспользовался скриптом для получения первой картинки поста. Для этого в файл functions.php добавляем:
function catch_that_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)){ //Defines a default image $first_img = ""; } return $first_img; } |
Дальше в файл отображения архивов категорий archive.php или index.php поместим что-то вроде:
<div class="post-image"> <div style="border:1px solid #4a4a4a; height: 112px; padding: 2px;"> <div class="tumbr" style="border: 1px solid #333; width: 230px;height: 165px;background: url(<?php if(catch_that_image() != '') { echo catch_that_image(); } else { ?>http://www.web2me.ru/files/no-image.gif<?php } ?>) 0 0 no-repeat;"> </div> </div> </div> |
Для post-image можете добавить обтекание по краю float: left. После данных правок страница категорий стала выглядеть следующим образом:
В чем собственно проблема. Как уже сказал выше, считывается первая картинка поста — в случае с MarkDay она достаточно большая и заполняет всю область поля с изображением. В нижнем посте — наоборот, картинка маленькая и в итоге выглядит все мягко говоря некрасиво. А если у вас серьезный профессиональный блог, то еще и стыдно должно за такое быть.
Я предлагаю решить задачу добавив для подобных (отображаемых криво) постов поддержку миниатюр. Итак, что нужно сделать:
1. Заходим в файл functions.php и размещаем там в любом месте код активации миниатюр (если его нет):
if ( function_exists( 'add_theme_support' ) ) add_theme_support( 'post-thumbnails' ); |
2. Дальше открываем archive.php или index.php, находим место где был код предыдущего скрипта, описанного выше, и преобразуем его в следующий вид:
<div class="post-image"> <?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(230,1500), array('class' => 'post_thumbnail')); } else { ?> <div class="tumbr" style="border: 1px solid #333; width: 230px;height: 165px;background: url(<?php if(catch_that_image() != '') { echo catch_that_image(); } else { ?>http://www.web2me.ru/files/no-image.gif<?php } ?>) 0 0 no-repeat;"></div> <?php } ?> </div> |
С помощью этого хака было добавлено условие — если у поста есть миниатюра, тогда она будет показана. Иначе система найдет и покажет первую встречную картинку в статье. Если же и это не поможет, тогда выводится «пустое» изображение (у меня находится здесь — http://www.web2me.ru/files/no-image.gif, для вашего проекта поставьте другой путь).
После этого остается только нарисовать в фотошопе подходящую картинку для статьи, которая бы по размерам подходила для шаблона. Дальше открываем нужный пост для редактирования, загружаем в текстовом редакторе картинку и указываем «Использовать в качестве миниатюры». В итоге получится такая страница категорий:
Согласитесь смотрится получше предыдущей. При этом данная миниатюра никак «не испортит» статью при полном ее отображении — там картинки выводятся как и прежде. Превьюшки будут только на страницах архивов категорий, тегов, а также главной — в общем в какие файлы шаблона добавите там и отобразится.
UPDATE 9.02.2015. Данное решение можно назвать «слегка топорным», но мне не хотелось заниматься установкой миниатюр для прошлых постов (которых на сайте немало). Чуть позже я нашел плагин Auto Post Thumbnail позволяющий быстро просмотреть прошлые посты и установить им соответствующие миниатюры. Мне кажется лучше пойти несколько иным путем, нежели описанном в посте — сначала автоматически создаете миниатюры, а потом выводите их обычным способом в шаблоне.
P.S. Сейчас многие оптимизаторы решили участвовать в конкурсе SEOCAFEинфошность — своего рода проверка имеющихся знаний по продвижению.
комментария 23 к статье “Совмещение миниатюр и скрипта первой картинки поста”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Оптимизируем WordPress header и удаляем лишний код
(5,19 из 7, голосов - 43)
- Как создать пункт меню без ссылки в wordpress
(6,39 из 7, голосов - 23)
- Добавление кнопки Вконтакте, Facebook и Twitter в wordpress блог
(6,14 из 7, голосов - 21)
- Выполнение jQuery скриптов при выборе вариаций товаров в WooCommerce
(3,96 из 7, голосов - 26)
- Хаки для вариаций товаров в WooCommerce
(5,29 из 7, голосов - 17)
- Вывод текста в блоге только на главной
(6,85 из 7, голосов - 13)
- Как убрать category в WordPress категориях — зачем это делать, плагины для реализации
(5,31 из 7, голосов - 16)
![Загрузка ... Загрузка ...](https://wpinsideblog.com/wp-content/plugins/wp-polls/images/loading.gif)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
- Для каких проектов нужна аренда виртуального сервера и что такое VPS
- Особливості MMORPG ігор (зокрема Lineage 2) та чому люди в них грають
а не проще использовать перед
the_content();
функцию
the_post_thumbnail();
http://codex.wordpress.org/Function_Reference/the_post_thumbnail
Здравствуйте!
У меня вопрос: как сделать так, чтобы выводилась не верхняя часть картинки, а середина из нее?
Спасибо!
К этим вариант у меня есть ещё одна идея, которая решит все проблемы и все картинки красиво выведет, но я её пока не реализовал.
Нужно написать функцию:
1.Проверяет есть ли миниатюра у поста, если есть — выводит;
2. Если миниатюры нет, то из первой картинки в посте создает миниатюру и соответственно её выводит;
3. Если нет миниатюры и нет картинок в посте, то выводит заготовленную картинку «Изображение отсутствует».
Возможно вам удастся это реализовать.
mixer, как я уже сказал в статье, в блоге у меня уже было 500 записей, для каждого из них рисовать миниатюру — это день убить, если не больше. Функцию the_post_thumbnail() я как раз и использую, но в сочетании с другим методом.
Сергей, фактически в посте именно об этом и рассказывается)) Просто во втором пункте у меня выводится картина, а не «создается миниатюра», не знаю можно ли в wordpress вообще такое сделать.
Stiler, поскольку скриптом картинка выводится через свойство background, то возможно можно как-то с ним «поэкспериментировать», задавая смещение по 50%. Я лично не пробовал.
Tod, А не подскажете как это можно сделать?
Stiler, ну это в css свойство background-position, более точно не подскажу, т.к не пробовал сам)
Спасибо! Скоро, думаю пригодится.
Вообще круто, спасибо….
Благодарю за статью, помогла решить поставленные задачи :) Дополню только один момент:
Если нужно вывести не любую часть картинки через background, а нужно её полное отображение, то стоит добавить в строку
код «background-size: 100%;»
(Вариации на тему w3schools.com/cssref/css3_pr_background-size.asp)
MrGoodNews, спасибо за дополнение данного решения.
Спасибо за интересный пост. Скажите, а можно как-то сделать, чтобы в случае, если нет ни миниатюры, ни единственной картинки — показывалась не «картинка-заглушка» (как у вас http://www.web2me.ru/files/no-image.gif ) — а вообще ничего не показывалось. Можно ли так сделать?
подскажите где вставить этот код ?
<div class="tumbr" style="border: 1px solid #333; width: 230px;height: 165px;background: url(http://www.web2me.ru/files/no-image.gif) 0 0 no-repeat;»>
Уже все перепробовал в своем файле когд у меня следующий.
<?php
if (have_posts()){
global $posts;
$post = $posts[0];
ob_start();
if (is_category()) {
echo '’. single_cat_title( », false ) . »;
echo category_description();
} elseif( is_tag() ) {
echo ». single_tag_title(», false) . »;
} elseif( is_day() ) {
echo ». sprintf(__(‘Архивы за день: %s’, THEME_NS), get_the_date()) . »;
} elseif( is_month() ) {
echo ». sprintf(__(‘Архивы за месяц: %s’, THEME_NS), get_the_date(‘F Y’)) . »;
} elseif( is_year() ) {
echo ». sprintf(__(‘Архивы за год: %s’, THEME_NS), get_the_date(‘Y’)) . »;
} elseif( is_author() ) {
the_post();
echo theme_get_avatar(array(‘id’ => get_the_author_meta(‘user_email’)));
echo ». get_the_author() . »;
$desc = get_the_author_meta(‘description’);
if ($desc) echo » . $desc . »;
rewind_posts();
} elseif( isset($_GET[‘paged’]) && !empty($_GET[‘paged’]) ) {
echo ». __(‘Архивы блога’, THEME_NS) . »;
}
theme_post_wrapper(array(‘content’ => ob_get_clean(), ‘class’ => ‘breadcrumbs’));
/* Display navigation to next/previous pages when applicable */
if (theme_get_option(‘theme_top_posts_navigation’)) {
theme_page_navigation();
}
/* Start the Loop */
while (have_posts()) {
the_post();
get_template_part(‘content’, get_post_format());
}
/* Display navigation to next/previous pages when applicable */
if (theme_get_option(‘theme_bottom_posts_navigation’)) {
theme_page_navigation();
}
} else {
theme_404_content();
}
?>
<?php wp_get_footer();
Сергей, если я правильно понял, то вам нужно искать файл шаблона с «content» в названии… это новый тип шаблонов с кучей файлов. Для отображения постов вызывается другой файл шаблона get_template_part(‘content’, get_post_format());
Здравствуйте. У меня в анонсе записи сейчас стоит миниатюра, когда открываю запись — она же открывается, только чуть-чуть большего размера. Когда я в запись добавляю большую картинку помимо миниатюры, то окрыв запись — там 2 картинки: и миниатюра и большая — все вместе. Скажите, пожалуйста, а как сделать, чтобы в анонсе картинка была как миниатюра, а открыв запись — эта же миниатюрная картинка увеличивалась до полного размера или до указанного размера. Спасибо
Татьяна, можно просто убрать отображение миниатюры на странице с полной новостью (single.php), таким образом сможете добавить в пост картинку любого размера и куда угодно.
Здравствуйте, при вводе кода в functions.php, выдает такую ошибку:
Fatal error: Cannot redeclare catch_that_image() (previously declared in Z:\home\mysite.local\www\wp-content\plugins\featured-post-with-thumbnail\index.php:59) in Z:\home\mysite.local\www\wp-content\themes\mythem\functions.php on line 39
Помогите разобраться пожалуйста, и еще, картинки к постам расположены не в библиотеке, а в папках в корне сайта, имеет ли это значение. Заранее благодарен.
Игорь, сложно что-то подсказать, я так понимаю скрипт конфликтует с плагином featured post with thumbnail. Вообще это было достаточно «топорное решение» потому как сайт давно наполнялся и не хотелось заниматься установкой миниатюр для прошлых постов. Это уже потом я нашел плагин Auto Post Thumbnail который позволяет выполнить задачу за минуту. Поэтому я советую создать миниатюры для всех постов, а потом выводить их обычным способом в шаблоне.
Здравствуйте.
Подскажите пожалуйста, как адаптировать данную функцию под мои стили. Я плохо понимаю синтаксис php, и так и не смог найти место в коде, где нужно дописать условие вывода первого изображение поста.
<div class="loop-thumbnail-overlay" style="»>
theNN, картинка отображается, как правило, рядом с функцией вывод контента поста — the_content или the_excerpt. Ищите их в archive.php или index.php или category.php.
Здравствуйте! Для каждого поста вставляю миниатюры размером 290 х 290, созданные вручную в фотошопе — так «кривые» картинки не выскакивают. В последующих постах собирался вставить миниатюры размером 450 х 290 для улучшения внешнего вида страницы, но все равно появляется искаженная миниатюра 290 х 290 (сплюснутая). В Мозилле запрашиваю информацию об этой картинке (миниатюре) и получаю ответ: Размеры: 450px × 290px (в масштабе 290px × 290px). Значит где-то осталось правило для вывода превьюшки 290 х 290. Установка размера миниатюры 450 х 290 в аминке (настройки медиафайлы) ведет к растяжению миниатюр по всем статьям сайта. Есть ли решение этой задачи? Спасибо.
P. S. Вопросы коммерческого характера, если таковые возникнут, можно решить в приватной беседе.
Анатолий, я бы поискал в файлах шаблона функцию the_post_thumbnail, возможно, в ней действительно жестко задано выводить 290х290 картинки, и любые настройки в админке в таком случае не сыграют роль в отображении. Советую использоват утилиту WinGrep (если у вас винда). Если проблема не в этом, то тут нужно изучить макет, «на словах» мне сложно сориентироваться.
Здравствуйте. Подскажите пожалуйста в моей теме миниатюры выводятся с библиотеки а в пост после захода на статью картинки в полный рост нет. Какой мне выполнить пункт . Заранее спасибо
Валерий, если я правильно понял суть вопроса, вам просто нужно вручную добавлять в текст статьи картинки, которые вы хотите там видеть — это максимально простой и универсальный вариант.