Як створити додаткові розміри зображень у WordPress

Минулого місяця було помічено величезну вразливість у відомому сценарії зміни розміру зображення, відомому як TimThumb. Відтоді громада співпрацювала та вирішувала проблеми. Хоча TimThumb є життєздатним варіантом, ми вважаємо, що розробники теми WordPress повинні орієнтуватися на використання основних функцій, а не покладатися на сторонні сценарії. У цій статті ми покажемо вам, як додати додаткові розміри зображень у WordPress.


У WordPress є вбудована функція Post Thumbnails aka Featured Images. Існує також вбудована функція add_image_size (), яка дозволяє задавати розміри зображень і надає можливість обрізати. Використання цих основних функцій у вашій темі може значною мірою усунути потребу в сторонній скрипт, такий як TimThumb, у більшості випадків.

Реєстрація додаткових розмірів зображень для вашої теми

Для початку вам потрібно буде додати підтримку ескізів, розміщуючи наступний код у файлі function.php:

add_theme_support (‘пост-ескізи’);

Після ввімкнення підтримки мініатюр публікацій, тепер ви можете використовувати функцію реєстрації додаткових розмірів зображень за допомогою функції add_image_size (). Використання функції add_image_size виглядає так: add_image_size (“найменування розміру”, ширина, висота, режим обрізання);

Приклад коду може виглядати так:

add_image_size (‘бічна панель-великий палець’, 120, 120, правда); // Режим жорсткого обрізання
add_image_size (‘домашня сторінка-великий палець’, 220, 180); // Режим м’якого обрізання
add_image_size (‘одиночний-великий палець’, 590, 9999); // Режим необмеженої висоти

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

Режим жорсткого обрізання – Як ви помітили, після висоти додається значення “true”. Це справжнє значення говорить про те, що WordPress обрізає зображення до визначеного нами розміру (в даному випадку 120 x 120 px). Це метод, який ми багато використовуємо в нашому тематичному дизайні, щоб переконатися, що все пропорційно, а наш дизайн не порушується. Ця функція автоматично обріже зображення або збоку, або зверху та знизу залежно від розміру. Мінусом жорсткого обрізання є те, що ви не можете контролювати, яка частина зображення відображається.

Виправлення Майком Літтлом – Коли ви завантажили зображення і перед тим, як вставити його в пост, ви можете натиснути «редагувати зображення», а звідти змінити мініатюру або все зображення, масштабувати, обертати або перевертати зображення, а також мініатюру виберіть точну частину зображення, яке ви хочете.

Режим м’якого обрізання – За замовчуванням увімкнено режим м’якого обрізання, тому ви не бачите додаткових значень після висоти. Цей метод пропорційно змінює розмір зображення, не спотворюючи його. Таким чином, ви можете не отримати розмірів, які ви хотіли. Зазвичай він відповідає розміру ширини, а висоти залежать від пропорції кожного зображення. Приклад відображення виглядатиме так:

Приклад м'якого врожаю

Режим необмеженої висоти – Бувають випадки, коли у вас є супер довгі зображення, які ви хочете використовувати у своєму дизайні, але хочете переконатися, що ширина обмежена. Основне використання, яке ми знаходимо для подібного розміру зображення, є в інфографічних дописах. Інфографіка, як правило, дуже довга і повна інформації. Важке обрізання подібного зображення на одній сторінці публікацій – не чудова ідея. Але за своєю природою інфографіка ширша за зміст. Тож, що ви можете зробити, це вказати ширину, яка не порушить ваш дизайн, залишаючи висоту необмеженою, тому вся інфографіка може бути показана без жодних спотворень. Приклад відображення виглядатиме так:

Приклад режиму необмеженої висоти

Відображення додаткових розмірів зображень у вашій темі WordPress

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

<?php the_post_thumbnail (‘ваш вказаний розмір зображення’); ?>

Примітка. Цей біт коду потрібно вставити всередину циклу публікації.

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

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

Якщо ви цього не робите на абсолютно новому сайті, вам, мабуть, доведеться відновлювати мініатюри. Функція add_image_size () працює в тому, що вона генерує розміри лише з тієї точки, яку вона додала в тему. Отже, будь-які публікації зображень, які були додані до включення цієї функції, не матимуть нового розміру. Отже, нам потрібно відновити новий розмір зображення для старих зображень. Це спрощує плагін під назвою Regenerate Thumbnails. Після встановлення та активації цього плагіна в меню додається нова опція: Інструменти »Regen. Ескізи

Відновити ескіз плагіна

Клацніть на кнопку Відновити мініатюру та дозвольте плагіну виконати свою роботу.

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

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

Незважаючи на те, що ви включили розміри зображень у своїй темі, використання обмежується лише вашою темою, що не має жодного сенсу. Усі розміри зображень генеруються незалежно, то чому б не зробити його доступним для автора публікації, щоб використовувати його у вмісті публікації. Це можна зробити за допомогою плагіна під назвою Simple Image Sills.

Після встановлення та активації цього плагіна нові параметри будуть додані на вашу сторінку Налаштування »Медіа. Ви побачите список розмірів, які ви визначили у своїй темі. Все, що вам потрібно зробити, – це встановити прапорець “Показати в публікації”.

Вставити розмір додаткових розмірів зображень

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

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

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

Простий плагін розмірів зображень також дозволяє створювати власні розміри зображень безпосередньо з інформаційної панелі WordPress.

Ми вважаємо, що цей метод слід додати до найкращих практик для всіх розробників тем WordPress. Які ваші думки?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map