Функція the_post_thumbnail () - мініатюра записи в анонсі WordPress
Не так давно, один мій Новомосковсктель питав, який плагін я використовую для виведення мініатюр в анонсах записів. Для реалізації цього простого завдання, використовувати плагіни зовсім не обов'язково, скажу більше, це шкодить сайту. Поясню чому.
Навіть якщо не брати до-уваги навантаження на сервер, яку створюють плагіни, існують і інші мінуси. Все більше і більше користувачів для виходу в інтернет використовують мобільні пристрої, браузери яких не підтримують багато плагіни, особливо графічні.
Тому всім дуже раджу по можливості замість плагінів користуватися функціями WordPress, благо такі є.
Я вже публікував кілька статей, присвячених використанню мініатюр на популярному блоговому движку, такі як:
Перш за все необхідно визначиться, який розмір мініатюри ми хочемо вивести в анонс. Давайте розберемося, які розміри нам пропонує WordPress за замовчуванням і як їх можна змінити. Поїхали!
Розміри зображень WordPress
В налаштуваннях WordPress (Настройки -> Медіафайли) за замовчуванням задані наступні розміри:
Розмір мініатюри - 150х150 пікселів;
Середній розмір - 300х300 пікселів;
Великий розмір - 640х640 пікселів;
Вихідний розмір не задається.
Кожному вказаною розміром WordPress привласнює позначення або назва, як завгодно:
150х150 - thumbnail;
300х300 - medium;
640х640 - large;
Початковий розмір - full.
Це означає, що при виклику мініатюри, зовсім не обов'язково вказувати її розміри, а досить прописати назву, як параметр для функції, але про це трохи пізніше.
Тут важливо розуміти, що якщо ви вже завантажували на сайт n-кількість зображень і при цьому не змінювали налаштування, то мініатюри будуть створені виходячи з розмірів за замовчуванням. Тому не варто дивуватися, якщо мініатюри будуть виводиться в обрізаному вигляді.
В даній ситуації є два рішення.
Рішення №1. Виставити потрібні пропорції в настройках і перезаліть все зображення, тим самим позбавивши сервер від зайвого навантаження, пов'язаної з необхідністю змінювати розміри картинок, так би мовити, на льоту. Це рішення, я вважаю, буде найправильнішим.
Рішення №2. Можна обійтися без перезаливання зображень, тим самим забивши на рекомендації PageSpeed і змінити розміри в самій функції.
Отже, саме час познайомити Вас з функцією виведення зображень, яка називається the_post_thumbnail ().
Функція the_post_thumbnail ()
Скажу відразу, функція the_post_thumbnail () - це тег шаблону, який працює тільки всередині циклу WordPress.
На замітку! Функція the_post_thumbnail () працює на основі get_the_post_thumbnail ().
Єдина відмінність функції the_post_thumbnail () від get_the_post_thumbnail () в тому, що в ній не можна вказати ID записи. в якості параметра, так як функція завжди бере мініатюру з поточного поста в циклі.
Функція the_post_thumbnail () може приймати один або два параметри. Першим параметром завжди йде розмір зображення, наприклад:
На даному прикладі, в якості першого і єдиного параметра, я вказав середній розмір мініатюри, який був заданий у налаштуваннях WordPress.
Також можна змінити розмір мініатюри заданий в настройках, але при цьому пропорції сторін вже створеного зображення не зміняться:
Де 50,50 - нові розміри для мініатюри.
Другим параметром функція може приймати CSS клас, наприклад:
У файлі style.css, для класу .miniature. можна прописати наступні стилі:
Ви напевно зрозуміли, що стилі, які я навів вище, були застосовані на моєму блозі і звичайно Ви їх можете змінити на свій розсуд. Для роботи зі стилями раджу користуватися розширенням Firebug.
Але прописувати свій CSS клас у функції зовсім не обов'язково, так як всім мініатюр, створеними функцією get_the_post_thumbnail (). WordPress привласнює загальний клас .wp-post-image. але крім того, мініатюри отримують окремий клас, в залежності від їх розміру:
attachment-thumbnail - розмір мініатюри;
.attachment-medium - середній розмір;
.attachment-large - великий розмір;
.attachment-full - вихідний розмір.
Отже, з функцією і її параметрами ми трохи розібралися, залишилося з'ясувати, як за допомогою the_post_thumbnail () мініатюра записи виводиться в анонс.
Як вивести мініатюру в анонс статті
За анонси записів в шаблонах WordPress відповідають наступні файли:
Також, основні файли можуть бути розділені на додаткові, так би мовити, подфайли. Раджу почитати статтю - Функція get_template_part (). Структура сучасних шаблонів WordPress.
Отже, Всередині циклу шукаємо рядок з тегами заголовка. У кого-то це може бути тег h1, у кого-то h2, але в більшості випадків рядок виглядає так:
І нижче цього рядка вставляємо наступний код:
На даному прикладі мініатюра буде посиланням на пост. Багато хто може подумати, що це зайві, адже заголовок статті також є посиланням. Але справа в тому що посилання з зображення і текстова посилання не зовсім одне і теж і для внутрішньої перелінковки посилання з картинок корисні.
Але якщо комусь принципово не хочеться щоб мініатюра була посиланням, то досить буде прописати так:
Вставляємо даний код в усі файли відповідають за виведення анонсів і не забуваємо додати стилі в файл style.css, з класом відповідним розміром мініатюр, приклад яких я наводив вище.
І ще один момент. Якщо у Вашому шаблоні за обрізання тексту відповідає функція the_content (). то тег more повинен бути проставлений вище першого зображення в запису, інакше вийде так:
З повагою, Віталій Кирилов
Зверніть увагу на рядок:
Якщо Ви Новомосковсклі статтю, то функція the_post_thumbnail () за замовчуванням не може мати значення «custom-size», це вже розробники шаблону постаралися.
Яке зображення Ви хочете вивести: мініатюру, середній або повний розмір?
І ще як виглядає урл мініатюри на Вашому сайті?
За замовчуванням урли мініатюр повинні мати таку структуру:
Вітаю! Не відмовте в допомозі! Мініатюри постів на головній виводжу наступним кодом:
Є сумніви так як використовується два рази the_title ()
Вітаю!
Пропорції прописуються так:
Наявність або відсутність title для посилання ніяк не впливає на перелинковку. Тут за бажанням. Якщо користувачеві буде так зручніше, то робіть.
the_title () можна використовувати два рази, нічого страшного в цьому немає.
alt - вказується в адмінці при завантаженні / редагуванні медіафайлу А чи є спосіб висмикнути його і прописати в коді?
пробую робити так alt = "# '. get_the_title (). #'"
але виводяться в alt тайтли!