Повний підручник з вибраних мініатюр та розмірів зображень у WordPress

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

Читайте далі про все, що вам потрібно знати про розміри зображень у WordPress та управління обраними зображеннями.

Редагування PHP у файлах WordPress

Цей пост містить код PHP для WordPress. Можливо, ви захочете прочитати наш безкоштовний прискорений курс PHP "перш ніж намагатися будь-які зміни у вашій темі.

Якщо ви не бажаєте відкривати файли теми або не бажаєте, оскільки вони будуть втрачені під час майбутніх оновлень теми, ви можете використовувати плагін My Custom Functions замість додавання блоків коду.

Мої функції користувача

Основи розміру зображення в WordPress

На панелі адміністратора WordPress ви, ймовірно, вже знаєте про параметри > Медіа.

Це три розміри зображень за замовчуванням, які викликає WordPress: мініатюра, середня і велика. Розмір мініатюри має спеціальне налаштування для обрізки відповідно до вказаного тут розміру. Це не обов'язково має бути співвідношення 1: 1 - ви можете встановити його так, як вам подобається.

Коли обрізка увімкнена, зображення будуть масштабуватися і центруватися, тоді все, що не підходить, буде відкинуто.

Середні і великі параметри працюють трохи по-різному, оскільки ви будете вказувати максимальні розміри для ширини і висоти, і зображення будуть відповідно зменшені. Якщо зображення занадто маленьке, ці розміри зображення не будуть створені.

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

Додавання власного розміру зображення в WordPress

Трьох розмірів, визначених за замовчуванням WordPress, може бути недостатньо, тому темам і плагінам дозволено додавати свої власні розміри. Якщо вам зручно редагувати файли тем, ви можете зробити це також.

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

add_image_size( 'my-thumbnail', 400, 200, true);

Кожен новий розмір зображення потребує назви, розміру ширини та висоти, а також обрізання зображень до цього розміру (true або false). Для структурних частин теми або віджету, як правило, ви хочете обрізати, щоб не порушувати макет.

У вас може виникнути спокуса створити безліч користувацьких розмірів зображень, але ви повинні робити це економно. Кожен розмір зображення, який ви визначаєте, буде створено для кожного зображення, яке ви завантажуєте, навіть якщо ви мали намір використовувати його тільки з зображенням.

Тому, якщо у вас є сім розмірів зображень, плюс три за замовчуванням, кожне зображення, що завантажується, породжує 10 маленьких копій самого себе. Якщо ви вважаєте, що в один пост може бути вбудовано 10 зображень, то це 100 файлів, створених тільки для цього поста.

Ви не можете створити власний розмір зображення і вказати, що він повинен використовуватися тільки для ваших обраних зображень.

Крім того, навіть якщо ви більше не використовуєте певний розмір користувача і видалили цей код (або змінили теми), старі зображення залишаться на сервері назавжди. WordPress не буде вилучати невикористовувані зображення для вас. На старому або такому великому сайті, як це означає, що кілька сотень гігабайт витрачаються на зберігання зображень, які більше не використовуються.

Для невеликих сайтів плагін Media Cleaner може допомогти, але завжди спочатку запускайте повне резервне копіювання.

Медіа-прибиральник

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

За замовчуванням власні розміри зображень не будуть відображатися у списку, що розкривається під час вставлення зображення у повідомлення. Єдине, що ви побачите, це Thumbnail, Medium, Large і Full Size (залежно від розміру вихідного зображення, оскільки воно не буде збільшено).

Якщо ви хочете, щоб ваш нестандартний розмір також був у списку, нам знадобиться трохи більше коду. Знову додайте до вашого файла functions.php:

function image_sizes_to_mediapicker( $default_sizes ) { return array_merge( $default_sizes, array( 'my-thumbnail' => __( 'My Thumbail Size' ), ) ); } add_filter( 'image_size_names_choose', 'image_sizes_to_mediapicker' );

Це працює шляхом фільтрації списку медіа-вибору. Ми об'єднуємо масив списку вихідних розмірів з будь-якими новими розмірами, які ми також хочемо перерахувати. Змініть «my-thumbnail» і «My Thumbnail Size» на свій нестандартний розмір, і зрозуміле людині зрозуміле ім'я, яке ви хотіли б бачити в списку.

WordPress Вибрані параметри зображення

Вибрані зображення - це одне зображення, пов'язане з повідомленням, але не обов'язково вставлене у зміст повідомлення. Вони часто використовуються темами у заголовку, на першій сторінці або на бічній панелі. Тим не менш, з точки зору розміру зображення, вони не розглядаються як звичайні зображення.

Для кожного розміру, який ви визначили, будь-яке завантажене зображення буде продубльоване і змінене в розмірах, включаючи вибране зображення.

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

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

add_theme_support('post-thumbnails');

Щоб використовувати вибрані зображення у вашій власній темі або плагінах, скористайтеся функцією the_post_thumbnail () для виводу теґу зображення:

the_post_thumbnail('my-thumbnail',array('class'=>'my_post_thumbnail_css_class'));

Функція приймає 2 параметри: іменований розмір, який ви шукаєте (в даному випадку «my-thumbnail»), і будь-які атрибути, які ви хочете передати, наприклад, користувацький клас CSS.

Якщо ви бажаєте просто отримати фактичний URL вибраного зображення, а не потрібний HTML, спробуйте це замість цього (отримуючи середній розмір зображення в цьому прикладі):

$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium'); echo $thumbnail[0];

Відновлення WordPress мініатюр зображень

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

Якщо ви хочете змінити розмір раніше завантажених зображень, вам знадобиться плагін. AJAX Thumbnail Rebuild дозволяє вам вибирати, які розміри регенерувати, і буде повільно працювати з вашим архівом.

AJAX Мініатюра Відновити

Є деякі обмеження і підводні камені, про які ви повинні знати.

У той час як рекомендовані зображення можуть бути змінені автоматично, жоден плагін не може переписати вміст публікації. Наприклад, якщо ви додали зображення до повідомлення великого розміру (який у той час міг становити 500 пікселів), зміна визначення великого розміру не змінить розмір зображення в повідомленні. Він залишиться в 500px, якщо ви не редагуєте повідомлення і не вставите те ж зображення в новому розмірі.

Як вже згадувалося, якщо у вас багато розмірів зображень, ви будете генерувати багато зображень. На щастя, Thumbnail Rebuild дозволяє обмежити це тільки обраними зображеннями. Але знову ж таки, пам'ятайте, що це стосується тільки вашого попереднього зображення. Всі майбутні завантаження зображень будуть керуватися WordPress, тобто всі розміри зображень будуть створені для всього.

Зараз саме час дізнатися різницю між JPG і PNG. щоб ви знали, щоб використовувати оптимальний формат у майбутньому.

Підніміть свій WordPress сайт на новий рівень

Хочете налаштувати свою тему WordPress? Використання вашої теми зображень, кольорів і розташування елементів в основному визначається CSS і HTML, тому ми рекомендуємо ознайомитися з цими покроковими керівництвами для вивчення CSS і HTML.

А якщо вам цікаві теми, погляньте на ці круті теми WordPress для портфоліо фотографій.

Ваш сайт WordPress занадто часто падає? Ви платите занадто багато? Перемкніться на добре відомий хостинг, такий як InMotion Hosting (спеціальна знижка за цим посиланням) або Bluehost (спеціальна знижка за цим посиланням).