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

Автор: | 19.04.2019

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

Для этого нам нужен доступ к functions.php, потому что нам нужно добавить в него код для вызова стилей и скриптов. Мы НЕ будем добавлять приведенный ниже код в начало нашей веб-страницы:

 

<link href="//www.lenakso.top/css/style.css" rel="stylesheet" />

 

Вместо этого вы должны войти в functions.php и добавить код, который выглядит так:

function theme_name_scripts(){
 wp_enqueue_style( 'style-name', get_stylesheet_uri() );
 wp_enqueue_script( 'script-name', get_template_directory_uri() . '//www.lenakso.top/js/example.js' ); } 
 add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

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

Сначала мы объявляем функцию, написав «function», затем мы даем функции имя. В этом случае мы написали theme_name_scripts, и мы должны закончить это “()” без пробела. Вы можете изменить это название, но вы должны понимать, что оно используется дважды в коде выше, в начале и в конце кода, поэтому не забудьте изменить его в обоих местах. Затем мы открываем функцию с набором фигурных скобок » { }», а внутри добавляем остальную часть кода для запуска.

wp_enqueue_style, если это таблица стилей или wp_enqueue_script, если это файл сценария.

Оба они заканчиваются на «()», как и первая функция, которую мы назвали. На этот раз нам нужно добавить несколько строк внутри “()”.

Первое, что нужно добавить — это имя, можете назвать так, как вам удобно. Однако есть некоторые стандартные имена, используемые WordPress для вызова стилей и скриптов, включенных в их загрузку, поэтому нужно убедиться, что имя, которое вы используете, очень специфично для вас или вашего проекта. Не забудьте добавить запятую «,» после имени и перед объявлением пути. Мы назвали стиль или функцию скрипта, давайте направим его в правильном направлении.

Добавьте Основную Таблицу Стилей

В WordPress у вас должна быть основная таблица стилей в корне вашей темы, а не внутри другой папки, такой как css/style.css. Таким образом, в WordPress есть быстрая функция для вызова вашей основной таблицы стилей, и это get_stylesheet_uri().

Добавление Дополнительных Таблиц Стилей

Теперь вам нужно добавить другие таблицы стилей, которые могут находиться в другой папке. В WordPress есть встроенная функция, которая позволяет нам быстро добраться до корня темы, которую мы построили, и это get_template_directory_uri(). Затем мы должны добавить папку, а затем имя файла в эту функцию. Мы должны использовать то, что называется конкатенацией. Конкатенация — это просто громкое слово для добавления функций и строк.

После функции get_template_directory_uri () нам нужно добавить пробел, а затем точку «.», затем еще один пробел, за которым следует набор одинарных кавычек». Внутри одинарных кавычек мы добавляем косую черту, за которой следует путь к нужной таблице стилей. Вот так:

 

get_template_directory_uri() . ‘/js/example.js’.

Добавить Файлы Скриптов

Процесс добавления файлов скриптов в точности похож на описанный выше процесс добавления дополнительных таблиц стилей. Единственное отличие заключается в том, что вы должны убедиться, что используете функцию wp_enqueue_script (), а не wp_enqueue_style().

Использование CDN

Я настоятельно рекомендую использовать CDN для вызова любых, если не всех ваших скриптов и стилей. CDN означает сеть доставки контента и относится к быстрому способу получения контента конечному пользователю. Если вы знаете, что вам понадобится большая библиотека js, например Twitter Bootstrap, вы можете вытащить ее из CDN вместо того, чтобы вытаскивать ее из файла на вашем сервере. Зачем это делать? Когда контент передается с CDN, он на самом деле поступает с разных серверов и, следовательно, быстрее загружается в веб-браузер ваших читателей, особенно если он уже закеширован. Это очень полезно при создании мобильных дружественных веб-сайтов, потому что веб-сайт будет загружаться быстрее.

Пример

function theme_name_scripts() {
wp_enqueue_script('bootstrap','//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js' ); }
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

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

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

Если вы хотите, чтобы ваш скрипт загружался в подвале сайта, используйте значение true в конце строки. Значение false – это значение по умолчанию, при котором скрипт загружается в секции head.

Например

 

wp_enqueue_script( 'test-navigation', get_template_directory_uri() . '//www.lenakso.top/js/navigation.js', array('jquery'), true );

array(‘jquery’), — используется, если подключаемый скрипт зависит от какой-либо библиотеки, в данном случае jquery и должен подключаться только после загрузки данной библиотеки.

‘20151215’ – необязательный параметр, который означает версию файла.

Иерархия шаблонов WordPress
Иерархия шаблонов WordPress

Для большинства пользователей WordPress — это черный ящик. Вы помещаете Read more

Как использовать функцию WP_Query
Как использовать функцию WP_Query

Понимание того, как использовать функцию wp_query может поднять ваши навыки Read more

Пользовательские Таксономии В WordPress
Пользовательские Таксономии В WordPress

В моей последней статье я писала о создании пользовательских типов Read more

Пользовательские типы записей WordPress (Custom Post Types)

Эта статья научит вас, как реализовать пользовательские типы записей WordPress. Read more

Создание темы WordPress — functions.php
Создание темы WordPress - functions.php

functions.php файл шаблона функций в WordPress действительно является двигателем вашей Read more

Создание темы WordPress – 404.php, Search.php, and Searchform.php
Создание темы WordPress – 404.php, Search.php, and Searchform.php

Сегодня мы поговорим о еще трех файлах, которые, если их Read more

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

семнадцать + 13 =