Змінюйте контейнери зображень на стороні сервера в WordPress
Щоразу, коли ви створюєте індивідуальні рішення для інших людей, ви можете зіткнутися з нюансами того, як WordPress відтворює вміст.
Зазвичай це залежить від теми, принаймні одного плагіна або комбінації обох. І якщо вам потрібно працювати із зображеннями окремо, це може бути непростим завданням. Проблема навіть із спробою написати такий пост полягає в тому, що важко навіть описати ситуацію, у якій вам може знадобитися щось подібне.
Незважаючи на це, я збираюся робити все можливе. Тобто я хочу поділитися тим, як змінювати контейнери зображень на стороні сервера перед рендерингом на стороні клієнта, і робити це за допомогою бібліотеки DOMDocument PHP.
Звучить багато? Сподіваюся, я зможу це легко розібрати.
Перш ніж приступати до коду, припустімо, що у вас є їх, який рендерить зображення в одному елементі абзацу (або будь-якому типі елемента на рівні блоку), і вам потрібно обернути кожен елемент у певний тип класу, щоб ви могли отримати доступ за допомогою CSS або JavaScript.
Де ми є
Отже, для початку припустімо, що зображення відтворюються так:
І вам потрібно відобразити їх так:
Тепер вам може знадобитися або не потрібен простір між ними. Це не має особливого значення, оскільки ви можете контролювати це через CSS. Але ви можете контролювати, як це надсилається по дроту на сторону клієнта.
Для цього вам знадобиться кілька речей:
- Доступ до бібліотеки DOMDocument PHP,
- Розуміння того, як маніпулювати вмістом за допомогою хука WordPress the_content ,
- Стратегія того, як ви хочете обернути зображення.
Я розгляну кожне з них у коді, але досить сказати, що я збираюся обернути кожне зображення в елемент абзацу. Ви, очевидно, можете вибрати робити все, що забажаєте.
Як це зробити
По-перше, переконайтеся, що ви заявили, що використовуєте вміст документа DOM над вашим класом :
Далі створіть хук для the_content. Як ви це зробите, залежатиме від того, як ви організували свій код (будь то ООП чи ні). Для цього прикладу я покажу дуже простий приклад того, як це зробити :
Після цього вам потрібно буде трохи попрацювати (все це описано нижче, але виходить за межі цієї публікації). Це включає:
- перетворення кодування об’єктів HTML,
- створення екземпляра документа DOM,
- завантаження HTML допису з вхідного вмісту
У коді це має виглядати так :
Далі вам потрібно переглянути елементи img і переконатися, що ви встановлюєте правильний атрибут. Ви можете вибрати використання класу, ви можете вибрати використання атрибута даних або ви можете вибрати використання чогось іншого. Ця частина не має значення.
Зауважте, що для даного зображення вам потрібно перевірити, чи наступний елемент не є елементом абзацу, оскільки це те, що я вибираю для обтікання зображення. Іншими словами, якщо наступний елемент не є абзацом, ми загорнемо елемент в елемент абзацу.
Для цього скелет основної функції має виглядати так :
Тоді функція, відповідальна за фактичне обгортання елемента в елемент абзацу, має виглядати так :
Обов’язково прочитайте DocBlock коду, щоб зрозуміти, як працює функція. Простіше кажучи:
- він приймає екземпляр документа та елемент зображення,
- створює елемент абзацу,
- додає атрибут класу
- замінює вихідний елемент зображення на абзац,
- і додає зображення як дочірній елемент
І оскільки ми створили об’єкт документа в методі, нам не потрібно нічого повертати.
Остаточна версія оригінальної функції має виглядати так :
І ваш результат має виглядати як на зображенні вище. Однак пам’ятайте; вам потрібно повернути результати екземпляра документа в WordPress, щоб він належним чином відтворював HTML. І саме це робить функція saveHTML у наведеному вище коді.