Уроки WordPress

Если вы ведете новостной сайт, очень красиво когда для отдельной новости используется иллюстрация большого размера, в анонсах используются миниатюры, а для горячих новостей — картинки средней величины. Сейчас многие, в особенности премиум-темы, оснащены автоматическим ресайзингом картинок с использованием произвольных полей и скрипта TimThumb PHP Script.

Но такое решение кажется мне не совсем оправданным.

Во-первых, зачем генерировать дополнительные картинки «на лету», если WordPress уже имеет встроенную функцию авторесайзинга, и достаточно задать один раз интересующие нас размеры для миниатюр, средних и больших изображений.

Во-вторых, если у вас уже есть 200 и более записей, сложно указать для каждой произвольное поле с картинкой.

В-третьих, данный скрипт порой сложно заставить работать.

Рассмотрим два альтернативных решения с использованием плагина и без него.

Плагин Justin Tadlock’s Get the Image

Более оптимальным мне кажется использование плагина Justin Tadlock’s Get the Image, который не генерирует заново картинки, а просто выводит уже существующие.

Благодаря этому плагину можно:

1. Использовать как произвольные поля, так и просто добавленные к записи изображения.

2. Указывать какой размер по-умолчанию должен использоваться для картинок. Скрипт ищет созданные WordPress миниатюры, если не найдено никаких изображений в произвольных полях. Вы можете использовать значения “thumbnail,” “medium,” «large» или “full” (варианты картинок, которые генерирует WordPress).

3. Если вообще никаких картинок не найдено, будет показана картинка, которая лежит в папке “/wp-content/my-image.jpg.”

Противопоказанием к использованию этого плагина может быть только то, что когда-то в будущем вы захотите абсолютно переработать дизайн, и вас не будут устраивать размеры изображений, которые вы выставили когда-то в настройках WordPress, ведь тогда придется заново генерировать все изображения.

У вас есть много вариантов вызова картинки с помощью плагина в файлах вашей темы.

Самый простой:

<?php if ( function_exists ( 'get_the_image' ) ) { get_the_image (); } ?>

При этом по-умолчанию будут использованы следующие параметры:

$defaults = array (
'custom_key' => array ( 'Thumbnail', 'thumbnail' ),
'attachment' => true,
'default_size' => 'thumbnail',
'default_image' => false,
'order_of_image' => 1,
'link_to_post' => true,
'image_class' => false,
'image_scan' => false,
'width' => false,
'height' => false,
'echo' => true
);

custom_key

Отвечает за произвольные поля, которые вы используете. Помните, что ключи произвольных полей чувствительны к регистру (по-умолчанию плагином используются ключи произвольных полей Thumbnail и thumbnail).

attachment

Скрипт будет искать изображения, прикрепленные к статье (по-умолчанию true).

default_size

Относится к размеру картинок по-умолчанию, если произвольное поле не найдено. Как я уже говорила выше, вы можете выбрать thumbnail, medium, large (WP 2.7+), или full (по-умолчанию thumbnail).

default_image

Будет вызывать изображение по указанному адресу, если других изображений не найдено (по-умолчанию отключено).

order_of_image

Вы можете выбрать не только первое изображение, но и любое другое, прикрепленное к статье.

link_to_post

Должна ли ссылка с изображения вести на статью (по-умолчанию true).

image_class

Вы можете добавить специальный класс для изображений, чтобы оформить их с помощью CSS.

image_scan

Если true, скрпит будет искать прикрепленные к статье изображения. Не совсем понятно, в мануале сказано, что по-умолчанию используется false, но на самом деле, если даже использовать стандартный код <?php if ( function_exists( 'get_the_image' ) ) { get_the_image(); } ?>, скрипт прекрасно выводит прикрепленные изображения, если не найдены конкретные произвольные поля. Возможно просто разработчики не обновили мануал.

width

Ширина выводимого изображения.

height

Высота выводимого изображения.

echo

Если true, изображение показано на странице. Если false, изображение будет возвращено для использования его в ваших собственных функциях (по-умолчанию true).

Несколько примеров использования

1. Если нам надо, чтобы скрипт сначала брал изображения в произвольном поле Thumbnail, затем, если ничего не найдено в My Thumbnail, и если картинок в произвольных полях нет, выдавал миниатюру прикрепленной к записи картинки используем код ниже. Вместо thumbnail можно указать medium и т.д. для вывода другого размера. Если же никаких картинок не найдено, будет показана картинка /wp-content/my-image.jpg.

<?php if ( function_exists ( 'get_the_image' ) ) { get_the_image (array ('Thumbnail','My Thumbnail'),'thumbnail','/wp-content/my-image.jpg'); } ?>

2. Вывод второго по счету прикрепленного изображения.

<?php if ( function_exists ( 'get_the_image' ) ) { </code><code>get_the_image ( array ( 'order_of_image' => 2 ) ); } ?>

3. Заставляем картинку ссылаться на статью, для этого вместо

echo get_the_image (array ('Thumbnail','My Thumbnail'),'thumbnail');

используем

echo get_the_image_link (array ('Thumbnail','My Thumbnail'),'thumbnail');

Без использования плагина

При разработке тем использование сторонних плагинов неудобно.

Поэтому можно использовать упрощенный вариант, на основе этого решения. Заметьте, что для использования этой функции, изображение действительно должно быть вставлено в запись, а не просто загружено в медиа-библиотеку, в отличие от предыдущего плагина.

В файле functions.php добавляем следующий код:

/*
replacement function for the_thumb, as found in the post-thumb plugin
searches a pots for images, gets the image id, then retrives info about it, displays the thumb

args:
$size, should be "thumbnail" or "medium"
*/
function cim_the_thumb ($size="thumbnail"){
	global $post;
	preg_match ('/<img (.*?) src=["'."']".'(.*?)["'."']".'(.*?)\/\>/i', $post->post_content, $matches);  //get all the images

	if (!$matches)  //if no images
		return null;

	ereg ('wp-image- ([0-9]+)',$matches[0],$regs);  //find the string "wp-image-nnn" in the image, where nnn is the image id

	if (!$regs){
		echo "<!-- there was an error getting an image for this post -->\n";
		return null;
	}

	if (is_numeric ($regs[1])){  //check to make sure the ID we got is numeric (it should be!)

		//add classes specifically for the CIM sites
		if ($size =="medium"){
			$imgClass="img-holder";
		} elseif ($size == "thumbnail"){
			$imgClass = "smallthumb";
		}
		$image = wp_get_attachment_image_src ($regs[1], $size, false);  //get image sizes
		if ( $image ) {
			list ($src, $width, $height) = $image;
			echo '<a href="'.get_permalink ($post->ID).'" title="'.get_the_title ($post->ID).'">';
			echo '<img src="'.attribute_escape ($src).'" class="'.$imgClass.' attachment-'.attribute_escape ($size).'" alt="'.get_the_title ($post->ID).'" />';
			echo "</a>\n";
		}
	} else {
		echo "<!-- there was an error getting an image for this post -->\n";
		return null;
	}
}

Далее в любом месте цикла The Loop, там где хотим видеть картинку среднего размера, вызываем функцию

<?php if ( function_exists ( 'cim_the_thumb' ) ) { cim_the_thumb ('medium'); } ?>

а для миниатюр

<?php if ( function_exists ( 'cim_the_thumb' ) ) { cim_the_thumb ('thumbnail'); } ?>

Готово!

Опубликовано 03 Окт 2009 в 17:57. Автор: Анастасия. Рубрика: Настройки и плагины, Разработка шаблонов. Вы можете следить за ответами к этой записи через RSS 2.0. Вы можете оставить отзыв или трекбек со своего сайта.