Миниатюры WordPress

Выводим миниатюры WordPress автоматом.

Сегодня мы с вами рассмотрим один из способов вывода миниатюр в WordPress. Стоит сказать что способов вывода миниатюр существует много. Но лично мне нравится один(используется на этом блоге), который делает все автоматически. Один раз настроив скрипт вы больше не озадачиваетесь этим вопросом.

Хочу сказать что этот способ используется на очень многих блогах, и при его использовании ваша страница с постами выглядит очень красиво и привлекательно для посетителей.

И так что это за способ? Все очень просто мы используем для вывода миниатюр скрипт TimThumb, который можно скачать вот с этой страницы. Файл называется timthumb.php.

Скачайте этот файл и установите его в папку вашего шаблона WordPress, который используете в данный момент.

После этого вам необходимо добавить в файл функций(functions.php) этого шаблона следующую функцию:

function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;  

$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);

}
if(stristr($image[$num],'<img')) { echo $imgThumb; }
$more = 0;
}

Следующее, что вам надо сделать — это добавить в файлы где вы хотите выводить миниатюры, например index.php и archive.php вот этот код:

<div class="thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php getImage('1'); ?>&w=125&h=125&zc=1">
</a>
</div>

Где w=125 и h=125 это размер миниатюры выводимой на соответствующую страницу WordPress блога.

И в завершении нужно добавить в свой файл стилей style.css стили для оформления вашей миниатюры. Ну например такой:

.thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#fcfcfc; width:150px; height:150px; margin:5px 5px 0 0;}
.thumbnail a:hover, .thumbnail a:active {background:#acacac;}

Вот и все, теперь при добавлении в пост картинки скрипт будет автоматически создавать миниатюру и выводить ее на соответствующих страницах WordPress.

Удачи Вам и процветания!

P. S. Скрипт выводит первую картинку поста и сам ее форматирует, поэтому чтоб избежать искажения картинки, желательно чтобы она была квадратная.

• Публикации автора
• Рекомендую к прочтению
• Задать вопрос автору

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

Меня зовут Александр.
Я Вебмастер и SEO — специалист по созданию и продвижению сайтов на WordPress.
В профессиональном интернет-маркетинге c 2007 года. Основные направления: создание и продвижение web-проектов в российском сегменте интернет. Специализация: создание сайтов и их комплексное продвижение, внутренняя оптимизация, внешняя оптимизация, трафиковое продвижение, контентное продвижение...

Связаться со мной >>

• Установка WordPress на хостинг - 11.05.2017
• Хостинг для WordPress - 26.04.2017
• 7 советов как ускорить WordPress - 18.01.2017
• WordPress плагины вывода популярных постов - 25.07.2016
• Готовим ваш сайт для мобильных устройств? - 29.06.2016

Посмотреть все публикации

Как преодолеть технические сложности

Javascript + jQuery для начинающих

Профессиональный сайт за один день.

Ваше имя (обязательно)

Ваш e-mail (обязательно)

Сообщение (обязательно)

"Поставьте галочку, если вы не робот"

и решите пример 19-13= ответ буквами

Δ