Как подключить javascript на странице или посте wordpress
В процессе работы с WordPress, иногда, возникает необходимость подключить javascript в посте или странице WP. Некоторые горе программисты решают эту задачу подключая все файлы яваскрипт в шапке или просто запихнув код в пост, если первый вариант невозможный. Сегодня я расскажу и покажу вам несколько вариантов подключения любого кода javascript на wordpress странице.
Навигация по странице:
Зачем нужно у вордпрессе подключать javascript на странице:
- Для вывода карты, проверки координат, запроса адреса и геолокации.
- Для вызова внешнего API 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 на странице, но он рабочий. Далее я расскажу вам другие способы добавления яваскрипт.
Добавляем javascript на страницу wordpress через wp_enqueue_script
к менюФункция 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);
}
}
Подключение wordpress javascript на странице в файле header.php
к менюЭто самый плохой вариант подключения 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'ка пойдет. У меня такой вопрос: можно ли массивом добавлять идентификаторы страниц? Влияет ли вложенность страниц на срабатывание скрипта? Буду рад ответу.