WordPress jquery


Для подключения скриптов JavaScript и JQuery в WordPress предусмотрена специальная функция wp_enqueue_script(). И очень важно подключать собственные скрипты используя именно ее. Функция избавит от подключения скрипта несколько раз (если один из плагинов уже использует одноименный скрипт), предотвратит конфликт скриптов и правильно подключит зависящие от библиотеки jQuery скрипты (после подключения библиотеки).

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

Данный код подключает JavaScript в header шаблона WordPress.

function my_scripts_method() {  	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js' );  }  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
  • my_scripts_method — название вашей функции, можно любое, какое придет на ум, без пробелов, в нижнем регистре;
  • wp_enqueue_script — функция для подключения js файлов WordPress;
  • custom — название скрипта, любое, главное не повторять при подключении нескольких скриптов;
  • get_template_directory_uri() — указывает на то, что скрипт находится в папке с шаблоном сайта, путь к файлу;
  • /js/custom.js — в данном случае подключаемый скрипт должен находиться в папке js, custom.js — название js файла;

Для увеличения скорости загрузки сайта логичнее подключать скрипты в footer сайта, если скрипт не участвует в отрисовке страницы.

Данный код подключает JavaScript в footer шаблона WordPress.

function my_scripts_method() {  	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', true );  }  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Все то же самое, только добавлено true — команда для подключения JavaScript в footer.

Подключение зависящих от библиотеки JQuery скриптов к WordPress

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

function my_scripts_method() {  	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array('jquery') );  }  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

array(‘jquery’) — указывает зависимость от библиотеки JQuery.

Здесь не указывается, в какую область шаблона подключать скрипт (footer или header), так как он в любом случае будет подключен сразу после библиотеки JQuery, в массиве зависящих от нее скриптов.

Можно указать версию подключаемого скрипта к WordPress

 

function my_scripts_method() { wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0'); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

‘1.0.0’ — Строка указывающая версию скрипта, если она у него есть.

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

Если версия не проставлена, то WordPress сам присвоет свою версию. Если указать null, то никакая версия не будет добавлена.

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

В данном примере подключается скрипт bootstrap.min.js с сервера CDN Google.

function my_scripts_method() {  	wp_enqueue_script( 'bootstrap', '//ajax.googleapis.com/ajax/libs/jquery/3.3.7/bootstrap.min.js');  }  add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

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

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

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );  function my_scripts_method(){  	wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/patch/to/js/my-script.js', array( 'jquery' ), true );  }  

Перерегистрация, обновление библиотеки jQery

Иногда нужно поменять библиотеку jQery WordPress на более свежую. Для этого нужно использовать такой код:

function my_scripts_method() {  	wp_deregister_script( 'jquery' );  	wp_register_script( 'jquery', get_template_directory_uri() . '/inc/js/jquery.min.js', false, null, true );  	wp_enqueue_script( 'jquery' );  }   add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

svsites.ru

jquery

Я много раз писала про JQuery, в том числе и совместном его использовании в WordPress. Но о самом главном — о том как же все-таки правильно подключить его в шаблон, не разу не говорила, поскольку не придавала этому большого значения. И сегодня пришло время исправиться, и написать небольшую заметку об этом.

Если хотите, вы можете просто загрузить JQuery, положить на свой сервер и прописать ссылку на него в header.php


, в секции <head>. Но это может причинить вам неудобства. Одна из причин — некоторые плагины использующие библиотеку JQuery, будут пытаться ее загрузить. Это может вызвать проблемы, поскольку плагину не будет известно, что она уже загружена.

Вторая причина в том, что Worpress уже включает в себя копию JQuery. Далее вы узнаете как можно загрузить JQuery в свою тему, правильным способом. Вставьте следующий код в файл header.php, в секции <head>:

  <?php wp_enqueue_script("jquery"); ?>    <?php wp_head(); ?>  

Ваша тема вероятно уже включает в себя функцию wp_head, так что убедитесь что вы расположили вызов функции wp_enqueue_script ДО функции wp_head. Теперь вы можете включить вызов своего собственного JQuery JavaScript-файла ПОСЛЕ функции wp_head.

  <script type="text/javascript"   src="<?php bloginfo("template_url"); ?>/js/yourScript.js"></script>  

(прим. автора Функция wp_enqueue_script


(), как раз используется для безопасного подключения javascript в тему WordPress. Она может принимать следующие параметры:

  <?php wp_enqueue_script( $handle, $src, $deps, $ver ); ?>  

$handle
(строка) (обязательный) Название скрипта. Без регистра.
По умолчанию: Нет

$src
(строка) (необязательный) Путь к скрипту из корневой директории WordPress. Например: «/wp-includes/js/scriptaculous/scriptaculous.js«. Этот параметр необходим только когда WordPress ничего не знает об этом скрипте.
По умолчанию: Нет

$deps
(массив) (необязательный) Массив указателей на любые скрипты, от которых зависит этот скрипт; скрипты, которые должны быть загружены до этого скрипта. false — если зависимостей нет. Этот параметр необходим только в том случае, когда WordPress ничего не знает об этом скрипте.
По умолчанию: Нет

$ver
(строка) (необязательный) Строка указывает номер версии скрипта, если их несколько. По умолчанию значение false. Этот параметр используется для обеспечения отправки пользователю, правильной версии скрипта, независимо от кэша, и он обязательно должен быть включен, если доступен номер версии, и он влияет на работу скрипта.
По умолчанию: Нет).


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

Чтобы максимально обезопасить себя от конфликтов, в можете перевести JQuery в «неконфликтный» режим и использовать другой шорткод. В нашем примере «$j» вместо дефолтного «$». Стандартный шорткод «$», например, может конфликтовать с Prototype. Далее пример безопасного использования JQuery:

  var $j = jQuery.noConflict();    $j(function(){     $j("#sidebar li a").hover(function(){   	$j(this).stop().animate({   		paddingLeft: "20px&amp;"   	}, 400);   }, function() {   	$j(this).stop().animate({   		paddingLeft: 0   	}, 400);   });    });  

Можете ли вы узнать этот код? Мы использовали его для добавления анимации ссылок в сайдабре темы.

Оригинал статьи.

dreamhelg.ru


20 новейших лендингов для Вордпресс 2018 года

У разработчика не было злого умысла, он пошел на это скорее всего по своей неопытности — используемая им карусель jQuery Roundabout 2.4.2 очень старая, и со свежей версией jQuery некорректно работала анимация. Точнее, не работала совсем. К сожалению, он не нашел ничего лучшего, как перед загрузкой карусели прямо в коде загрузить старую версию jQuery 1.7.1. Про консоль браузера, в которую посыпалась куча ошибок, этот горе-разработчик видимо не слышал. Многие ошибки были критические и положили часть функционала сайта. Именно по этой причине, сайт попал ко мне в работу.

Как подключить jQuery к Вордпресс

Итак, прежде чем подключать jQuery, откроем HTML-код страницы и убедимся, что jQuery не подключен ранее активной темой или каким-то из плагинов. Все подключаемые скрипты в Вордпресс должны регистрироваться и загружаться с помощью функции wp_enqueue_script() для того, чтобы плагины были в курсе о подключении той или иной библиотеки, знали о зависимостях и не загружали повторно одинаковые скрипты.

Если в HTML-коде сайта нет упоминаний о jQuery, значит инициируем его подключение в файле functions.php активной темы. jQuery в Вордпресс подключается проще всего, т.к. он зарегистрирован по-умолчанию, его можно загрузить сразу по имени-ярлыку ‘jquery’.

wp_enqueue_script('jquery');  

Как подключить к Вордпресс другой jQuery

Рассмотрим другую ситуацию, когда jQuery уже подключен в теме или плагине, а нужна его другая версия или необходимо загрузить jQuery из другого источника, например, с CDN.

Сначала нужно дерегистрировать ранее загруженный jQuery.

wp_deregister_script('jquery');

А затем зарегистрировать новый. Например, так:

wp_register_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js', false, null); wp_enqueue_script('jquery'); }

Напомню, функция wp_register_script() имеет несколько параметров: wp_register_script($handle, $src, $deps, $ver, $in_footer);

  • $handle — ярлык, уникальное имя скрипта;
  • $src — путь к скрипту;
  • $deps — массив скриптов от которых зависит загружаемый скрипт;
  • $ver — версия;
  • $in_footer — загрузка скрипта в футере.

Как подключить к Вордпресс другие скрипты

С другими скриптами тоже ничего сложного нет. Допустим, у нас есть некий скрипт script.js, который лежит в директории /js/ активной темы. Он подключается аналогично в functions.php, указываем путь и придумываем уникальный ярлык ‘myscript’, например.

wp_enqueue_script('myscript', get_template_directory_uri() . '/js/script.js');  

В заключение

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

И возвращаясь к jQuery Roundabout. Чтобы карусель работала со свежими версиями jQuery, в коде Roundabout нужно найти такую строку:

newBearing = methods.normalize.apply(null, [newBearing]);

и заменить её на такой код:

if (true) { newBearing = passedData.start + ((bearing - passedData.start) * newBearing); }

Ничего сложного.

Всё самое новое и интересное из мира Вордпресс в моём Телеграм-канале. Подписываемся!

danilin.biz

В WordPress по умолчанию подключается библиотека jQuery. Поэтому не обязательно подключать дополнительные библиотеки jQuery, достаточно в файле functions.php подключить уже имеющуюся:


 wp_enqueue_script("jQuery"); 

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

 wp_enqueue_script('my-custom-script', get_template_directory_uri() .'/js/my-custom-script.js', array('jquery'), null, true); 

Загвоздка в том, что эта копия jQuery находится а режиме совместимости по умолчанию. Это означает, что типичный псевдоним $ для jQuery не работает, поэтому он не конфликтует с другими библиотеками JavaScript, которые также используют знак доллара, например MooTools или Prototype.

Многие авторы плагинов и разработчики тем знают об этом, и они используют jQuery вместо $.

 /* Normal jQuery you see everywhere */ $("#some-element").yaddaYaddaYadda();  /* "Safe" jQuery you see in WordPress */ jQuery("#some-element").yaddaYaddaYadda(); 

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

 (function($) {   // $ Works! You can test it with next line if you like  // console.log($);  })( jQuery ); 

Если необходимо загрузить скрипты в хедере, тогда необходимо использовать функцию document ready, тогда вы сможете использовать $ внутри нее.

 jQuery(document).ready(function( $ ) {   // $ Works! You can test it with next line if you like  // console.log($);  }); 

Чтобы быть супербезопасным, вы можете поместить jQuery в режим «no conflict» и использовать другой ярлык для jQuery. В этом случае $j вместо стандартного $. Например, стандартный $ может конфликтовать с Prototype. Вот пример безопасного использования jQuery JavaScript:

 var $j = jQuery.noConflict();  $j(function(){   $j("#sidebar li a").hover(function(){  $j(this).stop().animate({  paddingLeft: "20px&"  }, 400);  }, function() {  $j(this).stop().animate({  paddingLeft: 0  }, 400);  });  }); 

Источник

denis-creative.com

Подключаем jquery правильным образом

Для этого вам нужно соединиться с сайтом по ftp (как, смотрите тут), либо зайти из админки Внешний вид — Редактор. В общем, получить возможность редактирования кода.

Далее вам нужно найти functions.php, именно в него мы будем вставлять наш код для подключения библиотеки. Вот сам код, вставьте его в начало или конец файла:

function load_jquery (){
wp_enqueue_script ('jquery_me', get_template_directory_uri ().'/js/jquery-3.0.0.min.js');
}

Это код из шаблона одного из моих сайтов, вам, скорее всего, придется подредактировать его под себя. Тут мы пишем свою пользовательскую функцию, в которой вызываем функцию wp_enqueue_script. Она, в свою очередь, имеет 2 параметра: название (заполняем произвольно) и путь к файлу. Чтобы получить универсальный путь, используем функцию get_template_directory_uri() и соединяем ее со строкой, где прописывается путь уже исходя из корня шаблона.

Соответственно, вам нужно проверить, действительно ли в корневой папке вашего шаблона лежит каталог js, в котором есть файл jquery-3.0.0.min.js. Возможно, у вас каталог называется по-другому, другая версия jquery или просто она не сжатая и т.д. Во всех этих случаях вам нужно внести соответствующие правки в путь к файлу, чтобы у вас все подключилось правильным образом.

Отлично, саму функцию мы написали, остается вызывать ее при загрузке сайта, чтобы наша библиотека успешно подключилась. Для этого ниже добавьте такой код:
add_action('wp_enqueue_scripts', 'load_jquery');

Мы используем экшн или, как его еще называют — хук. Хук wp_enqueue_scripts подгружает к шаблону скрипты, а с помощью этой строчки кода мы даем движку команду — мол, выполни также при подгрузке функцию load_jquery. В этой самой функции движок выполняет подключение библиотеки.

Все, библиотека jquery успешно подключена к движку, в чем вы сможете убедиться, как только попробуете реализовать какой-нибудь скрипт с ее помощью. Если у вас все же остались вопросы, пишите в комментарии, а у меня на этом все!

dolinacoda.ru

Библиотека jQuery используется на многих веб сайтах. В wordpress библиотека jQuery используется тоже. Многие плагины wordpress и шаблоны имеют имеют скрипты написанные на jQuery. Хочу рассказать (я не автор) об одном из способов, как можно «сэкономить» на jQuery в wordpress.

Недавно на блоге Константина я прочитал статью «25 советов по улучшению вашего кода jQuery«. Кто интересуется jQuery советую прочитать все 25 советов, на блоге автора. Я же остановлюсь на 1 совете — «Загружайте библиотеку с Google Code». Тех кто захочет возразить, имхо с своего сервера всегда быстрее, не хочу сильно огорчать, я лично не заметил, может быть у меня сервер плохой. Используя данный способ библиотека jQuery скорее всего уже будет находиться в кеше у пользователя и не будет подгружаться с вашего сайта. Чем ни больше пользователей wordpress и других веб сайтов используют jQuery с данного URL, тем у большего числа пользователей jQuery будет браться из кэша, т.к. уже ранее она была загружена на обном из блогов, где используется этот способ. Также хочу заметить, что к примеру jQuery 1.3.2 весит 19кб (gzip), мой же сервер отдает без gzip и вес библиотеки jQuery примерно в 2 раза больше, если вспомнить про людей, у которых низкоскоростной интернет, то страница у них откроется быстрее, но это так к слову просто ).
jQuery в WordPress

Из картинки видно, что если использовать этот способ, то пользователю достаточно загрузить бибилиотеку jQuery всего 1 раз с любого из блогов, с остальных блогов и при повторном обращении к этому блогу, jQuery будет находиться уже в кеше браузера.

Не долго думая, друг поделился кодом, который заставляет wordpress подгружать jQuery не из папки с движком wordpress, а с google. В файл шаблона function.php нужно дописать следующий код:

Я использую wordpress 2.6.5 собственной сборки, поэтому мне хватает jQuery 1.2.6, хотя можно использовать jQuery 1.3.2 но для меня это не принципиально. Чтобы использовать jQuery 1.3.2 пишем следующее:

Я уже использую этот способ, предлагаю и вам.

my-wordpress.ru

Как отключить и подключить jQuery в WordPress

В статье про удаление лишнего кода из header вы уже могли видеть код, позволяющий отключить jQuery в WordPress:

Размещается эта конструкция в файле functions.php. Условие is_admin позволяет убрать библиотеку только на самом сайте (фронтэнде), если там она вам не нужна. При этом в WP админке скрипт останется для корректной работы всех функций. Данный вариант сработает, когда jQuery добавляется с помощью вызова wp_head в header.php. В некоторых шаблонах вы можете встретить вставку библиотеки напрямую через тег script. В таком случае дабы его отключить просто убираете данную строку.

Вообще, следует заметить, что использовать подключение jQuery в WordPress напрямую с помощью тега script в HEAD крайне не желательно:

Это ошибка! Она, во-первых, может повлечь за собой конфликт между скриптами, вызываемыми разными модулями, во-вторых, мешает оптимизации кода. Лучше следовать правилам системы вордпресс и использовать специальную функцию wp_enqueue_script дабы корректно подключить библиотеку WordPress jQuery. Код размещается в functions.php:

После выполнения данных строк в результирующем HTML коде сайта появится строка со script из примера выше. Но повторюсь, добавлять этот тег в шаблон напрямую не есть правильно!

Как обновить jQuery в WordPress

Если говорить о моей задаче с обновлением библиотеки, то здесь весь процесс состоит из двух частей — сначала нужно отключить в Вордпресс jQuery скрипт, а затем заново активировать. При этом используются функции wp_deregister_script, wp_register_script,wp_enqueue_script. Вот нашел статью где о них можно почитать детальнее, если вкратце, то:

  • wp_register_script — регистрирует скрипт, который нужно подключить (автоматически он не грузится);
  • wp_enqueue_script — загружает скрипт для сайта/темы/плагина;
  • wp_deregister_script — удаляет зарегистрированный ранее скрипт.

Итого код обновления jQuery в WordPress для functions.php выглядит следующим образом:

Здесь есть несколько нюансов:

  • Используемый мною путь на ajax.googleapis.com позволяет подключить в WordPress библиотеку jQuery самой последней и актуальной на данный момент версии (по желанию вы можете указывать какое-то конкретное значение).
  • Значения true в качестве самого последнего параметра будет грузить jQuery в футер, если это возможно. Тут уж для вывода нужна не wp_head, а функция wp_footer, которая также должна быть в каждой теме.
  • После обновления jQuery важно проверить работоспособность установленных плагинов/скриптов на сайте. Если им для работы требуется данная библиотека, то она дожна вызываться раньше, поэтому, вероятно, перенос кода в футер не всегда подойдет.
  • Данный код подключает jQuery с CDN Google вместо базового скрипта из самой системы вордпресс. Технология CDN позволяет использовать файлы с наиболее близкого для пользователя сервера, что ускоряет загрузку.

Кстати, если вы внимательно посмотрите на HTML код своих WP сайтов, то зачастую там вместе с jQuery можно заметить еще один похожий скрипт — jquery-migrate.min.js. Данная библиотека позволяет устранить все несовместимости вашего шаблона/модулей с более ранними версиями jQuery 1.9.x и ниже. Если при обновлении библиотеки jQuery в Вордпресс вам нужно оставить этот migrate скрипт, то предыдующий код будет иметь иной вид:

Параметр jquery-core указывает на то, что заменяться будет только основной скрипт библиотеки, а jquery-migrate.min.js данная процедура не затронет. Кстати, в этом случае скрипт jQuery почему-то не хочет грузиться в футере (хотя это не столь важно).

WordPress плагин jQuery Updater

В поисках решения задачи я наткнулся на специальный плагин jQuery Updater, который может помочь обновить библиотеку до последней официальной версии. Учитывая то, что модуль использует версию jQuery 2+ сюда также включен скрипт Migrate, о котором мы рассказывали выше.

Wordpress jquery

В описании модуля сказано, что он обновляет jQuery до самой актуальной версии, которая, скорее всего, старше той, что использует вордпресс на вашем сайте. Однако не совсем понятно, почему при этом в FAQ на вопрос нужен ли плагин, если у вас установлена самая последняя версия WP, — автор говорит, что он не требуется. Немного странно.

Я так понимаю модуль пригодится, если какой-то плагин, скрипт или стороннее решение требует наличие библиотеки более старшей версии нежели поддерживается последним релизом WP. У меня на сайте как раз и была такая ситуация — использовалась самая акуальная версия вордпресс но jQuery, загружаемая фреймворком/шаблоном была морально устаревшей. В таком случае вы либо делаете все изменения вручную, либо пробуете работать с модулем. После его активации никаких дополнительных действий делать не нужно. Если же установка WordPress jQuery плагина приводит к появлению глюков на сайте, то лучше его отключить.

Я, в принципе, больше склоняюсь к варианту с правкой файла functions.php. В данном вопросе нет ничего слишком сложного чтобы ставить дополнительный модуль. Если у вас есть что добавить про jQuery в вордпресс, пишите комментарии.

wordpressinside.ru

Как нужно подключать скрипты

В WordPress, процесс подключения скриптов называется «enqueueing» (примерно, постановка в очередь).

Если на обычном HTML сайте мы используем тег для добавления Javascript, то в WordPress нужно делать это с помощью специальных функций.

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

Таким образом, если вы работаете с темой, то вам нужно использовать функцию wp_enqueue_script () в файле functions.php. Только так вы сможете организовать правильное подключение скрипта, не приводящее к конфликтам со встроенными библиотеками. Это выглядит так:

function simple_script () {
wp_enqueue_script('first-simple-script', get_template_directory_uri() . '/js/first-simple-script.js', array('jquery'), '1.1.1', true);
}
add_action ('wp_enqueue_script', 'simple_scripts');

Данная функция принимает 5 аргументов, которые нужно указывать для подключения собственного скрипта. В эти аргументы входят такие данные, как:

  1. Имя скрипта (должно быть уникальным и записываться в нижнем регистре);
  2. Полный URL-адрес к файлу или путь по отношению к корневой директории (задается только тогда, когда он подключается первый раз);
  3. Массив зависимостей, обрабатывающий очередность подключения (не обязательно);
  4. Номер версии скрипта (если он один), который добавляется к URL в виде строки запроса для очистки кэша;
  5. Следует ли загружать сценарий перед тегом , а не внутри (по умолчанию, false).

Обратите внимание, хоть массив зависимостей указывать и не обязательно, но если ваш сценарий зависит от какой-то библиотеки, то желательно все-таки это сделать. Это нужно для того, чтобы он всегда загружался после основной библиотеки. Так же, последний аргумент имеет значение true, чтобы подключение происходило в конце страницы и не замедляло ее загрузку.

Помимо этой функции, вы также можете сделать подключение сценария только в панели администратора или на странице входа. Для этого, существуют такие хуки, как admin_enqueue_scripts () и login_enqueue_scripts () соответственно. Они принимают точно такие же параметры, как и в предыдущем случае.

Режим совместимости

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

Из-за этого режима совместимости, вам нельзя пользоваться в своих сценариях псевдонимом идентификатора $, как в других проектах. Когда вы пишите для WordPress, вам обязательно нужно делать прямое обращение вместо псевдонима, иначе высока вероятность получения ошибок совместимости. Вот что имеется ввиду:

/* Обычный код */
$(function(){
$("title h1").css("font-size", "30px");
});})

/* Код в режиме совместимости */
jQuery(function(){
jQuery("title h1").css("font-size", "30px");
})

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

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

(function($) {
Здесь можно использовать $
})(jQuery);

Если вы, все-таки, загружаете свои сценарии в начале страницы (чего желательно не делать), то вы можете просто включить весь код в функцию document-ready, передавая псевдоним $ по пути. Вот так:

jQuery(document).ready(function($) {
Здесь тоже можно использовать $
});

Используйте условные теги

Многие разработчики рекомендуют использовать условные теги для своих сценариев, чтобы загружать их только тогда, когда это необходимо. Чаще всего, подобный подход применяют для панели администратора, где требуется подключение сценариев только на конкретной странице, а не на всей панели.

Это значительно экономит пропускную способность и время обработки страницы, что означает более быструю загрузку вашего сайта. Более подробно с этим подходом можно ознакомиться в кодексе Вордпресс, на странице хука admin_enqueue_scripts ().

Вывод

Добавлять простые скрипты в WordPress совсем не сложно, если знать, как правильно это делается. Конечно, здесь все немного запутанней, чем в обычном HTML, но это дает и дополнительные преимущества. Например, вы можете самостоятельно управлять зависимостями, что исключает возможность возникновения конфликтов практически полностью.

Похожие статьи

wordpresslib.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.