Подключение jquery с google cdn с авто-определением версии

Содержание:

Что такое, с чем едят
Включаем кэширование для AJAX запросов
Защита: используем nonce и проверяем права
- - 1. Код nonce (случайный код)
  - 2. Проверка прав доступа
Пример комментирования на AJAX с использование шаблона
Начало
Время генерации страницы
CDN при подключении jQuery в WordPress
Подключение скриптов для плагинов
index.php
Настройка темы WordPress в админке
Создание темы WordPress
Правильное подключение jQuery в WordPress
Как правильно подключать внешние CSS и JS файлы в тему WordPress
Правильное подключение jQuery в WordPress
Load Scripts In The Footer
Обычный способ

Что такое, с чем едят

Система управления контентом WordPress поддерживает множество типов файлов. Основными являются классические HTML, CSS, JavaScript. Для простоты понимания, представьте, что это строительные материалы. При возведении сооружения, – создании шаблона, – следует придерживаться ряда правил. Ключевым является соблюдение порядка размещения файлов в директориях, построения их взаимосвязей. Принимаем как данность, продолжаем разработку. Хотя постойте… Кто сказал, что файлы разных типов не будут между собой конфликтовать? Должен существовать гарант их совместимости. Светилы веб-программирования нашли простое решение проблемы – скрипт. Если вы внимательно следите за материалами на нашем сайте, но наверняка заметили, что данная конструкция способна решить любую задачу. Подробно останавливаться на взаимосвязях не станем. Рассмотрим пример одной – совместимости JavaScript (JS) и HTML.

И те, и другие часто встречаются в директориях тем, системы
управления контентом. Файлы HTML представлены статичными программными конструкциями. Это
могут быть графические элементы, надписи, абсолютно все неподвижное, что видим
на сайте. Однако современный сайт – это повсеместная динамика. Анимационные
эффекты свойственны большей части элементов ресурса. За это отвечает JavaScript. Данный тип файлов
работает по заранее заданному алгоритму. Вообще, он подходит для широкого круга
задач. Вот лишь малая часть примеров:

математические операции;
обработка в режиме оффлайн – без подключения к
Интернету;
панель управления, меню прочие динамические
объекты для использования пользователем;
связывание HTML и CSS;
анимационные, графические эффекты.

Важность JS
переоценить невозможно: без этого формата существование веб-ресурса на
«ВордПресс» или любой другой современной CMS сложно представить. Однако как
связать JavaScript и HTML?
Здесь на выручку приходит jQuery.
Она представлена файлом, являющемся специальной библиотекой с предопределенными
функциями

JS получил
широкое распространение в веб-разработке, ввиду чего jQuery встречается так же часто

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

Дело в том,
что на него возлагается важная дополнительная функция запуска часто
используемого на странице кода. То есть, все повторяемые на ней функции
генерируются в jQuery,
что значительно ускоряет загрузку. Движок WordPress, язык программирования PHP, HTML, JS и CSS
не стоят на месте. Они регулярно модернизируются, совершенствуются, изменяются.
jQuery как
основополагающий инструмент их взаимодействия должен оставаться актуальным. В
противном случае многие функции выбранной темы WP могут не работать. При использовании
устаревшей версии jQuery,
необходимо ее обновить. Благодаря инструкции, приведенной далее, с задачей
справится даже новичок.

Включаем кэширование для AJAX запросов

Шрифт font awesome с векторными иконками для сайта

По умолчанию все AJAX запросы НЕ кэшируются браузером для этого PHP устанавливает специальные заголовки функцией nocache_headers().

Чаще всего AJAX запросы кэшировать и не надо, потому что они должны возвращать свежие данные, но бывают случаи когда такое кэширование может сэкономить ресурсы и увеличить скорость работы скрипта. Например, если у нас есть сложный фильтр товаров который юзеры используют постоянно. Тут было бы разумно кэшировать все результаты фильтра например на пару часов, все равно товары не добавляются с такой скоростью…

Как включить кэширование для указанных AJAX запросов смотрите во втором примере функции nocache_headers().

Защита: используем nonce и проверяем права

Начинаем работу с google sheets на python. от регистрации до чтения данных

Нет острой необходимости проверять AJAX запрос, если он потенциально не опасный. Например, когда он просто получает какие-то данные. Но когда запрос удаляет или обновляет данные, то его просто необходимо дополнительно защитить с помощью nonce кода и проверкой прав доступа.

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

Существует два вида защиты, которые нужно использовать в AJAX запросах в большинстве случаев.

1. Код nonce (случайный код)

Nonce — это уникальная строка, которая создается и используется один раз — одноразовое число. Nonce проверка используется, когда нужно убедится, что запрос был послан с указанного «места».

В WordPress есть функции wp_create_nonce() и check_ajax_referer() — это базовые функции для создания и последующей проверки nonce кода. С их помощью мы и будем создавать защиту nonce для AJAX запросов.

Для начала создадим nonce код:

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	wp_localize_script('twentyfifteen-script', 'myajax', 
		array(
			'url' => admin_url('admin-ajax.php'),
			'nonce' => wp_create_nonce('myajax-nonce')
		)
	);  

}

twentyfifteen-script это название основного скрипта темы (см. выше), который подключается на сайте с помощью wp_enqueue_script().

Затем, в AJAX запросе добавим переменную с кодом :

var ajaxdata = {
	action     : 'myajax-submit',
	nonce_code : myajax.nonce
};
jQuery.post( myajax.url, ajaxdata, function( response ) {
	alert( response );
});

Теперь, в обработке заброса необходимо проверить код:

add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );
function myajax_submit(){
	// проверяем nonce код, если проверка не пройдена прерываем обработку
	check_ajax_referer( 'myajax-nonce', 'nonce_code' );
	// или так
	if( ! wp_verify_nonce( $_POST, 'myajax-nonce' ) ) die( 'Stop!');

	// обрабатываем данные и возвращаем
	echo 'Возвращаемые данные';

	// не забываем завершать PHP
	wp_die();
}

работает на основе функции wp_verify_nonce() и по сути является её оберткой для AJAX запросов.

Обратите внимание, что в данном случае Nonce код создается в HTML коде. А это значит, что если у вас установлен плагин страничного кэширования, то этот код может и наверняка будет устаревать к моменту очередного AJAX запроса, потому что HTML код кэшируется..

2. Проверка прав доступа

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

Особенность тут в том, что не авторизованные пользователи тоже должны видеть сообщение об ошибке при AJAX запросе. Поэтому для них тоже нужно обрабатывать запрос и вернуть сообщение об ошибке:

add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );
function myajax_submit(){
	// проверяем nonce код, если проверка не пройдена прерываем обработку
	check_ajax_referer( 'myajax-nonce', 'nonce_code' );

	// текущий пользователь не имеет права автора или выше
	if( ! current_user_can('publish_posts') )
		die('Этот запрос доступен пользователям с правом автора или выше.')

	// ОК. У юзера есть нужные права!

	// Делаем что нужно и выводим данные на экран, чтобы вернуть их скрипту

	// Не забываем выходить
	wp_die();
}

Пример комментирования на AJAX с использование шаблона

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

Создаем шаблон и подключаем скрипт в файле темы :

<?php

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'wp-util' );
}

add_action( 'wp_footer', 'lw_comment_templates', 30 );
function lw_comment_templates(){
	?>
	<script type="text/html" id="tmpl-comment-single">
	  <li class="{{data.comment_class}}" id="li-comment-{{data.comment_ID}}">
		<div id="comment-{{data.comment_ID}}" class="comment">
		  <div class="comment-meta comment-author vcard">
			{{{data.gravatar}}}
			<div class="comment-meta-content">
			  <cite class="fn">
				<# if ( data.comment_author_url ) { #>
				  <a href="{{data.comment_author_url}}" rel="nofollow" class="url">
				<# } #>
				{{data.comment_author}}
				<# if ( data.comment_author_url ) { #>
				  </a>
				<# } #>
			  </cite>
			  <p>
				<a href="<?php the_permalink(); ?>#comment-{{data.comment_ID}}">
				  {{data.date_formatted}} at {{data.time_formatted}}
				</a>
			  </p>
			</div> <!-- /comment-meta-content -->
		  </div> <!-- /comment-meta -->
		  <div class="comment-content post-content">
			<# if ( "1" !== data.comment_approved ) { #>
			  <p class="comment-awaiting-moderation"><?php _e( "Awaiting moderation", "wilson" ); ?></p>
			<# } #>
			{{{data.content_formatted}}}
		  </div><!-- /comment-content -->
		</div><!-- /comment-## -->
	  </li>
	  <!-- #comment-## -->
	</script>
	<?php
}

Далее нужно создать JS скрипт, который будет отправлять данные нового комментария по AJAX и получать объект добавленного комментария.

Затем этот объект нужно передать в шаблон и добавить полученный HTML код в DOM:

var singleTemplate = wp.template( 'comment-single' ), // наш шаблон
	$comments      = $('.commets_wrap'),              // контейнер с комментариями
	$commentForm   = $('#respond')                    // форма комментирования

// функция обработки AJAX ответа
function commentSuccess( data ){
	// создаем HTML по шаблону
	$comments.append( singleTemplate( data ) );

	// сбрасываем форму
	$commentForm.get(0).reset();
}

Начало

Для разработчиков сайтов на wordpress не ни какого секрета, что в это CMS существует событие (речь не про функцию) wp_enqueue_scripts, которое и осуществляет подключение ваших css и js. Правильным решением для подключения стилей и javascript’ов своей темы будет создать функцию и добавить её к событию. Такой подход реализован во множестве тем и (для тех кто шарти) в underscores.me. И так как это выглядит.

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

Такой код подключит на ваш сайт файл style.css из корня вашей темы

Тут важно упомянуть функции wp_enqueue_style и wp_enqueue_style. С помощью них вы и подключаете свои скрипты

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

Время генерации страницы

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

/**
 * Выводит данные о количестве запросов запросов к БД, время выполнения скрипта и размер затраченной памяти.
 *
 * Функцию performance() нужно использовать в конце страницы. 
 * Чтобы автоматически добавить вывод этих данных, предлагаю воспользоваться хуками:
 */
add_filter( 'admin_footer_text', 'php_performance' ); // в подвале админки
add_filter( 'wp_footer', 'php_performance' );         // в подвале сайта
function php_performance(){
	echo sprintf(
		__( 'SQL: %d за %s сек. %s MB', 'km' ),
		get_num_queries(),
		timer_stop( 0, 3 ),
		round( memory_get_peak_usage()/1024/1024, 2 )
	);
}

CDN при подключении jQuery в WordPress

Файл отдается в сжатом виде и весит меньше.
Если посетитель уже заходил на сайт где jQuery подключался также, то в его кэше уже есть этот скрипт и он вообще не будет загружаться, при посещении вашего сайта. Читал в сети аналитическо-статистическую статью на эту тему — порядка 15-20% сайтов используют подключение CDN Google для jQuery и этот показатель растет.
Файл подгружается в отдельный поток.

Чтобы подключить jQuery с CDN Google, нужно сначала отметить уже зарегистрированный в WordPress скрипт jQuery и зарегистрировать его еще раз с новым адресом. Делается это путем добавления в такого кода:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	// вместо "jquery-core", можно вписать "jquery", тогда будет отменен еще и jquery-migrate
	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}

В результате мы получим такие строки в head части документа:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Здесь означает, что заменяется ссылка на сам скрипт jQuery и не затрагивается дополнительный скрипт , который нужен для перехода к версии jQuery 1.9.x, с ранних версий.

Подключение плагина означает, что если у вас есть ошибки несовместимости с версией 1.9.x (т.е. ваш код был написан под более ранние версии), jQuery продолжит работать, а ошибки можно будет исправить по мере выявления.

Если не нужен, а нужен только jQuery, то используйте такой код для подключения jQuery:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	wp_deregister_script('jquery-core');
	wp_deregister_script('jquery');

	// регистрируем
	wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, null, true );
	wp_register_script( 'jquery', false, array('jquery-core'), null, true );

	// подключаем
	wp_enqueue_script( 'jquery' );
}

Тут отменив jquery мы автоматически отменяем привязку mirgate к jQuery. В результате получим только такую строку:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

true в конце значит, что скрипт, по возможности, будет подключен в подвал сайта.

Если есть другие скрипты которые подключаются в head часть и зависят от jQuery, то несмотря на последний аргумент true, все равно будет подключен в head часть документа, что логично…

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

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
	// получаем версию jQuery
	wp_enqueue_script( 'jquery' );
	// для версий WP меньше 3.6 'jquery' нужно поменять на 'jquery-core'
	$wp_jquery_ver = $GLOBALS->registered->ver;
	$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;

	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
	wp_enqueue_script( 'jquery' );
}

Статьи до этого: jQuery

Символ табуляции (\t) в textarea при нажатии TAB на клавиатуре
Динамический архив блога с использованием jQuery (Ajax)
Кнопка «Наверх» с плавным прокручиванием

Статьи до этого: Оптимизация

Отключаем создание копий картинок в WordPress
SHORTINIT константа: WordPress среда с минимальной нагрузкой

Статьи до этого: Теория WordPress (базовые знания)

Must-Use плагины в WordPress
API настроек (опций)
SHORTINIT константа: WordPress среда с минимальной нагрузкой

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

Плагины это очень сложна штука. Нужно понимать что нужно на данной странице пользователю в данный момент, а что нет. На своём сайте в плагине для определения вхождений ключей в текст я подключаю стили и js дважды. В первый раз при загрузке страницы (загружается плагин по шорткоду) и во второй раз в момент отображения ответа по ajax. Как же достичь такого же в своём плагине.

Допустим у нас есть задача по шорткоду вывести текст и подключить текст для него. В нашем фале мы пишем следующие:

/**
* В файле плагине
*/
// Регистрируем стиль
function your_preffix_reg_script() {
    wp_register_style( 'my_style', 'https://example.ru/style.css');
}
add_action( 'wp_enqueue_scripts', 'your_preffix_reg_script' );

// Регистрируем шорткод
add_shortcode('shortcode_name', 'shortcode_func');
function shortcode_func(){
    // Print string
    do_action('your_preffix_desc');
    // Include script
    wp_enqueue_script( 'your_preffix_reg_script' );
}
add_action('your_preffix_desc', 'your_preffix_desc_func');
function your_preffix_desc_func(){
    echo 'some string';  
}

Таким образом мы зарегистрировали свой стиль и вызвали его в функции, которая выполняется на странице с шорткодом. Теперь если вызвать шорткод shortcode_name то мы увидим строку ‘some string’ и поключенный наш стиль. То же самое касается и javascript-файлов.

index.php

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

<?php if (have_posts()): while (have_posts()): the_post(); ?>
	Здесь HTML код и функции вывода значений поста (заголовок, дата, ссылка, текст и т.д.)
<?php endwhile; else: ?>
	<p>Записей не найдено.</p>
<?php endif; ?>

А вот основные функции цикла, которые нам понадобятся:

the_title() — выводит заголовок постаthe_content() — выводит текст анонса или полный текст, если цикл находится внутри записиthe_permalink() — ссылка на постthe_time() — дата и время создания постаthe_posts_pagination() — пагинация

Если вам нужен вывод записей по каким-либо параметрам, то можно воспользоваться классом . Как его использовать можете прочитать в этой статье.

В итоге получился следующий код главной страницы:

<?php get_header();?>

<h1 class="my-4"></h1>
<?php if (have_posts()): while(have_posts()): the_post();?>
<h2 class="card-title"><a href="<?the_permalink();?>"><?the_title();?></a></h2>
<div class="card mb-4">
	<a href="<?the_permalink();?>"><img class="card-img-top" src="<?php echo get_the_post_thumbnail_url(null, 'full'); ?>" alt="<?the_title();?>"></a>
	<div class="card-body">
		<p class="card-text"><small class="text-muted"><?the_time('j F Y');?></small> <?php the_tags('');?></p>
		<?the_content('');?>
		<a href="<?the_permalink();?>" class="btn btn-primary shadow-none">Читать далее →</a>
	</div>
</div>
<?php endwhile; else:?>
	<p>Записей не найдено.</p>
<?php endif;?>
<?php the_posts_pagination(array(
	'mid_size' => 4,
	'end_size' => 2,
));?>
		
<?php get_footer();?>

Настройка темы WordPress в админке

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

Зайдите в раздел «Внешний вид» — «Настроить», откроется окно с основными настройками темы. Здесь можно ввести название и описание сайта, которые отобразятся в шапке сайта после сохранения. Так же вы можете изменить цвет фона или фоновое изображение и другие настройки — разобраться не сложно. Большую часть настроек темы WordPress можно выполнить в разделе «Внешний вид» -> «Имя вашей темы». Здесь можно загрузить логотип, фавикон и т.д. Настроек очень много, но честно сказать, я ими никогда не пользуюсь, так как мне проще работать с кодом, чтобы редактировать тему WordPress.

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

P.S. Хочу напомнить вам, дорогие читатели, что если вы замечаете в моих статьях ошибки, не поленитесь нажать «Ctrl + Enter», чтобы с помощью системы Orhpus я их исправила.

Создание темы WordPress

Если вы ещё не установили CMS WordPress, то пришло время это сделать. Про то, как установить WordPress можно прочитать в этой статье. Если система уже установлена, то продолжаем.

Итак, приступим к созданию собственной темы. Для начала нам понадобится создать папку с названием темы в разделе /wp-content/themes/. Я назову её it-blog. Как я уже говорил, чтобы WordPress не выдавал ошибку, внутри этой папки необходимо создать файл стилей style.css. Теперь в панели администрирования в разделе Внешний вид → Темы появится наша тема, где её можно применить к сайту, нажав кнопку активировать. Название темы будет такое же, как и название её папки. На сайте теперь конечно же будет открываться только белая страница, так как тема ещё совсем пустая.

Активация новой темы

Вы можете создать свое изображение темы, добавив файл screenshot.png в папку с темой, а в файле style.css установить название, описание, автора и другую информацию добавив в начало файла примерно такой текст:

/*
Theme Name: Progme
Version: 1.0
Description: Тема Bootstrap 4
Author: Progme
Author URI: https://it-blog.ru
*/

Лично я считаю, что это лишнее, но для эстетики можно потратить немного времени.

Теперь внутри папки с нашей новой темой нам нужно создать все файлы в соответствии со структурой описанной выше. Можно создать их все сразу пустыми или создавать отдельно по мере написания кода.

Правильное подключение jQuery в WordPress

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Ошибка не в том, что не будет работать,а в том, что в WordPress существует специальный программный метод добавления скриптов на страницу — это функции:

wp_register_script()
wp_enqueue_script()
wp_deregister_script()
и т.д.

Такой метод необходим для предотвращения конфликтов при подключении одного и того же скрипта разными плагинами. И может упростить работу при оптимизации загрузки js файлов для ускорения загрузки сайта. Так например, если все скрипты подключены «правильно», то их можно программно объединить в один файл и отдавать браузеру в сжатом виде. Ну и в конце концов — это правильно, когда есть порядок и общая логика (стандарт), ведь если все сделано по стандарту, то при обновлении и изменении функций именно единый стандарт поможет быстро и незаметно перейти к обновлениям.

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

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'jquery' );
}

Вставлять этот код нужно в файл темы functions.php. После того, как скрипт сработает, в части документа появится следующая строка:

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

Как правильно подключать внешние CSS и JS файлы в тему WordPress

1. Регистрируем наши css и js файлы

Для этого в файле functions.php. Например, мне нужно подключить файл bootstrap_grid.css.

Для этого в function.php я использую функцию Php wp_register_style, которая может получать 5 параметров:

wp_register_style( $handle, $src, $deps, $ver, $media )

Два обязательных параметра

$handle(строка)

Это название подключаемого файла (например, style, bootstrap, responsive). Оно должно быть уникальным

Это важно

$src(строка)
Адрес к подключаемому файлу стилей. Например, http://site.ru/css/style.css.

Советую указывать относительный адрес. То есть, в случае с темой —

get_template_directory_uri() . '/css/bootstrap_grid.css'

Необязательные параметры

$deps(массив)

Массив идентификаторов других стилей, от которых зависит подключаемый файл стилей. Указанные тут стили, будут подключены до текущего.По умолчанию: array()

$ver(строка/логический)

Указания версии файла. Версия будет добавлена в конец ссылки на файл: ?ver=3.5.1.

По умолчанию: false

$media(строка)

Устанавливается значение атрибута media. media указывает тип устройства для которого будет работать текущий стиль. Может быть:

all
screen
handheld
print

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

Имя (bootstrap_grid)
Адрес (get_template_directory_uri() . ‘/css/bootstrap_grid.css’)

Итого получается так

wp_register_style( 'bootstrap_grid', get_template_directory_uri() . '/css/bootstrap_grid.css' );

2. Ставим в очередь на загрузку

Функция wp_enqueue_style необходима как раз для того, чтобы поставить наши стили в очередь на загрузку, она принимает такие же параметры как и функция wp_register_style

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ) ?>

В нашем случае выйдет так

wp_register_style( 'bootstrap_grid', get_template_directory_uri() . '/css/bootstrap_grid.css' );
wp_enqueue_style( 'bootstrap_grid' );

3. Запускаем наш файл стилей

Для этого наш нужно использовать функцию add_action.

Я не буду расписывать все ее возможные параметры. Нам достаточно передать дав параметра

add_action( 'wp_enqueue_scripts', 'bootstrap_grid' );

Мы используем wp_enqueue_scripts как для подключения скриптов, так и для подключения стилей!

P.S. Мой совет

Я рекомендую под подключение css и js создавать отдельные функции и вызывать их по мере необходимости.

Например, я создал функцию all_css, где зарегистрировал и поставил в очередь все свои css-файлы. И, затем, ее вызвал.

function all_css() {
	
	wp_register_style( 'bootstrap_grid', get_template_directory_uri() . '/css/bootstrap_grid.css' );
	wp_enqueue_style( 'bootstrap_grid' );

	wp_register_style( 'blog', get_template_directory_uri() . '/css/blog.css' );
	wp_enqueue_style( 'blog' );

	wp_register_style( 'style', get_template_directory_uri() . '/css/style.css' );
	wp_enqueue_style( 'style' );

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

Правильное подключение jQuery в WordPress

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

wp_register_script()
wp_enqueue_script()
wp_deregister_script()
и т.д.

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'jquery' );
}

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

Load Scripts In The Footer

Whenever you can get away with loading scripts in the footer, you should. This increases apparent page load times and can prevent your website from hanging while loading scripts, especially if they contain AJAX calls.

The enqueuing mechanism can add scripts to the footer using the fifth parameter (the fourth being an optional version number). Our example above would load the scripts in the footer if we modify it slightly.

Specifying true as the fifth parameter will put scripts in the footer, using false, or omitting the parameter will load things in the header. As I mentioned before, whenever possible, load scripts in the footer.

Обычный способ

lass=»lwptoc lwptoc-baseItems lwptoc-light lwptoc-notInherit» data-smooth-scroll=»0″>

function mihdan_wp_enqueue_scripts() {
	wp_enqueue_script( 'script-name', plugins_url( '/js/script.js' , __FILE__ ), array(), '1.0.0', false );
}
add_action( 'wp_enqueue_scripts', 'mihdan_wp_enqueue_scripts' );

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

Это очень неэффективно с точки зрения оптимизации загрузки сайта.

Этот код можно немного оптимизировать, если обернуть его в условные теги и подключать, например, только на страницах архивов:

function mihdan_wp_enqueue_scripts() {
	if ( is_archive() ) {
		wp_enqueue_script( 'script-name', plugins_url( '/js/script.js' , __FILE__ ), array(), '1.0.0', false );
	}
}
add_action( 'wp_enqueue_scripts', 'mihdan_wp_enqueue_scripts' );

Уже лучше, но, всё-равно, скрипт подключается на страницах, где нет вашего шорткода.