Главная › Новости

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


Опубликовано: 01.09.2018

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

WordPress 101 - Part 2: How to properly include CSS and JS files

Многие начинающие веб-мастера и блогеры для создания собственного сайта, используют готовый программный «движок». На сегодняшний день существует большой ассортимент CMS – Системы управления содержимым. Все они в той или иной мере функциональны, а различия их скрываются в мелочах, которые можно самостоятельно подкорректировать.



Одним из наиболее удобных, функциональных и бесплатных CMS, является WordPress. Данная программа просто предназначена для создания блогов, однако, может быть использована в иных проектах.

Подключение JavaScript в WordPress

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


How To Add Javascript To WordPress

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

<?php add_action('wp_head', 'wpb_bad_script'); function wpb_bad_script() { echo 'jQuery goes here'; } ?>

Этот вариант подключения JavaScript в WordPress является неправильным. К примеру, если вы загружаете jQuery вручную, и в то же время один из плагинов также подключает библиотеку jQuery по правильному пути, то в итоги получится что загрузка происходит дважды. А еще возможно, что это могут быть две разные версии, которые будут вызывать конфликт.


Properly Add JavaScript and Styles easily in WordPress EASY

Наиболее приемлемый вариант

Благодаря тому, что WordPress является полностью открытым и бесплатным приложением, неудивительно, что оно имеет огромное количество пользователей. Среди которых немало и программистов помогающим главным разработчикам и выпускают различные расширения. Это касается и добавления плагинов, после которого не произойдет каких-либо недоразумение.

Поэтому, имеется встроенная функция wp_enqueue_script, которая позволяет использовать изначально встроенный JavaScript. Данная функция подразумевает постановку сценария скрипта в очередь. Благодаря этому, происходит их проверка и открытие с помощью интегрированного в систему JS.

Правильное добавление сценария в WordPress

Описанная выше, загрузка сценариев (более правильная), производится с помощью довольно простого способа. Ниже, будет представлен код, который необходимо будет внести в файл functions.php или же в собственный файл плагинов.

Загрузка скрипта из темы оформления.

function wws_adding_scripts() { wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/my_script.js', array('jquery')); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wws_adding_scripts' );

Загрузка скрипта из плагина.

function wws_adding_scripts() { wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wws_adding_scripts' );

Примечание: Данная функция утверждает 5 параметров:

1) $handle. Эта функция представляет собой название скрипта. В данном примере она имеет название “my_amazing_script”. Поэтому, на ее место нужно будет вписать иное название.

2) $srс. SRC сокращенно Source (по-русски — источник). Данный параметр представляет собой расположение скрипта. В примере, используется функция под названием «plugins_url» для получения корректного веб-адреса, для директории (папки), в которой находятся файлы скрипта.

3) $deps. Эта функция используется для совместимости. Так как скрипт использует JQuery, то логично добавить его в данную область. Благодаря этому, WordPress автоматически осуществит его загрузку.

4) $ver представляет собой номер скрипта. В данном случает функция не требуется.

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

В итоге вводится команда «wp_enqueue_script()», которая позволяет запуститься скрипту.

Правильное добавление style.css (стилей) в WordPress

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

function wpb_adding_styles() { wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__)); wp_enqueue_script('my_stylesheet'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );

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

В примере мы, использовали команда «plugins_url». Но, если вы подключаете скрипт внутри вашей темы оформления, то нужно воспользоваться этой командой — get_template_directory_uri ().

А также если вы работаете с дочерней темой, то можно использовать команду «get_stylesheet_directory_uri». Пример использования:

function wpb_adding_scripts() { wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Больше информации по функциям:

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

Источник: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/

rss