Темы. Как применить собственный CSS и JS код, а также подключить другой шрифт на страницах сайта

Темы — это инструмент, который позволяет в одном месте задать настройки для кастомного оформления страниц размещенных в папке. C помощью тем можно:

• стилизовать элементы страниц с помощью CSS;
• применить JavaScript код;
• подключить на страницах собственный шрифт.

Данный инструмент будет полезен прежде всего тем, кто имеет опыт работы с CSS и JavaScript, а также активно используют их при оформлении большого числа страниц. Все необходимые настройки и применение кода можно выполнить в одном месте — в теме.

В статье рассмотрим, как:

1) Создать тему

2) Настроить тему

3) Применить собственные CSS стили с помощью темы

4) Применить JS-код через тему

5) Установить шрифты с помощью темы

6) Применить тему к папке со страницами

1. Перейдите в раздел «Сайт» — «Страницы».
2. В выпадающем меню «Дерево сайта» выберите «Темы».
3. Нажмите на кнопку «Добавить тему» и задайте ее название.

Созданная тема отобразится в общем списке.

Настройка темы выполняется на одноименной вкладке — «Настройки», где имеется возможность:

1) Изменить название темы.

2) Включить/отключить дополнительные опции.

3) Задать родительскую тему, настройки которой будут применены в данной (дочерней) теме. Это позволит, например, избежать переноса кода из одной темы в другую вручную.

4) Перейти к Bundle файлам, в которых можно посмотреть весь применяемый в теме CSS/JS код, не заходя в дополнительные файлы и вкладки темы. Здесь же можно перейти к валидатору CSS кода (сервису проверки CSS от W3C).

5) Добавить дополнительные CSS/JS файлы.

Дополнительные опции на вкладке «Настройки»

1) «Для шаблонов» — используйте эту опцию, если в настройках страниц с темой включено «Является шаблоном».

2) «Использовать Bootstrap4» — для случаев, если на страницах есть специфичная верстка, требующая Bootstrap4, а не Bootstrap3, который используется по умолчанию.

Это позволяет, например, добавить больше гибкости для управления адаптивностью. Если вы используете стандартные блоки или стандартные коды CSS и HTML, которые не требуют подключения каких-либо плагинов и фреймворков, то включение данной опции не требуется.

3) «Можно группировать файлы в один» — техническая опция, при включении которой будет выполняться «склеивание» JS и CSS кода, добавленного в соответствующих вкладках и в дополнительных файлах темы.

Можно включить данную опцию, если в теме применяется много кода, разделенного на множество дополнительных файлов. Это позволит улучшить производительность в браузере,

чтобы страницы с темой или отдельные их элементы загружались быстрее.

Добавление дополнительных файлов

При необходимости в тему можно добавить дополнительные файлы. В настройках файлов можно указать CSS/JS код, который будет применяться совместно с кодом, добавленным на вкладках CSS и JS.

Это может быть полезно в случае, если необходимо структурировать код для удобной работы с ним.

Например, в одном CSS-файле можно добавить код для изменения стиля шрифта страницы, а в другом — стиля блоков.

Применить собственные CSS стили с помощью темы можно на вкладке «CSS». На этой вкладке можно добавить СSS-код, который будет применяться на страницах с данной темой.

Добавление кода необходимо производить без использования тегов — <style>...</style>.

Добавить Javascript код, который будет применяться на страницах темой, можно на вкладке «JS».

Добавлять код следует без использования тегов — <script>...</script>.

Обратите внимание: тестировать сторонний код рекомендуется на копиях страниц, чтобы работа оригинальных не была нарушена в результате его действия.

С помощью темы можно установить собственные шрифты на страницах сайта. Для этого необходимо:

• Выбрать и подключить подходящий шрифт к теме
• Установить шрифт на страницах с темой

Выбор и подключение шрифта

Для выбора подходящих для подключения шрифтов можно перейти на страницу Google Fonts.

На странице Google Fonts:

1) выберите необходимый шрифт;

2) нажмите «+ Select this style» возле подходящего стиля;

3) скопируйте данные из поля «link»;

4) вставьте скопированные данные в поле «Включенные шрифты» в настройках темы.

Для подключения к теме нескольких шрифтов или стилей можно:

1) Сразу выбрать необходимые шрифты на странице Google Fonts, после чего они будут отображены в списке «Review».

2) Добавить новые данные для подключения к уже существующим в поле «Включенные шрифты» в настройках темы.

Как установить шрифты на страницах с темой

Установить подключенные шрифты можно:

• Для всех блоков страницы
• Для отдельных блоков с помощью CSS

Установка шрифтов для всех блоков страницы

Для установки подключенных шрифтов для заголовков и основного текста всех блоков страницы, необходимо перейти на вкладку «Шрифты», после чего указать их названия в полях:

1) Основной шрифт (основной текст);

2) Второй шрифт (заголовки).

Установка шрифтов для отдельных блоков с помощью CSS

Выбрать шрифт можно непосредственно в каждом из блоков. Для этого поля основного и второстепенного шрифта можно оставить незаполненными.

Добавленные в тему шрифты можно применить к блоку через его подробные настройки стиля, указав соответствующий CSS-код для селектора.

Изменение шрифтов на страницах сайта возможно и другими способами, которые описаны в инструкциях:

• «Как установить собственный шрифт на странице» — в ней описан процесс подключения собственных произвольных шрифтов, которые вы, например, нашли и скачали в интернете.
• «Как настроить шрифты на сайте и в блоге?» — в статье описаны возможности задания шрифтов из предоставленного списка как для всех страниц и записей блога сразу, так и для отдельных страниц, записей или блоков.

Для применения темы создайте отдельную папку и в ее настройках укажите созданную тему. Тема будет применена только к тем страницам, которые присутствуют в данной папке.

Обратите внимание: применить тему к системным страницам аккаунта возможности нет.

Переместить страницу в папку можно:

1) через дерево сайта;

2) при помощи указания папки в настройках страницы.