Подключаем скрипты и стили

К фронтэнду (лицевой части сайта)

if ( ! defined( 'TEMPLATE_DIRECTORY_URL' ) ) define( 'TEMPLATE_DIRECTORY_URL', get_stylesheet_directory_uri() );

add_action( 'wp_enqueue_scripts', function () {

	wp_enqueue_style( 'main', TEMPLATE_DIRECTORY_URL . '/style.css', array(), '1.0' );

	wp_enqueue_script( 'main', TEMPLATE_DIRECTORY_URL . '/js/script.js', array(), '1.0', true );

});

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

В строке 1 мы определяем константу TEMPLATE_DIRECTORY_URL. Просто для удобства, чтобы когда будет много строк подключения разных скриптов и разных стилей не писать везде вызов функции get_stylesheet_directory_uri(), а подставлять эту константу.

Слово main в строках 3 и 4 - это идентификатор подключаемого файла скрипта или файла стилей. Он может быть любым, но главное, чтобы он был уникальным в рамках всего сайта. Файл стилей и файл скриптов могут иметь совпадающий идентификатор, как в этом примере. Но если он будет одинаковый у двух файлов стилей или двух файлов скриптов, то к сайту в результате подключится только 1 из них.

В строке 3 мы подключаем файл стилей с названием style.css, который должен располагаться в корне используемого шаблона. В строке 4 мы подключаем файл скриптов с названием script.js, который должен располагаться в папке js расположенной в корне используемого шаблона. Вы можете расположить ваши файлы скриптов и стилей шаблона в другом месте, но тогда в этих строках надо изменить относительные пути к ним.

1.0 в строках 3 и 4 это указание версии ваших файлов. Можно их стереть - тогда WordPress добавит к ним версию своего движка. Можно писать в качестве версии дату последнего изменения файла для удобства. Как это сделать - читаем ниже.

Принудительное обновление JS и CSS файлов в браузере пользователя при их изменении

При первом обращении к сайту браузер пользователя может закэшировать полученные от него JS и CSS файлы. И тогда при повторном открытии страницы он возьмет их из кэша, а не будет скачивать заново. Это хорошо для быстродействия. Но может сложиться ситуация, что мы внесли изменение в JS или CSS код, а пользователь эти изменения не увидел.

Чтобы этого избежать, можно подключать эти файлы с номером версии, который будет динамически меняться при изменении самих файлов. В результате пользователь будет получать эти файлы из кэша своего браузера до тех пор, пока они не изменятся (а значит изменится их версия).

Для этого вместо фиксированного номера версии как в примере выше, мы будем использовать для его формирования PHP функцию get_theme_file_path().

if ( ! defined( 'TEMPLATE_DIRECTORY_URL' ) ) define( 'TEMPLATE_DIRECTORY_URL', get_stylesheet_directory_uri() );

add_action( 'wp_enqueue_scripts', function () {

	wp_enqueue_style( 'main', TEMPLATE_DIRECTORY_URL . '/style.css', array(), filemtime( get_theme_file_path( 'style.css' ) ) );

	wp_enqueue_script( 'main', TEMPLATE_DIRECTORY_URL . '/js/script.js', array(), filemtime( get_theme_file_path( 'js/script.js' ) ), true );

});

Подключаем скрипт только на нужной странице

Допустим, что у нас есть скрипт, который мы хотим подключить только на одной конкретной странице сайта, чтобы не утяжелять им остальные страницы, где он не нужен. Код может быть таким:

add_action( 'wp_enqueue_scripts', function() {

	if( get_the_ID() != 555 ) return;

	wp_enqueue_script( 'main', TEMPLATE_DIRECTORY_URL . '/js/script.js', array(), '1.0', true );

});

В строке 2 надо указать верный ID страницы.

Подключаем скрипт только на странице с определенным шорткодом

add_action( 'wp_enqueue_scripts', function() {

	global $post;

	if( ! has_shortcode( $post->post_content, 'my-shortcode' ) ) return;

	wp_enqueue_script( 'main', TEMPLATE_DIRECTORY_URL . '/js/script.js', array(), '1.0', true );

});

Здесь мы проверяем, что если в тексте текущей страницы есть шорткод [my-shortcode], то только в этом случае подключаем скрипт. Причем шорткод не только должен быть в тексте страницы, но и должен быть зарегистрирован через функцию add_shortcode.

Подключаем свои стили последними

Иногда бывает нужно подключить какие-то стили последними, чтобы они подключались после всех остальных стилей (например, добавляемых плагинами).

Вариант 1

Пробуем добавить приоритет хука wp_enqueue_scripts:

add_action( 'wp_enqueue_scripts', function () {

	wp_enqueue_style( 'main', TEMPLATE_DIRECTORY_URL . '/style.css', array(), '1.0' );

}, 99 );

Вариант 2

Подключаем стили через хук wp_print_styles:

add_action( 'wp_print_styles', function() {

	wp_enqueue_style( 'main', TEMPLATE_DIRECTORY_URL . '/style.css', array(), '1.0' );

}, 99 );

Он срабатывает после хука wp_enqueue_scripts.

Вариант 3

Подключаем стили в подвале сайта:

add_action( 'get_footer', function() {

	wp_enqueue_style( 'main', TEMPLATE_DIRECTORY_URL . '/style.css', array(), '1.0' );

});

К бэкэнду (админке сайта)

Все отличие от кода выше - это то, что надо просто использовать другой хук. Вместо хука wp_enqueue_scripts использовать хук admin_enqueue_scripts.

add_action( 'admin_enqueue_scripts', function() {

	wp_enqueue_style( 'my_admin', TEMPLATE_DIRECTORY_URL . '/css/admin.css', array(), '1.0' );

	wp_enqueue_script( 'my_admin', TEMPLATE_DIRECTORY_URL . '/js/admin.js', array(), '1.0', true );

});

Здесь предполагается, что константа TEMPLATE_DIRECTORY_URL определена ранее, как первом примере.

Подключаем скрипт в админке только на нужной странице

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

add_action( 'admin_enqueue_scripts', function() {

	global $current_screen;

	if( ! $current_screen->post_type == 'product' || ! $current_screen->base == 'post' ) return;

	wp_enqueue_script( 'my_admin', TEMPLATE_DIRECTORY_URL . '/js/admin.js', array(), '1.0', true );

});

В этом примере скрипт подключится только если открывается страница редактирования или создания нового товара WooCommerce.

Если надо узнать ID редактируемой записи / страницы, то можно просто прочитать его из массива $_GET:

$post_id = $_GET['post'];

Подключаем свои стили к редактору TinyMCE

Даже если мы подключили свои стили к админке, они не будут действовать на окно редактора TinyMCE, потому что оно выводится внутри тега <iframe>. Для подключения файла стилей внутри этого окна можно воспользоваться функцией add_editor_style():

add_action( 'current_screen', function() {

	add_editor_style( 'css/editor-style.css' );

});

В качестве параметра функция принимает путь к файлу стилей относительно используемого шаблона.