как-подключить-файлы-js-и-css-rntvt-wordpress

Как подключить файлы со стилями и скриптами к теме wordpress

Привет друзья. На сей раз хочу поделиться способом, как подключить собственные стили и скрипты к теме wordpress. Бывает, так что хочется расширить возможности своей темы, и добавить к ней чего то, что изначально не было предусмотрено её разработчиками. К счастью вордпресс – это очень гибкая платформа, и к ней можно добавить и убрать всё что хочешь.

Я нашёл два простых способа добавить собственные файлы css и java script и хочу подключить таймер обратного отсчёта на сайт:

  1. Регистрируем и ставим их в очередь в файле functions.php;
  2. Подключаем их к теме wordpress с помощью плагина zia3-css-js.1.0

Как подключить файлы css и js правильно

Если просто положить файлы со своими css стилями в папку темы с файлами css, (ну как в случае с обычным сайтом, свёрстанным на html), то движок вордпреcса их не увидит, и они работать не будут. Поэтому зарегистрируем их и сразу же подключим с помощью функций wp_enqueue_style и wp_enqueue_script() в файле темы functions.php. Для этого я скопирую код подключения фреймворка bootstrap в файле functions.php и переделаю его.

/**
* Enqueue Bootstrap
*/
function sydney_enqueue_bootstrap() {
wp_enqueue_style( 'sydney-bootstrap', get_template_directory_uri() . '/css/bootstrap/bootstrap.min.css', array(), true );
}
add_action( 'wp_enqueue_scripts', 'sydney_enqueue_bootstrap', 9 );

Вот этот же код в изменённом виде:

/**
* Enqueue Countdown
*/
function sydney_enqueue_countdown() {
wp_enqueue_style( 'sydney-custom', get_template_directory_uri() . '/css/custom.css', array(), true );
}
add_action( 'wp_enqueue_scripts', 'sydney_enqueue_countdown', );

  • bootstrap меняю на название моего счётчика countdown;
  • идентификатор файла sydney-bootstrap меняю на sydney-custom;
  • меняю путь к файлу ‘/css/custom.css‘, array(), true);
  • убираю девятку в последней строке.

Таким же образом подключаю второй файл со скриптами:

/**
* Enqueue Countdown
*/
function sydney_enqueue_countdown() {
wp_enqueue_style( 'sydney-custom', get_template_directory_uri() . '/css/custom.css', array(), true );

wp_enqueue_script( 'sydney-countdown', get_template_directory_uri() . '/js/countdown.js', array('jquery'), '', true );

}

add_action( 'wp_enqueue_scripts', 'sydney_enqueue_countdown' );

 

Теперь обновляем страницу и смотрим на html код страницы сайта (нажав на ctrl+u) и мы должны увидеть, что эти файлы подключены. Если же в коде страницы их не видно значит, они не подключились. Скорее всего, вы совершили какую-то ошибку и нужно внимательно всё посмотреть ещё раз.

 

Подключаем стили и скрипты дублируя существующий код

Также можно подключать файлы со стилями css и скриптами js просто ставя их в очередь на загрузку вместе с другими файлами темы. Для этого в своём файле functions.php находим приблизительно такой комментарий:

/**

 * Enqueue scripts and styles.

 */

Здесь написано, что это порядок на загрузку стилей и скриптов. Под комментарием идут подключаемые скрипты. Если вы хотите подключить свой файл css со стилями, просто продублируйте код темы и переделывайте его прописав в нём название своих файлов. Например, у меня есть такой код подключающий иконки:

wp_enqueue_style( 'sydney-font-awesome', get_template_directory_uri() . '/fonts/font-awesome.min.css' );

Здесь видно, что данный код подключает стили со шрифтами font-awesome к моей теме. Они лежат в папке fonts. Переделываем его так:

wp_enqueue_style( 'sydney-custom-style', get_template_directory_uri() . '/css/custom.css' );

Здесь мы видим, что был подключён файл custom.css, который лежит в папке css.

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

В качестве примера, я подключил к своей теме два файла: custom.css и countdown.js двумя вышеописанными способами. Оба они работают. С их помощью я показываю как подключить таймер обратного отсчёта на сайт. Таймер обратного отсчёта  – это маркетинговая фишка, которую используют в landing page  – «До конца акции осталось…» Ещё ни в одной теме вордпресс я не видал предустановленного таймера, поэтому эта информация может пригодится для тех кто захочет на движке WordPress сделать посадочную страницу .

 

Подключаем файлы с скриптами и стилями к теме wordpress с помощью плагина zia3-css-js.1.0

В этом случае всё ещё проще:

  • устанавливаем и активируем этот плагин на сайте;
  • открываем страницу, к которой ваши стили и скрипты должны быть подключены;
  • прокручиваем страницу в редакторе вниз и ставим галочки напротив нужных файлов;
  • не забываем обновить.

Плагин zia3-css-js, также даёт возможность подключать к странице сайта не только файлы со стилями, но сами стили напрямую к html коду, то есть делать инлайновое подключение. Для этого просто копируете нужные css объявления и вставляете в соответствующее поле и обновляете страницу.

 

Подключаем html код счётчика

В заключении вставляем html код таймера в wordpress. Для этого переключаемся в админке сайта с режима «визуальный редактор» в режим «текст» и вставляем код в нужное место. Так же этот код можно вставить в любое место на сайте с помощью стандартного виджета вордпресс называемого «текст».  Я сделал блок «Призыв к действию» на главной странице своего сайта и таймер в работе теперь можно посмотреть здесь.

Заключение

Иногда ваши собственные стили могут привести к конфликту со стилями темы, и вёрстка темы может «поехать» и некоторые стили темы переопределится. Чтобы восстановить всё к первоначальному виду нужно понять какие стили повлияли на вёрстку и затем убрать лишний код из подключаемых файлов css.

Если вам помогла эта статья, жмите на кнопки и оставляйте свои комментарии. Пока, пока 🙂

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

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

14 + 2 =