Как подключить 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. Евгений:

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

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

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

    • admin:

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

  2. MoonFlame:

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

    • admin:

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

  3. Anna:

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

  4. Антон:

    Добрый день!

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

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

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

  5. Alexander:

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

    • admin:

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

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