Как подключить 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 помогут вам правильно подключить код или вывести его.
-
-
ДД, а чем плох первый способ?
-
ДД, чем плох 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_enqueue_script ?
Спасибо