Зміст
- Потрібні знання: Основні PHP та CSS
- Вимагає: Встановлення WordPress, текстовий редактор на вибір
- Час проекту: 10 хвилин
Якщо ви підписалися на друковану версію журналу .net (якщо ні, то чому б !?), ви побачили, що у цьому місяці виходить чудова стаття на тему “Адаптивний дизайн з WordPress”.
У статті автор Джессі Фрідман викладає набір дійсно корисних прийомів для максимального використання та подолання властивих WordPress функцій, щоб створити справді ефективний адаптивний веб-сайт. Якщо ви думаєте створити адаптивний сайт із WordPress, вам слід обов'язково взяти копію його статті. Це обов’язкове читання.
Нещодавно відбудувавши свій особистий щоденник на WordPress, використовуючи адаптивний підхід для мобільних пристроїв, я був знайомий з деякими методами, висвітленими в статті. Однак одним із пунктів, який справді вирізнявся для мене, був підхід Джессі до надання рідинних зображень за допомогою jQuery.
Проблема з WordPress та "рідинними зображеннями"
Оскільки я впевнений, вам усім відомі «текучі зображення», які використовують максимальну ширину: 100% - вимагають, щоб зображення не мали фіксованої ширини чи висоти, щоб їх можна було масштабувати до розміру контейнера. На жаль, WordPress автоматично обчислює розміри зображень, створених із медіатеки, та додає відповідні атрибути ширини та висоти до будь-яких тегів img>.
Це чудово підходить для швидкості візуалізації сторінки, але вона видає a масивний у роботі над створенням адаптивних макетів, оскільки розміри зображень більше не обмежуються розміром їх контейнера.
Це проблема.
Рішення не-jQuery
У своїй статті Джессі пропонує використовувати jQuery для видалення атрибутів width і height з усіх тегів img> на сторінці, як тільки вона завантажиться. Це, безумовно, працює, але при створенні мого сайту мені не сподобалась ідея покладатися на JavaScript для досягнення цього, особливо якщо на цій сторінці було багато зображень.
Тут на допомогу прийшли фільтри WordPress.
Кодекс WordPress визначає фільтр як:
"... хуки, які WordPress запускає для модифікації тексту різних типів перед додаванням до бази даних або надсиланням на екран браузера."
Як виявляється, це саме те, що нам потрібно. Налаштувавши фільтр для запуску всіх зображень як остаточну дію перед тим, як вони відображатимуться на сторінці, ми можемо використовувати PHP для видалення атрибутів width і height, тим самим обходячи необхідність (потенційно) дорогих маніпуляцій DOM за допомогою JavaScript.
Код
- /**
- * ФУНКЦІЇ ВІДПОВІДАЛЬНОГО ЗОБРАЖЕННЯ
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- функція remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (ширина
У наведеному вище коді ми додаємо два фільтри за допомогою функції add_filter. Перший аргумент - це фільтр, до якого ми хочемо підключитись, а другий визначає функцію, яку ми хочемо запустити при виклику фільтра.
У нашому коді ми підключаємо дві незрозумілі функції:
- post_thumbnail_html - зображення, отримані за допомогою post_thumbnail ()
- image_send_to_editor - зображення, додані в редактор
Потім ми використовуємо регулярний вираз, щоб видалити як атрибути width, так і height з тегів зображення. Тепер, коли наші зображення надсилаються у браузер, вони можуть бути повністю «текучими» так само, як пан Маркотт сказав нам, що вони мають це робити.
Сповідь
Я повинен зізнатися, що мав ідею використовувати додати_фільтр щоб видалити атрибути, я не міг за своє життя знайти правильні фільтри WordPress, на які можна підключитись.
Після довгих пошуків я нарешті натрапив на цей надзвичайно корисний допис на біржі Wordpress Stack від Натаніеля Тейнтора, який надав інформацію про два потрібні мені фільтри.
Застереження
Наскільки мені відомо, єдиним головним недоліком цього підходу є те, що він не видаляє атрибути ширини та висоти з усіх зображень на вашому сайті. Я виявив, що це проблема, зокрема із зображеннями Gravatar, які WordPress використовує в коментарях.
Якщо хтось вирішує цю проблему, будь ласка, залиште коментар, щоб ми всі могли отримати вигоду.
Сподіваюсь, це було корисно і продемонструвало альтернативу покладанню на JavaScript для реалізації «текучих зображень» на веб-сайтах WordPress.
Слова: Девід Сміт
Дейв Сміт - це дизайнер, який базується поблизу прекрасного міста Бат, Великобританія. Коли він не працює над новими захоплюючими веб-проектами, його можна знайти на трубі у всьому - від джазових груп Big Band до симфонічних оркестрів. Ви можете наздогнати Дейва в Twitter як @get_dave.
