Как подключить javascript на странице или посте wordpress

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

Навигация по странице:

 

Зачем нужно у вордпрессе подключать javascript на странице:

  1. Для вывода карты, проверки координат, запроса адреса и геолокации.
  2. Для вызова внешнего API JavaScript.
  3. Для Аякс запроса и многое другое.

Подключаем 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 помогут вам правильно подключить код или вывести его.

Комментарии к записи «Как подключить javascript на странице или посте wordpress»:
  1. alexey:
    03.03.2017 в 12:48

    А можете написать код как скомбинировать шорткод и wp_enqueue_script ?
    Спасибо

    Ответить
    • admin:
      06.03.2017 в 11:04

      Самый простой вариант забросить подключение в шорткод вот так:
      (там же можно и основную инфу написать что должен делать и возвращать шорткод через return)
      <?php function myJavascript1(){
      wp_enqueue_script("my_script", get_bloginfo( 'stylesheet_directory' ).'/js/my_script.js',array('jquery'),"0.1",true);
      }
      add_shortcode( 'myJavascript1', 'myJavascript1');?>

  2. alexey:
    03.03.2017 в 11:31

    ДД, а чем плох первый способ?

    Ответить
    • alexey:
      03.03.2017 в 11:33

      ДД, чем плох 1й способ? Вроде наоборот, скрипт грузится только на нужных страницах. Если таких не много, то это положительно сказывается на работе сайта...

    • admin:
      03.03.2017 в 11:44

      Добрый.
      Плох тем, что так делать запрещают стандарты ВП. Еще плох тем что нельзя подключить плагин чтоб он оптимизировал скрипт, сжал и так далее этот код. Также при таком подключении не получится перенести этот скрипт в футер, код будет болтаться посреди текста. Еще могут возникнуть проблемы если нужны разные версии jquery когда посредине сайта нужна первая версия в в начале и конце вторая. Нюансов много, просто о них вспоминают только когда надо что то серьезное поправить, а оно не получается 🙂

      P.S. Во втором способе скрипт тоже грузится только там где нужно.

    • alexey:
      03.03.2017 в 11:49

      Спасибо.
      Но как во втором случае сделать подключения без указания номера страницы?
      1. Страниц,постов может быть несколько. (Как указать несколько страниц/постов?)
      2.Каждый раз лезть в код чтобы добавить новый номер не совсем удобно.

    • alexey:
      03.03.2017 в 12:01

      Со страницами наверное можно использовать специально созданный шаблон, и подключать только в нем.
      Только как модифицировать if чтобы проверялся шаблон?
      Хотя наверное можно и с постами и с использовать мета поле, скажем script = 1, тогда подключается скрипт.
      Так правильно будет?

    • admin:
      03.03.2017 в 12:02

      Вы видимо хотите подключить в самом шорткоде?
      В общем эту статью нужно дописать будет на досуге. В любом месте страницы, до того момента как был вызван wp_footer() можно писать такую вот конструкцию для подключения яваскрипт:
      wp_enqueue_script("my_script", get_bloginfo( 'stylesheet_directory' ).'/js/my_script.js',array('jquery'),"0.1",true);

      P.S. вместо true можно писать false так вроде лучше работает

    • alexey:
      03.03.2017 в 12:11

      Не совсем понял последний вариант. Нужно вставлять код прямо на странице? Вроде же это не очень хорошо?
      В общем с нетерпением жду обновления статьи с "правильным решением" подключения по требованию скриптов на странице/постах.))
      Спасибо

    • admin:
      03.03.2017 в 12:23

      1) Если ваш скрипт используется на всем сайте то правильней всего его подключать через wp_enqueue_script в файл functions.php (понятное дело в этом случаи не нужно ни каких if() условий)

      2) Если вам нужно подключить скрипт в шорткоде то в сам шорткод в начало или конец вставляем wp_enqueue_script как я писал выше (тогда тоже условия не нужны).

      3) Если нужно вставить на конкретную страницу или в конкретный шаблон, тогда лучше всего вставлять через functions.php но с добавлением правильного условия. например нужен код только на страницах поста, мы пишем if(is_single()){вызываем код}

    • alexey:
      03.03.2017 в 12:29

      Давайте я поясню на своем примере.
      Я хотел бы подключить скрипт кластеризации карт от гугл. Но используется он всего лишь на нескольких страницах их 600 (там где я вывожу карты). Скрипт достаточно тяжелый. Зачем грузить его на все страницы? Шорткодом было бы удобно, но вы говорите это не правильно.
      Вот и думаю как сделать так чтобы только на определенных страницах/постах подключался этот скрипт, но, при этом, это было бы правильно реализовано. Через мета поле, как мне кажется, это было бы самым удобным вариантом.

    • admin:
      03.03.2017 в 12:39

      Можно и через мета поле можно и через шорткод, глоавное чтоб подключалось через функцию wp_enqueue_script, а не хтмл кодом через тег <script type="text напрямую.

  3. Евгений:
    13.02.2017 в 07:58

    Здравствуйте! Подскажите, пожалуйста, как реализовать следующую конструкцию в wordpress?

    <a href="#maps" rel="nofollow">

    Заранее спасибо!

    Ответить
    • admin:
      13.02.2017 в 10:52

      Добрый день.
      Не сильно понимаю ваш вопрос и как он относится к подключению яваскрипт у вордпрес.

  4. MoonFlame:
    17.12.2016 в 00:14

    А что делать, если нужно сделать шорткод скрипта состоящего из нескольких файлов, такой вот (-url-)

    Ответить
    • admin:
      18.12.2016 в 18:26

      Добрый день.
      Никто не запрещает вызвать несколько подключений яваскрипта типа wp_enqueue_script в шорткоде. В таком случаи скрипты допишутся в низ страницы. Со стилями аналогично только функция другая wp_enqueue_style

  5. Anna:
    14.11.2016 в 17:25

    подключила в header.php как для новичка.
    Работает, спасибо!

    Ответить
  6. Антон:
    09.11.2016 в 12:28

    Добрый день!

    Как мне вывести вот этот код 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');?>

    Но даже слова "Пример" не вижу после вставки шорткода.

    Ответить
    • admin:
      09.11.2016 в 12:42

      Добрый день.
      Ну если через шорткод нужно, то вот так должно работать (как минимум у себя проверил работает):
      function myJavascript1(){
      $str='<script type="text/javascript">alert("привет");</script>';
      return $str;
      }
      add_shortcode( 'myJavascript1', 'myJavascript1');

      должно работать

  7. Alexander:
    07.07.2016 в 10:16

    Добрый день. Это конечно хорошо. Скрипт я подключил. Но как блин вызвать функцию из этого скрипта? onClick по кнопке wordpress обрезает. Я уже запарился гуглить...

    Ответить
    • admin:
      07.07.2016 в 13:02

      Добрый день. А что там гуглить, обычный вызов jquery.
      В тот же подключаемый файл можно забросить такой код и все будет работать.
      (function( $ ) {
      $(document).ready(function(){
      $("#вашИДселектор").on("click",function(){вашафункция();});
      });
      })(jQuery);

Сделать заказ
Онлайн помощь по WordPress