WordPress та сучасна розробка
Скорочит
WordPress задає багато рамок та створює бар’єри для багатьох ініціатив під час розробки веб сайту. Тим паче WordPress доволі таки старий і не дуже в інтеграцію новизни.( Я не кажу що додати щось супер нове — неможливе, а просто, це дуже важко та ресурсозатратно )
Як не крути, але WP є дуже страшним хорошим компромісом між програмістами та малими підприємцями, який дає спроможність останнім без перших вносити зміни до сайту. Тож дуже часто програмістам приходиться створювати власні компоненти або великі елементи на чистому HTML/CSS/JS для підприємців.
Кожен раз прописувати нові цсс селектори або багато повторюємого коду — не найкраща ідея з моєї перспективи, тож я подумав, чому би не інтегрувати сучасну веб розробку в WordPress? — Ну і тут згадали перший абзац... так. Але нижче я розписав найлегші шляхи вирішення цієї проблеми через додавання cdn.
Я би хотів писати компоненти за допомогою Vue/React та якусь бібліотеку для стилів, щоб кожен раз не прописувати їх самостійно. Vue в документації зарекомендував себе як фреймворк який можна вставити як окремий компонент до сайту напряму, тож можливо, він підійде найкраще для цієї задачі, а React просто через популярність.
І так, почнемо з найлегшого. Це конфігурація сайту. Додавання meta/link тегів до head компоненту. Це можна робити вручну через внесення грубих змін через файлову систему, або за допомогою плагінів. Найлегший шлях — плагін.
Я обрав стандарт, і це Elementor(+ Pro ), хоча їх існує багато, насправді. Просто елементор відомий; є безліч матеріалу по ньому + є документація для програмістів, що стає дуже великим плюсом для розробки власних компонентів.( А ще, можливо ШІ допоможе )
В панелі, Elementor => Custom Code можна додати код до <head> тегу.
До head додаємо Pico та React 18. Pico є дуже непоганою заміною до Tailwind з CDN. Альтернативно можна розглянути Bootstrap, який я насправді не поважаю.
Чому саме React 18? — сучасний React рухається в бік SSR і 19 версія вже має бути обов’язково на сервері. Але React 18 насправді буде достатньо для розробки інших компонентів.
Таким чином можна додати вже і сам скрипт
З цієї точки можна рухатися вже в бік Elementor. В ньому ми маємо створити власний компонент. Бажано прочитати всю документацію.
Все буде мати ± такий вигляд.
Таким чином ми й додали примітивний React компонент до WordPress + Elementor з використанням маленької бібліотеки стилів.
Схожим чином можна додати й Vue.я
За допомогою цих методів можна зберегти багато часу, покращити читаємість коду та полегшити розробку, особливо якщо ти не чисто на один раз в проекті. Конфігурації зайняли менше ніж 5хв.
Можна додавати інші фреймворки та бібліотеки через таку методику. Сайт не стане самим новітнім, але й не буде занадто старим. Принаймні через те що буде легше написати анімації та стилі, він стане трішки більш живим.
Ще, якщо, прям зовсім багато часу, можна встигнути написати повноцінний плагін.( так, до цього для елементору треба було створити плагін, який вже вміщав в собі кастомні компоненти ). За допомогою повноцінного плагіну можна напряму вставляти код, редагувати DOM. Це найбільш гнучкий спосіб.
Леонид Мартынюк
2 коментарі
Додати коментар Підписатись на коментаріВідписатись від коментарів