Блог Андрея Юрченко

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

Как подключить скрипт JQuery к WordPress

Привет друзья. В этой статье хочу поделиться тем, как можно подключить скрипт JQuery к теме WordPress. Порой для расширения или добавления функционала нам требуются различные скрипты для сайта и их подключение бывает затруднительным, а некоторые из них вовсе перестают работать. Сегодня мы рассмотрим способы подключения непосредственно к теме CMS WordPress.

скрипт для сайта, скрипт для wordpress, подключить скрипт jquery

Все началось с того, что решил я сделать на своем блоге кнопку «Вверх», при клике по которой вас возвращает в начало страницы, при помощи кода и скриптов и тем самым избавиться от плагина.

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

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

 Прямое подключение скрипта к шаблону

В файле «header.php» нужно прописать следующий код:

<script src=»<?php print get_template_directory_uri(); ?>/js/my-script.js» type=»text/javascript»></script>

Этот код позволяет нам размещать скрипты непосредственно в папке темы. В коде видим функцию get_template_directory_uri(), она возвращает путь до каталога с темой WordPress и данный скрипт  my-script.js мы можем поместить в подпапку js в папке самой темы.

Подключение скрипта из «functions.php»:

Для подключения скрипта JQuery или JavaScript к теме WordPress мы будем использовать функции add_action() и wp_enqueue_script(), вот пример:

<?php

add_action(‘wp_enqueue_scripts’, ‘twentytwelve_tabs’);

function twentytwelve_tabs() {

  wp_enqueue_script(‘twentytwelve_tabs’, get_stylesheet_directory_uri(). ‘/scripts/ my-script.js’, array(‘jquery’));

}

?>

В показанном выше коде скрипт «my-script.js» требует наличие подключения перед собой JQuery в третьем входном параметре wp_enqueue_script().

Некоторые скрипты не работают с JQuery в WordPress и это связано с тем, что при подключении библиотеки из дистрибутива WordPress она грузится в без конфликтном режиме для совместимости с другими популярными JS библиотеками.

Адаптация скрипта JQuery для WordPress

Для адаптации своего скрипта и встройки в WordPress для работы с JQuery нужно его немного переписать. К примеру мы имеем следующий код:

$(document).ready(function() {

  // Далее всякие конструкции…

});

Этот код не работает и мы его переделаем так, чтобы символ «$» воспринимался как требуется. К примеру, вот так:

!function ($) {

  $(function(){

    var $window = $(window)

    // Далее всякие конструкции…

  });

}(window.jQuery)

Можно еще вот так:

jQuery(document).ready(function($) {

  // Внутри этой функции $() будет работать, как синоним jQuery()

});

И вот такой вариант:

jQuery(document).ready(function(){

  jQuery(#somefunction) …

  // Все значки доллара $ здесь заменяем на JQuery.

});

Лично я применил второй вариант, в котором нужно переписать только одну строчку кода. Этот скрипт я применил для создания кнопки «Вверх» на своем сайте. Вот о ней и ее создании читайте в моей следующей статье. Читать статью

На этом все, теперь вы знаете как сделать скрипт для своего сайта на WordPress и надеюсь, что в этом вопросе я вам помог. Будут затруднения, пишите в комментариях к статье, я с радостью вам помогу по возможности. Желаю успехов.

С уважением, Андрей Юрченко

Поделитесь статьей в социальных сетях!

Подпишись на RSS-рассылку и получай новые статьи на почту!

Введите свой e-mail:

МАГИЧЕСКИЙ ШАБЛОН ПОДПИСНОЙ СТРАНИЦЫ В ПОДАРОК, ЗАБИРАЙТЕ

Оставить комментарий:

Комментарии: 2

Оставить комментарий
  1. Спасибо за полезную информацию. Надо добавить ваш блог в закладки

    1. Андрей:

      Всегда рад помочь. Будут вопросы, пишите-по возможности отвечу.

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Комментарии Вконтакте:

Content Tab Three

Блог Андрея Юрченко © 2016

ВВЕРХ