В процессе работы с WordPress, иногда, возникает необходимость подключить javascript в посте или странице WP. Некоторые горе программисты решают эту задачу подключая все файлы яваскрипт в шапке или просто запихнув код в пост, если первый вариант невозможный. Сегодня я расскажу и покажу вам несколько вариантов подключения любого кода javascript на wordpress странице.
Навигация по странице:
Зачем нужно у вордпрессе подключать javascript на странице:
к менюСамый простой способ вставки javascript на странице wordpress - запихнуть его в шорткод и вызвать в нужном месте.
Делается это довольно просто:
1) Открываем файл темы functions.php.
2) В самом начале файла создаем шорткод вот таким способом:
Если нужно подключить отдельный файл javascript:
<?php function myJavascript1(){
$str='<script type="text/javascript" src="мойсайт/js/script.js"></script>';
return $str;
}
add_shortcode( 'myJavascript1', 'myJavascript1');?>
или же вот такой код, если вам нужно вывести код в странице WordPress:
<?php function myJavascript1(){
$str='<script type="text/javascript">alert("пример");</script>';
return $str;
}
add_shortcode( 'myJavascript1', 'myJavascript1');?>
Вместо alert("пример"); можно писать свой яваскрипт код, только следите чтоб кавычки были правильные и не конфликтовали. Все ' надо закрывать в /' для яваскрипта внутри этого ПХП.
3) Для вызова шорткода воспользуйтесь кодом [myJavascript1] - его можно вставить в любое место вашего поста или страницы WP.
Более подробно о том, как создать шорткод wordpress (откроется в новом окне) читайте по ссылке.
Многие программисты могут меня упрекнуть, что мол это не самый хороший код для вызова wordpress javascript на странице, но он рабочий. Далее я расскажу вам другие способы добавления яваскрипт.
к менюФункция wp_enqueue_script идеально подходит для подключения яваскрипта к теме, но немножко туговато для подключения к отдельной странице, но все же с точки зрения правильности кода, такой вариант более правильный чем первый.
Подробные параметры функции wp_enqueue_script (откроется в новом окне) можно прочитать перейдя по ссылке, сейчас я вам покажу пример для отдельной страницы и отдельного поста.
Предположим, что нам нужно подключить javascript файл "myScript.js" для страницы с идентификатором 15, которому для работы нужна библиотека jQuery:
1) Открываем файл темы functions.php.
2) В самое начало записываем код:
add_action( 'wp_enqueue_scripts', 'my_scripts_add' );
function my_scripts_add(){
if(is_page(15)){
wp_enqueue_script("myScript", get_bloginfo( 'stylesheet_directory' ) . '/js/myScript.js',array('jquery'),"0.1",false);
}
}
3) Сохраняем, и заливаем на сервер, теперь на странице 15 будет вызываться файл под именем myScript.js
4) Если нам потребуется подключить этот javascript для поста wordpress с ид 21, то код будет такого плана:
add_action( 'wp_enqueue_scripts', 'my_scripts_add' );
function my_scripts_add(){
if(is_single(21)){
wp_enqueue_script("myScript", get_bloginfo( 'stylesheet_directory' ) . '/js/myScript.js',array('jquery'),"0.1",false);
}
}
к менюЭто самый плохой вариант подключения javascript на странице WordPress, - я решил расказать о нем лиш по тому, что он лучше чем просто закинуть код в редактор записи, а также его реализация более проста для новичков.
1) Открываем файл темы header.php.
2) Перед закрывающимся тегом </head> пишем:
<?php if(is_page(15)){?><script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/myScript.js"></script><?php }?>
или вот так, если нам нужно подключить файл до поста:
<?php if(is_single(21)){?><script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/myScript.js"></script><?php }?>
или вот так если нужно до категории:
<?php if(is_category(2)){?><script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/myScript.js"></script><?php }?>
3) Если вам нужно не подключить код, а просто вывести его, то выглядеть это будет по аналогии с пунктом 2:
<?php if(is_page(15)){?><script type="text/javascript">тут ваш яваскрипт код</script><?php }?>
На этом у меня все, надеюсь эти 3 реализации подключения javascript на странице wordpress помогут вам правильно подключить код или вывести его.
Благодарю за ответ. Вчера я пришел к этому сам, сочинив вот такой велосипед: (и это далеко не все страницы )) )
function tables_template_scripts(){
if( is_page(array('187','223','212','214','217','245','241','239','223','225','235','229','233','227','243','231','219','198','192','210','196','208','221')) )
wp_enqueue_script("js-zoom", get_template_directory_uri() . '/js/jquery.zoom.js',array('jquery'), '', false);
wp_enqueue_script("js-count", get_template_directory_uri() . '/js/count.me.js',array(), '', false);
wp_enqueue_script("js-bedview", get_template_directory_uri() . '/js/bed-veiw.js',array(), '', true);
}
add_action( 'wp_enqueue_scripts',
'tables_template_scripts' );
Я думал в таком ключе, если у меня есть родительская страница, а остальные к которым нужно подключить скрипты - ее дочерние, то сделав запрос if (is_page(родительская), как-то состыковать с запросом get_page_children и подключить скрипты. Вариант с шорт-кодом, хоть и не предполагает автоматизации, но на крайний случай тоже сгодится(( Так же, читая коментарии я понял, что один из скриптов с функцией onclick нужно передавать именно в text/javascript в консоли кидает ошибку ReferenceError: event is not defined библиотека jquery-1.10.2.min.js (в functions.php jquery по умолчанию). У Вас хороший сайт, посоветуйте свою статью про поиск wp с ajax без отдельного плагина? (если сталкивались).
Да, сложно с wp после october, сортировки медиафайлов нет, bootstrap 4 меню, чтобы полностью вывести с depth 3 знатно покрасноглазил (в итоге поменял разметку), для подключения конкретных скриптов и стилей нужен массив с id поста, иное почему-то у меня не прокатило, плагины на бесплатном хостинге, либо отказываются работать, либо работают корректно только их платные версии, в общем я повеселился, поседел и запил)) Благо уже на финишной прямой. Успехов!
А можете написать код как скомбинировать шорткод и wp_enqueue_script ?
Спасибо
ДД, а чем плох первый способ?
ДД, чем плох 1й способ? Вроде наоборот, скрипт грузится только на нужных страницах. Если таких не много, то это положительно сказывается на работе сайта...
Спасибо.
Но как во втором случае сделать подключения без указания номера страницы?
1. Страниц,постов может быть несколько. (Как указать несколько страниц/постов?)
2.Каждый раз лезть в код чтобы добавить новый номер не совсем удобно.
Со страницами наверное можно использовать специально созданный шаблон, и подключать только в нем.
Только как модифицировать if чтобы проверялся шаблон?
Хотя наверное можно и с постами и с использовать мета поле, скажем script = 1, тогда подключается скрипт.
Так правильно будет?
Не совсем понял последний вариант. Нужно вставлять код прямо на странице? Вроде же это не очень хорошо?
В общем с нетерпением жду обновления статьи с "правильным решением" подключения по требованию скриптов на странице/постах.))
Спасибо
Давайте я поясню на своем примере.
Я хотел бы подключить скрипт кластеризации карт от гугл. Но используется он всего лишь на нескольких страницах их 600 (там где я вывожу карты). Скрипт достаточно тяжелый. Зачем грузить его на все страницы? Шорткодом было бы удобно, но вы говорите это не правильно.
Вот и думаю как сделать так чтобы только на определенных страницах/постах подключался этот скрипт, но, при этом, это было бы правильно реализовано. Через мета поле, как мне кажется, это было бы самым удобным вариантом.
Здравствуйте! Подскажите, пожалуйста, как реализовать следующую конструкцию в wordpress?
<a href="#maps" rel="nofollow">
Заранее спасибо!
А что делать, если нужно сделать шорткод скрипта состоящего из нескольких файлов, такой вот (-url-)
подключила в header.php как для новичка.
Работает, спасибо!
Добрый день!
Как мне вывести вот этот код javascript в странице WordPress:
<!--
d0 = new Date('October 10, 2012');
d1 = new Date();
dt = (d1.getTime() - d0.getTime()) / (1000*60*60*24);
document.write('' + Math.round(dt) + '');
-->
Мне нужен Шорткод, чтобы я мог вставлять его где нужно.
Пытался сделать с помощью:
<?php function myJavascript1(){
$str='alert("пример");';
return $str;
}
add_shortcode( 'myJavascript1', 'myJavascript1');?>
Но даже слова "Пример" не вижу после вставки шорткода.
Добрый день. Это конечно хорошо. Скрипт я подключил. Но как блин вызвать функцию из этого скрипта? onClick по кнопке wordpress обрезает. Я уже запарился гуглить...
Я не большой любитель WP, но вот заказали на нем сайт, да и сам подумал, что для человека никогда не администрировавшего сайт, cms'ка пойдет. У меня такой вопрос: можно ли массивом добавлять идентификаторы страниц? Влияет ли вложенность страниц на срабатывание скрипта? Буду рад ответу.