Esl дозволяє додавати ваш власний код (CSS, JavaScript, HTML, PHP) до різних частин вашого веб-сайту.
Глобальний CSS та JavaScript
Ви можете додати свій Кастомний CSS та Кастомний JavaScript глобально з вашої панелі керування WordPress під Esl > Налаштування > Кастомний код.
Кастомні скрипти (JavaScript) можна додати в три різні (документальні) місця:
- Скрипти в заголовку: Додає ваші скрипти безпосередньо перед закриваючим тегом </head>. Тут ви можете копіювати і вставляти трекінгові скрипти тощо.
- Скрипти тіла (заголовка): Додає ваші скрипти безпосередньо після відкриваючого тегу <body>.
- Скрипти тіла (футера): Додає ваші скрипти безпосередньо перед закриваючим тегом </body>.
CSS та JavaScript, специфічний для сторінки
Щоб застосувати кастомний CSS та JavaScript до конкретної сторінки, відредагуйте цю сторінку за допомогою Esl. Перейдіть до Налаштування > Налаштування сторінки > Кастомний код. Там ви можете додати свій кастомний CSS та JS, які повинні бути застосовані тільки до сторінки, яку ви наразі редагуєте.
Кастомний CSS, специфічний для елемента
Розширте стилі будь-якого елемента та глобального класу, додавши до нього свій кастомний CSS.
Спочатку відредагуйте елемент, до якого ви хочете додати свій кастомний CSS.
У вкладці “Стиль” відкрийте групу керування “CSS”.
Там ви знайдете редактор коду Кастомний CSS.
Використовуйте %root% плейсхолдер для націлювання на елемент або глобальний клас, який ви наразі редагуєте. Esl зазвичай перетворює цей%root% плейсхолдер на ваш ID елемента або глобальний клас.
Клавіатурна комбінація для вставки %root% – “r + TAB”.
Знімок праворуч ілюструє, як додати червону обводку 1px до елемента.
Завершення коду CSS через Emmet
Ви можете використовувати абревіатури CSS, щоб писати ваш CSS ще швидше. Замість того, щоб писати margin: 10px, просто введіть m10 і натисніть клавішу TAB.
https://docs.emmet.io/css-abbreviations/
Елемент “Код” (PHP, HTML, CSS, JS)
Елемент “Код” дозволяє виконувати власний код (PHP, HTML, CSS та JS) де завгодно на будь-якій сторінці.
За промовчанням, код, доданий до елемента Код, відображається як фрагмент коду.
Щоб виконати свій код, спочатку потрібно ввімкнути “Виконання коду” для відповідної ролі користувача або користувача в панелі управління WordPress під “Esl – Налаштування – Кастомний код” (див. знімок екрана нижче).
Переконайтеся, що ви ввімкнули виконання коду лише для тих користувачів та ролей користувачів, яким ви довіряєте на 100%.
Як додати PHP та HTML код до вашого елемента
Якщо увімкнено, ви можете почати додавати елемент “Код” скрізь, де бажаєте виконати свій код. Зазвичай ви виконуєте PHP та HTML код, оскільки CSS та JS набагато легше додавати за допомогою наведених вище рішень.
Після того, як ви додали елемент Код на свою сторінку, ви можете додати свій користувацький код до нього (як показано на знімку екрана нижче).
Щоб запустити/виконати код у системі, увімкніть параметр “Виконати код”.
Не забудьте натиснути піктограму “Підписати код” у правому верхньому куті редактора коду після закінчення редагування вашого виконавчого коду.
Автозавершення HTML коду за допомогою Emmet
З версії 1.3.6 ви можете використовувати скорочення для швидшого генерування ваших HTML структур за допомогою знайомого синтаксису на основі CSS.
Скорочення: #header (+ клавіша TAB)
Генерує: <div id="header"></div>
Скорочення: h$[title=item$]{Header $}*3
Генерує:
<h1 title="item1">Заголовок 1</h1><h2 title="item2">Заголовок 2</h2><h3 title="item3">Заголовок 3</h3>