Всё о миниатюрах в wordpress
Почти во всех современных темах для wordpress есть возможность отображения миниатюр (превью) возле избранных статей или возле каждой. В тему wordpress миниатюры можно вставлять как минимум тремя разными способами, о которых я Вам и расскажу в этой статье. Я считаю, что использование миниатюр дает ряд преимуществ:
- Блог выглядит на много живее. А стандартным отображением статей на главной странице (несколько целых статей либо отрывков) уже никого не удивишь.
- Возрастает количество просмотров статей с миниатюрами.
- В некоторых случаях превью может сыграть бОльшую роль в привлечении внимания читателя, чем заголовок.
Этим постом я отвечу на вопрос, что делать, если вам всё же хочется использовать миниатюры, а темой это не предусмотрено. Не менять же ее на новую из-за этого.
Существует несколько способов вставки миниатюр в нужное место темы wordpress. Наверное самый старый способ – использование произвольных полей. В админке при написании нового поста вы можете добавить новое произвольное поле, например mini, и ввести адрес до картинки, которую вы хотите использовать, как миниатюру. После этого в нужном месте темы вставляем вот такой код:
<img src="<?php echo get_post_meta($post->ID, "mini", true);?>" />
Но у этого метода есть существенный недостаток. Чтобы вставить миниатюру нужно сначала обрезать / уменьшить картинку в каком-нибудь графическом редакторе, потом залить на хостинг и только потом ввести в произвольное поле адрес к ней. А если у вас на блоге уже есть много постов, то такую процедуру нужно будет проделать с каждым из них. По этому я считаю, что вставка картинки без произвольных полей на много удобнее.
На просторах интернета существует большое количество плагинов для вставки миниатюр.
- Hungred Post Thumbnail – очень функциональны плагин. Он прекрасно подойдет для тех, кто в PHP, HTML и CSS ни бум-бум. С помощью него можно загрузить миниатюру для каждого поста прямо из админки (жаль нет функции обрезки), выбрать миниатюру по умолчанию, назначить миниатюры, которые будут отображаться в случайном порядке и др. Вид и размер отображаемых миниатюр так же можно назначить в админке. Единственный недостаток данного плагина – отсутствие возможности вставить код для отображения миниатюры вручную. Плагин сам вставляет код перед вот такой строчкой в вашем шаблоне:
<?php the_excerpt(); ?>
Но если отрывок статьи выводится по-другому, то миниатюра не вставится. Так же из-за этого невозможно обернуть код вывода миниатюры в какой-нибудь div, чтобы с помощью CSS изменить положение миниатюры относительно текста.
- WP Post Thumbnаil – хорошая альтернатива предыдущему плагину. С его помощью можно загружать картинки из админки и сразу же их обрезать. Но, к сожалению, он поддерживает только картинки в формате .jpeg и по этому не избавляет от необходимости, пусть не всегда, но всё же пользоваться графическим редактором.
- WP Choose Thumb – позволяет выбрать, какую из картинок, загруженных для определенного поста, отображать в качестве миниатюры. Правда обрезает изображения плагин сам и если они не квадратные, то миниатюра получается просто квадратным куском, вырезанным из картинки. По этому для каждого поста придется загружать по отдельной квадратной картинке.
- Simple Post Thumbnails – на самом деле простой плагин. В настройках можно установить размеры превью и выбрать миниатюру по умолчанию, а уже при написании поста загрузить изображение. Плагин сам его уменьшит до заданного вами размера, сохранив при этом пропорции.
Код отображения миниатюр в трех последних плагинах нужно вставлять в шаблон вручную.
Есть еще и третий способ. Его суть в том, чтобы с помощью простой PHP функции извлечь из поста 1-ю картинку, уменьшить её до заданных размеров, сохранив пропорции, и вставить в качестве миниатюры. Такой способ подсказал мне Димокс, любезно предоставив следующий код:
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)) $size = getimagesize($first_img);
$imageWidth = $size[0];
if ($imageWidth > 170) $imageWidth = 170;
$post_title = $post->post_title;
$post_title = str_replace('"', '\'', $post_title);
if(empty($first_img)) {
return '';
} else {
if ($imageWidth > 80) return '<img src="'.$first_img.'" width="'.$imageWidth.'" alt="'.$post_title.'" class="alignleft" /> ';
}
}
Этот код нужно вставить в файл functions.php вашей темы.
Цифра 170 – это ширина, которая будет поставлена у картинки, а 80 – это минимальная ширина картинки, чтобы она вывелась функцией. Эти цифры можно изменить в зависимости от того, куда вы будете вставлять миниатюру.
В шаблон нужно вставить следующий код:
<?php echo catch_that_image(); ?>
На этом первая часть поста заканчивается. В следующей части я подробно напишу, как вставить код отображения миниатюры в wordpress шаблон и как это всё красиво оформить.
Upd 02.11.2009: Всё о миниатюрах в wordpress часть 2.
Вот тут вы можете купить туфли оптом по доступным ценам!
Прив хорошая статья, к сожалению Я с WP работаю совсем не давно и ещё не очень разобрался в терминах, разъясни пожалуйста, вот например Я пишу новости как на своём блоге Обои с девушками пишу так:
Возможно ли как например в этой теме http://wp-genius.solostreamsites.com/ сделать так что бы картинка из моего поста отображалась там в виде превью и была бы так же началом к моему сообщению в блоге?
Если что то тема на скачивание этой темы:
Зарание спасибо
Когда ты скачаешь и установишь эту тему, то в ней уже будет встроена возможность отображения миниатюр, как в демо версии по адресу http://wp-genius.solostreamsites.com/
Ну это Я понял, просто не понятно когда эту миниатюру вставлять при написание новости или она сама берётся из контента.
Это уже зависит от конкретной темы. В админке в разделе написания новой заметки внимательно посмотри, нет ли там специального окна для загрузки миниатюры. Если нету, то наверняка как миниатюра будет использоваться 1-е изображение из статьи.
Спасибо! Никак не могла разобраться как вставлять миниатюры в различных “журнальных” темах (( Попробую эти плагины.
Спасибо, а то замучился уже методом тыка искать эти миниатюры в коде
Автору спасибо! Весьма полезная статейка для начинающего ВП-вебмастера…
Меня заинтересовала миниатюра с произвольными полями, а как сделать так чтобы первая картинка которую добавляют в пост (через загрузчик либо ссылкой) выводилась как миниатюра.
Заранее спасибо.
P.S. не капли не похож на web2.0 и css3 =\
Внимательно читайте договор! :read:
Самый последний способ с использованием PHP функции как раз то, что Вам нужно.
На счет web 2.0 и CSS3 не понял.
Сохранили нам кучу времени, спс.
Нормальная подборка. Но разве нельзя просто вставить картинку и выделя ее менять ее размер. А насчет обрезать так можно юзать и фотошоп
Ещё раз извините, я про способ самый последний) работает на половину если не пишу функцию вызова, с ней ошибка и все рушается. а без неё место картинки серое пятно и показывает ошибку к пути картинки что я делаю не так если закачивал картинку при помощи встроенного загрузчика и сама функция должна его находить, ещё шняга в том что и в после картинка тоже … ну местонеё серый фон=\ подскажите пожалуйста.
Свяжитесь со мной по skype: yan-rich, в комментариях общаться не удобно, да и смотреть нужно.
Куча ошибок в коде, ни ничего не работает
Ошибок нет, всё работает. Что конкретно не получается?
скопируй код с блога в любой php редактор и увидишь, что код не рабочий
Да, был косяк, видимо wordpress код испоганил. Поправил, теперь всё ок.
Здравствуйте, Ян!
Я хочу сделать видеоблог (видео хочу вставлять с youtube и подобных видеохостингов) и вставлять превью миниатюру видео примерно как здесь judovision.org.
Подскажите каким способом добиться такого же.
Заранее благодарю!
Если честно, то видео на wordpress не занимался, нужно разбираться, а еще проще – спросить у админа вышеупомянутого сайта.
Здравствуйте.
Хочу залить на одну из страниц сайта 6 картинок в 2 ряда (по 3 картинки в каждом ряду)
Но когда начинаю загружать картинки на страницу, то они у меня становятся друг под другом в столбик и никак не хотят становится рядом друг с другом.
Что нужно сделать и каким плагином лучше воспользоваться, что бы можно было ставить картинки рядом друг с другом?
Спасибо.
Можете использовать таблицу, например так:
Или просто к картинкам, которые должны находиться слева, добавьте style=”float:left;”, справа style=”float:right;”
Пример:
Подскажите пожалуйста, если это возможно при варианте брать миниатюру первую картинку в посте, как сделать чтобы брал не только параметры ‘.$post_title.’ , ‘.$imageWidth.’ и ‘.$first_img.’ но и class данной картинки
В кодексе этой инфы не нашел. Нужно лезть в ядро wordpress и искать, какой параметр выводит класс картинки.
уже нашел другой способ для задуманных целей. спасибо.
да кстати на вашем сайте как только заходиш секунды 2-3 и выкидывает на страницу гугля, и так постоянно, приходится загрузку страницы останавливать чтобы спокойна коммент написать )
Спасибо, вы уже второй человек, кто мне об этом сказал. Только вот что бы это могло быть…
Супер, спасибо большое за последний вариант, как раз то что искал.
Подскажите, как реализовать миниатюры в виде ссылок на пост. Заранее спасибо