WordPress. Оформление темы. Скрипты и стили

Подключение CSS и JavaScript

При создании темы вы можете захотеть создать дополнительные таблицы стилей или файлы JavaScript. Однако помните, что на веб-сайте WordPress не только будет активна ваша тема, но и будет использоваться множество различных плагинов. Чтобы все работало слаженно, важно, чтобы тема и плагины загружали скрипты и таблицы стилей стандартным методом WordPress. Это обеспечит работоспособность сайта и отсутствие проблем несовместимости.

Добавление скриптов и стилей в WordPress — довольно простой процесс. По сути, вы создадите функцию, которая поставит в очередь все ваши сценарии и стили. При постановке скрипта или таблицы стилей в очередь WordPress создает дескриптор и путь для поиска вашего файла и любых зависимостей, которые у него могут быть (например, jQuery), а затем вы будете использовать хук, который вставит ваши скрипты и таблицы стилей.

Постановка скриптов и стилей в очередь

Правильный способ добавления скриптов и стилей в вашу тему — поставить их в очередь в  functions.php файлах. Этот  style.css файл требуется во всех темах, но может потребоваться добавить другие файлы для расширения функциональности вашей темы.

Совет: WordPress включает в себя несколько файлов JavaScript как часть пакета программного обеспечения, в том числе часто используемые библиотеки, такие как jQuery. Прежде чем добавлять свой собственный JavaScript,  проверьте, можете ли вы использовать включенную библиотеку .

Основы:

1. Поставьте сценарий или стиль в очередь, используя  wp_enqueue_script() или wp_enqueue_style()

Таблицы стилей

Ваши таблицы стилей CSS используются для настройки представления вашей темы. Таблица стилей — это также файл, в котором хранится информация о вашей теме. По этой причине  style.css файл  требуется в каждой теме.

Вместо того, чтобы загружать таблицу стилей в свой  header.php файл, вы должны загрузить ее с помощью  wp_enqueue_style. Чтобы загрузить основную таблицу стилей, вы можете поставить ее в очередь в functions.php

Чтобы поставить в очередь  style.css:

wp_enqueue_style( 'style', get_stylesheet_uri() );

Это будет искать таблицу стилей с именем «стиль» и загружать ее.

Основная функция для постановки стиля в очередь:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Вы можете включить следующие параметры:

• $handle  — это просто имя таблицы стилей.
• $src  — это место, где он находится. Остальные параметры являются необязательными.
• $deps  указывает, зависит ли эта таблица стилей от другой таблицы стилей. Если это установлено, эта таблица стилей не будет загружена, пока ее зависимая таблица стилей не будет загружена первой.
• $ver  устанавливает номер версии.
• $media  может указать тип носителя для загрузки этой таблицы стилей, например, «все», «экран», «печать» или «портативный».

Итак, если вы хотите загрузить таблицу стилей с именем «slider.css» в папку с именем «CSS» в корневом каталоге вашей темы, вы должны использовать:

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', false, '1.1', 'all');

Скрипты

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

wp_enqueue_script использует аналогичный синтаксис для  wp_enqueue_style.

Поставьте в очередь ваш скрипт:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

• $handle  — это имя скрипта.
• $src  определяет, где находится скрипт.
• $deps  — это массив, который может обрабатывать любой сценарий, от которого зависит ваш новый сценарий, например jQuery.
• $ver  позволяет указать номер версии.
• $in_footer  — это логический параметр (true/false), который позволяет размещать скрипты в нижнем колонтитуле HTML-документа, а не в заголовке, чтобы не задерживать загрузку дерева DOM.

Ваша функция постановки в очередь может выглядеть так:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true);

Скрипт ответа на комментарий

Комментарии WordPress имеют довольно много функций прямо из коробки, включая цепочку комментариев и расширенные формы комментариев. Чтобы комментарии работали правильно, им требуется JavaScript. Однако, поскольку в этом JavaScript необходимо определить определенные параметры, сценарий ответа на комментарий следует добавить в каждую классическую тему, использующую комментарии.

В блочных темах скрипт включается при размещении блока комментария. Вам не нужно добавлять его вручную.

Правильный способ включить ответ на комментарий в классических темах — использовать условные теги для проверки наличия определенных условий, чтобы скрипт не загружался без необходимости. Например, вы можете загружать скрипты только на отдельные страницы сообщений, используя  is_singular, и убедитесь, что пользователь выбрал «Включить цепочку комментариев». Таким образом, вы можете настроить такую ​​​​функцию, как:

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
	wp_enqueue_script( 'comment-reply' );
}

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

Объединение функций постановки в очередь

Лучше всего объединить все поставленные в очередь скрипты и стили в одну функцию, а затем вызывать их с помощью  wp_enqueue_scripts действия. Эта функция и действие должны располагаться где-то ниже начальной настройки (выполненной выше):

function add_theme_scripts() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );

	wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all' );

	wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );