Если вы веб-разработчик и создаете веб-сайты с помощью 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’ – необязательный параметр, который означает версию файла.