Завантаження зображень із заданою роздільною здатністю у WordPress

З цього посібника ви навчитеся генерувати зображення власного розміру для використання у темі WordPress. Навіщо використовувати розміри зображень? Щоб вам не потрібно редагувати кожне зображення, яке ви завантажили в Медіа-бібліотеку. Таким чином, кожне завантажене вами зображення буде автоматично перетворено у встановлені вами розміри. Вона може бути вставлена ​​в пост або сторінку за допомогою Медіа-галереї або циклу. Прочитайте далі та дізнайтеся, як це зробити.

Крок 1. Визначте розмір зображень

Щоб ваша тема підтримувала власний розмір зображень, потрібно відредагувати файл functions.php у папці вашої теми. Відкрийте functions.php вашої теми і перевірте, чи є у вас рядок, який виглядає так:

add_action( 'after_setup_theme', 'function_name' );

Цей код викликається під час ініціалізації теми. Він зазвичай використовується для базової установки, реєстрації та ініціалізації теми, де "ім'я_функції- Ім'я викликаної функції.

Якщо ви знайшли такий рядок, знайдіть також метод із таким же ім'ям, як другий параметр методу add_action. Якщо ви не знайшли такий рядок, вам потрібно його додати і також створити метод під назвою, як другий параметр:

add_action( 'after_setup_theme', 'setup' );
function setup() {
	// ...
}

Тепер для включення мініатюр постів для вашої теми, додайте наступні рядки до методу, визначеного вище:

function setup() {
	// ...

	add_theme_support( 'post-thumbnails' ); // This feature enables post-thumbnail support for a theme
	// To enable only for posts:
	//add_theme_support( 'post-thumbnails', array( 'post' ) );
	// To enable only for posts and custom post types:
	//add_theme_support( 'post-thumbnails', array( 'post', 'movie' ) );

	// Register a new image size.
	// This means that WordPress will create a copy of the post image with the specified dimensions
	// when you upload a new image. Register as many as needed.
	// Adding custom image sizes (name, width, height, crop)
	add_image_size( 'featured-image', 620, 200, true );

	// ...
}

Крок 2. Відображення власних розмірів.

Вставка зображень свого розміру в пост із використанням медіа-галереї

Щоб вставляти зображення в пост або сторінку з медіагалереї, вставте наступний фільтр у файл functions.php:

add_filter( 'image_size_names_choose', 'custom_image_sizes_choose' );
function custom_image_sizes_choose( $sizes ) {
	$custom_sizes = array(
		'featured-image' => 'Featured Image'
	);
	return array_merge( $sizes, $custom_sizes );
}

Цей код приєднує розмір зображення з розмірами, визначеними в WordPress, так що результат буде таким:

Вставка зображення свого розміру всередині циклу

Щоб показувати, наприклад, зображення під назвою "обране зображення", всередині циклу вам потрібно додати такі рядки:

<?php
if ( has_post_thumbnail()):
	the_post_thumbnail( 'featured-image', array( 'class' => 'featured-image' ) );
endif;
?>

Таким чином, буде перевірено, чи містить пост/сторінка якесь прикріплене зображення та виведе тег ‹img›, що покаже зображення бажаного розміру.

Крок 3. Зміна розміру існуючих зображень

Для цього завдання є плагін регенерація Ескізи. Він може знову згенерувати всі, деякі або окремо взяті зображення. При зміні розміру зображень та їх повторному генеруванні зображення попереднього розміру не будуть видалено.

Приклад

Допустимо, ви хочете використовувати цю можливість у вашій темі. З папки /wp-content/themes/назва-теми відкрийте файл functions.php вашим улюбленим текстовим редактором. Якщо у вашій темі немає оголошеного "action" after_setup_themeВам потрібно його додати. Код для розміру зображень буде додано до цього оголошеного методу.

Зверніть увагу: є зарезервовані звання розмірів зображень: великий палець руки, слайдами, середа, великий, post-thumbnail. Додавання розмірів зображень із зарезервованими іменами перезапише їх встановлені значення.

add_action( 'after_setup_theme', 'setup' );
function setup() {
	// ...

	add_theme_support( 'post-thumbnails' ); // This feature enables post-thumbnail support for a theme
	add_image_size( 'header', 600, 200, true ); // header image
	add_image_size( 'custom-size1', 400, 200 ); // 400 pixel wide and 200 pixel tall, resized proportionally
	add_image_size( 'custom-size2', 400, 200, true ); // 400 pixel wide and 200 pixel tall, cropped

	// ...
}

Редагуючи файли content.php або Зміст-single.php або content-page.php, можна показати зображення необхідного розміру для заголовка посту, вставляючи його над або під заголовком посту.

<h1><?php the_title(); ?></h1>
<?php
if ( has_post_thumbnail()):
	the_post_thumbnail( 'header' );
endif;
the_content();
?>

Щоб зробити інші два власні розміри доступними для вибору медіа-галереї, додайте наступний фільтр:

add_filter( 'image_size_names_choose', 'custom_image_sizes_choose' );
function custom_image_sizes_choose( $sizes ) {
	$custom_sizes = array(
		'custom-size1' => 'My custom size 1',
		'custom-size2' => 'My custom size 2'
	);
	return array_merge( $sizes, $custom_sizes );
}

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/