Подключение css и js файлов в wordpress

Удаление версии скрипта или файла стилей из URL

При регистрации скрипта ему указывается версия. . Такую версию можно вырезать из ссылки на скрипт или файл стилей:

Удаление всех версия у всех скриптов:

// Удаляем версию скриптов
add_filter( 'script_loader_src', '_remove_script_version' );
// Удаляем версию стилей
add_filter( 'style_loader_src', '_remove_script_version' );
function _remove_script_version( $src ){
	$parts = explode( '?', $src );
	return $parts;
}

Удаление только версий WordPress:

## удаляет версию WP из преданного URL у скриптов и стилей
add_filter( 'script_loader_src', 'hb_remove_wp_version_from_src' );
add_filter( 'style_loader_src', 'hb_remove_wp_version_from_src' );
function hb_remove_wp_version_from_src( $src ) {
	 global $wp_version;
	 parse_str( parse_url( $src, PHP_URL_QUERY ), $query );
	 if ( ! empty($query) && $query === $wp_version ) {
		  $src = remove_query_arg('ver', $src);
	 }
	 return $src;
}

Условные теги (остальные)

Все Условные теги

if( is_user_logged_in() ){
	// юзер авторизован
}

• is_user_logged_in()Авторизован ли пользователь
• have_comments()Есть ли на странице комментарии для вывода
• comments_open()Открыто ли комментирование у записи
• has_category()Находится ли запись хоть в одной из рубрик
• has_tag()Находится ли запись хоть в одной из меток
• has_term()Находится ли запись хоть в одном термине таксономии
• has_excerpt()Есть ли у текущего поста отрывок (цитата, короткое описание)
• is_nav_menu()Существует ли меню (указываем ID, слаг или название)
• has_nav_menu()Имеет ли зарегистрированная область меню прикрепленное меню
• has_shortcode()Есть ли в переданном тексте указанный шоткод
• shortcode_exists()Зарегистрирован ли указанный шоткод
• in_category()Находится ли пост в рубрике
• in_the_loop()Находимся ли мы в цикле перебора записей
• is_active_sidebar()Есть ли в области для виджетов есть хоть один виджет
• is_child_theme()Используется ли дочерняя тема
• is_dynamic_sidebar()Включены ли сайдбары для темы и есть ли хоть один виджет
• is_local_attachment()Является ли переданный URL страницей вложения
• is_main_query()Выполняется ли действие в главном цикле WordPress
• is_multisite()Включен ли режим Мультисайт
• is_new_day()Отличается ли текущая дата от предыдущей (в цикле)
• is_post_type_hierarchical()Является ли тип записи древовидным
• is_taxonomy_hierarchical()Древовидная ли таксономия
• is_sticky()Является ли запись прилепленной
• pings_open()Разрешено ли записи получать пинги
• post_exists()Есть ли запись с указанным заголовком (post_title)
• taxonomy_exists()Существует ли указанная таксономия
• post_password_required()Защищена ли запись паролем и правильный ли пароль
• term_exists()Существует ли элемент таксономии (вернет ID терма)
• cat_is_ancestor_of()Дочерняя ли рубрика к другой (все уровни вложенности)
• term_is_ancestor_of()Дочерний ли термин к другому (все уровни вложенности)
• wp_attachment_is()Является ли вложение: картинкой, аудио или видео
• wp_attachment_is_image()Является ли запись вложением-картинкой
• is_header_video_active()Нужно ли показать видео заголовка на странице
• has_custom_header()Установлена ли картинка/видео для шапки темы
• wp_is_mobile()С мобильного ли устройства просматривается сайт
• wp_is_post_autosave()Является ли запись авто-сохранением
• wp_is_post_revision()Является ли запись ревизией (редакцией)

для чего на сайте используют js скрипты

Статья рассчитана преимущественно на тех пользователей, которые стараются не использовать плагины, включающие в свой функционал отработку — это нецелесообразно в плане серьёзного подхода к делу!

Если в вашем шаблоне уже был подключен функционал примитивным способом: т.е строки подключения файлов помещены перед тегом боди  — самое время это исправить!..

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

Например: кнопка наверх, фиксированный сайдбар или прилепленное меню… либо скрытие внешних ссылок посредством AJAX и многое-многое другое подобное по функционалу требует подключения этих самых файлов.

Но как это сделать правильно, чтобы не притормозить свой ресурс (в плане загрузки по времени)??

В общем-то, не очень сложно.

Для начала нужно припомнить

Summary

Enqueueing assets is a powerful way of handling them. It gives you, and other plugin/theme makers, more control over the system as a whole and takes dependency management out of your hands.

If that weren’t enough, it is the way to add your assets, many theme marketplaces and the WordPress repository itself will not approve your work if you do not use this method.

If you enjoyed this article, then you’ll love Kinsta’s WordPress hosting platform. Turbocharge your website and get 24/7 support from our veteran WordPress team. Our Google Cloud powered infrastructure focuses on auto-scaling, performance, and security. Let us show you the Kinsta difference! Check out our plans

Подключение скриптов/стилей, если виджет активен

Этот пример показывает, как подключить файл js скрипта, если активирован виджет «Календарь». По аналогии можно подключить скрипты для любого активного виджета.

## Подключение скрипта, если есть активный виджет
## ID базовый виджетов WP смотрите в описании http://wp-kama.ru/function/the_widget
add_action('wp_enqueue_scripts', 'add_calendar_widget_scripts');
function add_my_widget_scripts(){
	if( ! is_active_widget( false, false, 'calendar' ) ) return; // выходим если виджет не активен

	$theme_url = get_stylesheet_directory_uri();

	wp_enqueue_script('my_widget_script', $theme_url .'/calendar_widget_script.js' );
}

Подробнее читайте описание функции is_active_widget().

Данные на каждый виджет WordPress, смотрите в описании функции the_widget()

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

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

// Класс виджета
class My_Widget extends WP_Widget {

	function __construct() {
		// Запускаем родительский класс
		parent::__construct(
			'идентификатор_виджета', // ID виджета, если не указать (оставить ''), то ID будет равен названию класса в нижнем регистре: my_widget
			'Название виджета',
			array('description' => 'Описание виджета'),
		);

		// скрипты/стили виджета, только если он активен
		if ( is_active_widget( false, false, $this->id_base ) || is_customize_preview() ) {
			add_action('wp_enqueue_scripts', array( $this, 'add_my_widget_scripts' ));
			add_action('wp_head', array( $this, 'add_my_widget_style' ) );
		}
	}

	// Вывод виджета
	function widget( $args, $instance ){
		$title = apply_filters( 'widget_title', $instance );

		echo $args;

		if( $title )
			echo $args . $title . $args;

		echo 'Привет!';

		echo $args;
	}

	// Сохранение настроек виджета (очистка)
	function update( $new_instance, $old_instance ) {
	}

	// html форма настроек виджета в Админ-панели
	function form( $instance ) {
	}

	// скрипт виджета
	function add_my_widget_scripts() {
		// фильтр чтобы можно было отключить скрипты
		if( ! apply_filters( 'show_my_widget_script', true, $this->id_base ) )
			return;

		$theme_url = get_stylesheet_directory_uri();

		wp_enqueue_script('my_widget_script', $theme_url .'/my_widget_script.js' );
	}

	// стили виджета
	function add_my_widget_style() {
		// фильтр чтобы можно было отключить стили
		if( ! apply_filters( 'show_my_widget_style', true, $this->id_base ) )
			return;
		?>
		<style type="text/css">
			.my_widget a{ display:inline; }
		</style>
		<?php
	}
}

Async функции

Добавление async-функций в ES2017 (ES8) сделало работу с промисами легче.

Важно отметить, что async-функции работают поверх промисов.
Эти функции не являются принципиально другими концепциями.
Async-функции были задуманы как альтернатива коду, использующему промисы.
Используя конструкцию async/await, можно полностью избежать использование цепочек промисов.
С помощью async-функций возможно организовать работу с асинхронным кодом в синхронном стиле.

Как видите, знание промисов всё же необходимо для понимания работы async/await.

Синтаксис

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

Обратите внимание, что вставляется в начале объявления функции, а в случае стрелочной функции — между знаком и скобками. Async-функции могут быть помещены в объект в качестве методов или же просто использоваться в объявлении класса

Async-функции могут быть помещены в объект в качестве методов или же просто использоваться в объявлении класса.

Примечание Конструкторы класса и геттеры/сеттеры не могут быть асинхронными.

Async-функции всегда возвращают промисы

Функция возвращает строку . Т. к. это асинхронная функция, значение строки обёртывается в промис (с помощью конструктора).

Код выше можно переписать и без использования :

В таком случае, вместо , код вручную возвращает промис.

Тело асинхронной функции всегда обёртывается в новый промис

Если возвращаемое значение является примитивом, async-функция возвращает это значение, обёрнутое в промис. Но если возвращаемое значение и есть объект промиса, его решение возвращается в новом промисе.

Что происходит, когда внутри асинхронной функции возникает какая-нибудь ошибка?

Если ошибка не будет обработана, вернёт промис с реджектом. В таком случае вместо вернётся , содержащий ошибку.

Суть async-функций в том, что что бы вы не возвращали, на выходе вы всегда будете получать промис.

Асинхронные функции приостанавливаются при каждом await выражении

сказывается на выражениях. Если выражение является промисом, то async-функция будет приостановлена до тех пор, пока промис не выполнится. Если же выражение не является промисом, то оно конвертируется в промис через и потом завершается.

Как работает функция?

1. После вызова функции первая строка конвертируется из в .
2. После использования , выполнение функции приостанавливается, пока не получит своё значение (в данном случае это 9).
3. приостанавливает выполнение функции, пока не завершится сама (после 1 секунды). Это, фактически, можно назвать остановкой функции на 1 секунду.
4. Также через возвращает случайное значение, которое присваивается переменной .
5. Случай с переменной идентичен случаю переменной . После этого опять происходит пауза на 1 секунду, но теперь ничего не возвращает, т. к. этого не требуется.
6. Под конец эти значения считаются по формуле . Результат обёртывается в промис с помощью и возвращается функцией.

Примечание Если такие паузы напоминают вам генераторы в ES6, то на это есть свои причины.

Подключение на определённых страница

На самом деле это очень обширная тема, она явно не для одной статьи. Я вам покажу всего пару приёмов. 

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

Продолжу наш файл

/**
* в файле functions.php
*/
function your_preffix_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );

    // Metrika Yandex and others
    if( !is_user_logged_in() ){
        wp_enqueue_script('yandex-metrika', get_template_directory_uri() . '/js/metrika.js', array(), null, false);
    }

   // Подключить только на главной если на ней выводятся последние новости
   if ( is_front_page() && is_home() ){
      wp_enqueue_script('some_script', get_template_directory_uri() . '/js/some_script.js', array(), null, false);
   }
   // Подключить только на главной если на ней не выводятся последние новости
   if ( !is_front_page() && is_home() ){
      wp_enqueue_script('another_script', get_template_directory_uri() . '/js/another_script.js', array(), null, false);
   }

}
add_action( 'wp_enqueue_scripts', 'your_preffix_scripts' );

Так мы подключили разные скрипты для главной страницы в случае если есть на ней вывод новостей и в случае если нет.

Подключение скриптов для страницы по адресу

Я конечно бы мог вам показать как подключать скрипты на страницах с проверками is_page(), is_single, is_singular() и т.д. но это не очень интересно. Я вам покажу как проверить страницу по адресу.

Допустим у нас есть две страницы example.com/contact и example.com/отзывы. В одном случае ссылка на страницу на английском языке, во втором на русском. К каждой странице нужно подключить разные стили. Код:

/**
* в файле functions.php
*/
function your_preffix_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );

    // Для ссылки на английском
    if(is_page('contact')){
       wp_enqueue_script('some_script', get_template_directory_uri() . '/js/some_script.js', array(), null, false); 
    }
    // Для ссылки на русском
    if(is_page( sanitize_title('отзывы') ) ){
        wp_enqueue_script('another_script', get_template_directory_uri() . '/js/another_script.js', array(), null, false);
    }   

}
add_action( 'wp_enqueue_scripts', 'your_preffix_scripts' );

How Enqueueing Works

There are two steps taken when enqueueing a script or a style. First you register it – tell WordPress it’s there – and then you actually enqueue it, which eventually outputs it into the header or just before the closing body tag.

The reason for having two steps has to do with modularity. Sometimes you’ll want to let WordPress know about an asset, but you may not want to use it on every page. For example: If you’re building a custom gallery shortcode that uses Javascript you only actually need to load the JS when the shortcode is used – probably not on every page.

The way to make this happen is to register the script first, and only actually enqueue it when the shortcode is shown (suggested reading: The Ultimate Guide to WordPress Shortcodes).

подключение js скриптов через файл functions php

Откроем файл functions.php и создадим произвольную функцию…

Активируем созданный функционал — для этого используем фильтр add_action… т.е подключим все наши скрипты в футерную часть сайта… не используя сам файл .

Вот строки функции, которые следует скопировать и прописать к себе в файл функций (ну или куда-то в специально созданный для этих целей файл)

Как понимаете, между EOT нужно поместить все строки кода из своего файла …

В качестве постскриптум:

Если у кого-то из админов после организации описанного варианта перестанет работать какой-то функционал — т.е файлы не хотят подгружаться (отрабатываться во фронтенде ) не переживайте! и не спешите относить «поломку» к несовместимости используемых на сайте скриптов — как это ещё называют к конфликту скриптов…

Советую ещё разок прогуляться в футерный файл и изучить его на предмет подключенных вариантов хуков.

Дело в том, что большинство шаблонов обогащены настройками через админпанель: например, есть такая плюшка как «добавление произвольного текста в подвал сайта»… Вот как раз эти настройки (или что-то подобное) организованы всякими хуками…

Сегодня подробно об этом не буду — есть иные статьи…

Словом, посмотрите наличие рядышком с пресловутым строк типа такой:

Закомментируйте эту функцию темы или совсем удалите: рассмотрите что для вас важнее — настройки темы или скоростя загрузки сайта.

Вот так можно закомментить функцию:

После этих манипуляций все скрипты безошибочно подключатся…

Как закомментировать код php, js или html

А эта статья о том, как перенести автоматически подключенные WordPress скрипты js в футер.

На этом у меня всё!

…возможно, что-то не ясно пояснил в тексте (настрой не писательский ноне)) — спрашивайте в комментах… помогу.

…город веб мастеров Михалика.ru — запросто с WordPress

Как это работает

Нужно «сказать» WP, что у вашего скрипта есть перевод, и какой текстовый домен (ID) нужно использовать для этого перевода. Делается это функцией wp_set_script_translations().

Таким образом регистрация вашего скрипта с переводом должна выглядеть так:

wp_register_script( 'my-handle', plugins_url( '/js/my-file.js', __FILE__ ) );
wp_set_script_translations( 'my-handle', 'my-domain' );

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

Обязательно ознакомьтесь с описанием функции wp_set_script_translations().

Теперь в JS коде нужно использовать объект wp-18n следующим образом:

const { __, _x, _n, _nx } = wp.i18n;

__( 'Hello', 'myl10n' );
_x( 'Hi', 'short word', 'myl10n' );
_n( '%s star', '%s stars', 5, 'myl10n' );
_nx( '%s star', '%s stars', 5, 'superstars', 'myl10n' );
sprintf( __( 'See Link: %s', 'myl10n' ), 'http://site.com' );

Используемые функции перевода полностью схожи с одноименными функциями PHP и используются точно так же. См. __(), _n(), _x(), _nx().

Настройка перевода для JS файлов готова!

Остается только создать файлы переводов из которых будут браться переводы строк. Как это делать читайте ниже.

Заметки:

• Отсутствие функций , и т.д. в JS объясняется тем, что они не нужны в JavaScript, потому что браузер сам умеет экранировать небезопасные символы.

• Контент JSON файла перевода выводится прямо в HTML страницу в виде js кода, прямо перед скриптом для которого подключается перевод.

• Если регистрируются несколько скриптов для которых нужны переводы, то переводы нужно подключать для каждого скрипта отдельно (у каждого должен быть свой JSON файл перевода):

  wp_register_script( 'my-plugin-script', plugins_url( 'js/my-script.js', __FILE__ ), , '0.0.1' );
  wp_set_script_translations( 'my-plugin-script', 'my-plugin' );
  
  wp_register_script( 'my-awesome-block', plugins_url( 'js/my-block.js', __FILE__ ), , '0.0.1' );
  wp_set_script_translations( 'my-awesome-block', 'my-plugin' );

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

Проблема 2. «Неработающие» плагины.

Вытекает из первой.

Рассмотрим небольшой пример. Допустим скрипты подключены в следующим образом.

<head>
	...
	<script src="...jquery.js" ...></script>
	<script src="...jquery.my-plugin.js" ...></script>
	<?php wp_head(); ?>
</head>

Что произойдет если какой-то из плагинов WP подключит jQuery?

Функция добавит теги script там, где находится вызов . А это, помимо повторной загрузки jquery, означает, что и объект будет создан заново. И он будет использоваться вместо первого объекта, к которому подключили плагин.

В принципе, проблему можно решить так.

<head>
	...
	<?php wp_head(); ?>
	<script src="...jquery.my-plugin.js" ...></script>
</head>

Но если вы в админке WP отключите плагин, который использует jQuery, то также перестанет работать. Т.к. jQuery будет не подключена.

AJAX в админ-панели WordPress

С тех пор, как AJAX был встроен в админ-панель WP, использовать функционал AJAX в плагинах стало очень удобно. Небольшой пример. Все делается в одном файле (файле плагина или файле темы ).

#1. Добавляем javascript

Сначала добавляем на страницу админки javascript код, который будет посылать AJAX запрос.

<?php
//add_action('admin_print_scripts', 'my_action_javascript'); // такое подключение будет работать не всегда
add_action('admin_print_footer_scripts', 'my_action_javascript', 99);
function my_action_javascript() {
	?>
	<script>
	jQuery(document).ready(function($) {
		var data = {
			action: 'my_action',
			whatever: 1234
		};

		// с версии 2.8 'ajaxurl' всегда определен в админке
		jQuery.post( ajaxurl, data, function(response) {
			alert('Получено с сервера: ' + response);
		});
	});
	</script>
	<?php
}
?>

С версии 2.8 javascript переменная ajaxurl определена глобально на всех страницах админки. Используйте её в js коде, как ссылку на файл обработчик AJAX запроса. Обычно это файл . В теме (шаблоне) эта переменная не определена. Чтобы использовать её во фронт-энде, её нужно определить самостоятельно. Как это сделать смотрите ниже.

#2. Создаем PHP функцию

Теперь, создадим PHP функцию, которая будет обрабатывать переданный AJAX запрос. Для этого добавляем следующий код в (можно в плагин):

add_action( 'wp_ajax_my_action', 'my_action_callback' );
function my_action_callback() {
	$whatever = intval( $_POST );

	$whatever += 10;
	echo $whatever;

	wp_die(); // выход нужен для того, чтобы в ответе не было ничего лишнего, только то что возвращает функция
}

Тут мы цепляемся на хук — это динамический хук и выглядит он так: , где вместо вставляется значение переменной передаваемой в первом коде: = .

Вот и все.

Примера выше достаточно, чтобы начать использовать AJAX в админ-панели WordPress.

По возможности всегда используйте wp_die() вместо  или  в функции обработки AJAX запроса. Так вы добьетесь лучшей интеграции с WordPress и в случае ошибок в коде, получите данные о них.

Как отключить и подключить jQuery в WordPress

В статье про удаление лишнего кода из header вы уже могли видеть код, позволяющий отключить jQuery в WordPress:

if ( !is_admin() ) { 
	wp_deregister_script('jquery'); 
}

Размещается эта конструкция в файле functions.php. Условие is_admin позволяет убрать библиотеку только на самом сайте (фронтэнде), если там она вам не нужна. При этом в WP админке скрипт останется для корректной работы всех функций. Данный вариант сработает, когда jQuery добавляется с помощью вызова wp_head в header.php. В некоторых шаблонах вы можете встретить вставку библиотеки напрямую через тег script. В таком случае дабы его отключить просто убираете данную строку.

Вообще, следует заметить, что использовать подключение jQuery в WordPress напрямую с помощью тега script в HEAD крайне не желательно:

<script type='text/javascript' src='http://site.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

Это ошибка! Она, во-первых, может повлечь за собой конфликт между скриптами, вызываемыми разными модулями, во-вторых, мешает оптимизации кода. Лучше следовать правилам системы вордпресс и использовать специальную функцию wp_enqueue_script дабы корректно подключить библиотеку WordPress jQuery. Код размещается в functions.php:

<?php 
function my_scripts_method(){
	if ( !is_admin() ) { 
		wp_enqueue_script( 'jquery' );
	}
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

После выполнения данных строк в результирующем HTML коде сайта появится строка со script из примера выше. Но повторюсь, добавлять этот тег в шаблон напрямую не есть правильно!