На багатьох сайтах матеріал ділитися на категорії та коли ми в них заходимо, то бачимо не лише заголовок та текст, а й мініатюру запису (англійською thumbnail). Прикладом може бути мій сайт:

Назва мініатюра історично залишилася за таким зображенням, хоча багато картинок можуть бути не тільки маленькими, але й розтягуватись на всю ширину сторінки.

Для робіт sc мініатюрами їх необхідно спочатку включити до CMS. Для того щоб увімкнути мініатюри в WordPress необхідно додати спеціальний код у файл functions.php.

У нас ще немає файлу functions.php, він використовується для написання php функцій та запуску вбудованого функціоналу у CMS. Давайте створимо файл functions.php у нашій темі my_theme_tmp.

У файлі functions.php наберіть код:

<?php
if ( функція_існує( 'add_theme_support' ) ) { 
	add_theme_support( 'post-thumbnails' ); 
}
?>

Цей код включить підтримку мініатюр CMS, без нього у вас в панелі керування просто не буде можливості додавати мініатюру. Після додавання коду до файлу functions.php заходьте до адмінки та починайте створення нового запису, праворуч у вас з'явився метабокс “Ескізи записів» (Рекомендоване зображення).

У WordPress є стандартний розмір мініатюри, який у разі потреби можна змінити, додавши спеціальний код:

add_theme_support( «пост-мініатюри» );

У повний код файлу functions.php виглядатиме ось так:

if ( функція_існує( 'add_theme_support' ) ) { 
	add_theme_support( 'post-thumbnails' ); 
	set_post_thumbnail_size( 200, 200, true );
}

Після того, як налаштування всі зроблені, можна переходити до роботи з виведенням мініатюри в циклі файлу archive.php.

Виводити мініатюри дописів WordPress

Для виведення картинки запису необхідно вставити спеціальний код поряд із текстом запису у шаблоні archive.php.

										<клас div="великий палець">
											<a href="<?php the_permalink(); ?>" клас="зображення-повне зображення">
												<?php if ( has_post_thumbnail() ) {
												the_post_thumbnail();
												 }  ?>
											</a>
										</див.>

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

У код я додав клас thumb, він буде нам необхідний, щоб вирівняти мініатюру зліва від тексту, а не над ним.

Заходимо за адресою /wp-content/themes/my_theme_tmp/css/style.css та додаємо стиль:

	section.is-пост .thumb{
		width: 200px;
		height: 200px;
		плавати: Ліворуч;
	}

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

Для того, щоб все стало на свої місця, ми можемо додати очищення вирівнювання в потрібне місце.. Найпростіший спосіб через тег <br clear=”все” />.

Після доопрацювання коду у вас має вийти так:

Функції, які використовувалися в цьому уроці:

the_permalink() - Посилання на повний запис. Поки що у нас не працює, оскільки потрібна доробка шаблону.

if ( has_post_thumbnail() ) { – конструкція перевіряє чи є мініатюра запису. функція has_post_thumbnail() перевіряє наявність мініатюри та повертає true якщо мініатюра є.

the_post_thumbnail() – виводить мініатюру для запису стандартного розміру або того розміру, який ми вказали у файлі functions.php ( set_post_thumbnail_size( 200, 200, true ) ).

функція_існує( «add_theme_support» ) – перевіряє чи була запущена функція в коді вище в даному випадку функція add_theme_support.

add_theme_support( «пост-мініатюри» ) - Додає в тему можливість працювати в мініатюрами.

set_post_thumbnail_size( 200, 200, true ) – вказує розмір мініатюри для запису.

На цьому все. Завантажуйте мої вихідники, розбирайтеся в моєму коді і робіть також у себе.

У наступному уроці ми поговоримо про виведення одного повного запису, розглянемо, як створювати спеціальний шаблон для окремого запису.