Как добавить простой скрипт jQuery в WordPress?

Я прочитал Кодекс и несколько сообщений в блогах об использовании jQuery в WordPress, и это очень расстраивает. Я дошел до загрузки jQuery в functions.phpфайл, но все руководства там дрянные, потому что предполагают, что у вас уже есть тонна опыта работы с WordPress. Например, они говорят, что теперь, когда я загружаю jQuery через functions.phpфайл, все, что мне нужно сделать, это загрузить мой jQuery.

Как именно мне это сделать? К каким файлам, в частности, добавить код? Как именно добавить его для отдельной страницы WordPress?

Я знаю, что вы имеете в виду об уроках. Вот как я это делаю:

Для начала вам нужно написать свой сценарий. В папке вашей темы создайте папку с названием что-то вроде «js». Создайте в этой папке файл для вашего javascript. Например, your-script.js. Добавьте в этот файл свой сценарий jQuery ( <script>теги в файле .js не нужны ).

Вот пример того, как может выглядеть ваш скрипт jQuery (в wp-content / themes / your-theme / js / your-scrript.js):

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

Обратите внимание, что я использую jQuery, а не $ в начале функции.

Хорошо, теперь откройте файл functions.php вашей темы. Вы захотите использовать эту wp_enqueue_script()функцию, чтобы вы могли добавить свой скрипт, одновременно сообщая WordPress, что он полагается на jQuery. Вот как это сделать:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

Предполагая, что ваша тема имеет wp_head и wp_footer в нужных местах, это должно сработать. Сообщите мне, если вам понадобится дополнительная помощь.

Вопросы по WordPress можно задать в ответах WordPress .

После долгих поисков я наконец нашел то, что работает с последней версией WordPress. Вот следующие шаги:

1. Найдите каталог вашей темы, создайте папку в каталоге для ваших пользовательских js ( custom_js в этом примере ).
2. Поместите свой собственный jQuery в файл .js в этом каталоге ( jquery_test.js в этом примере ).

3. Убедитесь, что ваш собственный jQuery .js выглядит следующим образом:

   (function($) {
   $(document).ready(function() {
   $('.your-class').addClass('do-my-bidding');
   })
   })(jQuery);

4. Перейдите в каталог темы, откройте functions.php

5. Добавьте немного кода вверху, который выглядит так:

   //this goes in functions.php near the top
   function my_scripts_method() {
   // register your script location, dependencies and version
      wp_register_script('custom_script',
      get_template_directory_uri() . '/custom_js/jquery_test.js',
      array('jquery'),
      '1.0' );
    // enqueue the script
     wp_enqueue_script('custom_script');
     }
   add_action('wp_enqueue_scripts', 'my_scripts_method');

6. Проверьте свой сайт, чтобы убедиться, что он работает!

Если вы используете дочернюю тему wordpress для добавления скриптов в свою тему, вам следует изменить функцию get_template_directory_uri на get_stylesheet_directory_uri, например:

Родительская тема:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

Дочерняя тема:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri: / ваш-сайт / wp-content / themes / родительская тема

get_stylesheet_directory_uri: / ваш-сайт / wp-content / themes / child-theme

Вы можете добавить jQuery или javascript в файл темы function.php. Код выглядит следующим образом:

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

Для получения более подробной информации посетите это руководство: http://www.codecanal.com/add-simple-jquery-script-wordpress/

Помимо помещения сценария через функции, вы можете «просто» включить ссылку (тег rel rel) в заголовок, нижний колонтитул любого шаблона, где бы вы ни находились. Вам просто нужно убедиться, что путь правильный. Я предлагаю использовать что-то вроде этого (при условии, что вы находитесь в каталоге своей темы).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

Хорошая практика - включать это прямо перед закрывающим тегом основного текста или, по крайней мере, непосредственно перед нижним колонтитулом. Вы также можете использовать php include или несколько других методов для извлечения этого файла.

<script type="javascript"><?php include('your-file.js');?></script>

** # Метод 1: ** Попробуйте поместить код jquery в отдельный файл js.

Теперь зарегистрируйте этот скрипт в файле functions.php.

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Теперь все готово.

Регистрация скрипта в функциях имеет свои преимущества, так как входит в <head> разделе при загрузке страницы, поэтому он всегда является частью header.php. Таким образом, вам не нужно повторять свой код каждый раз, когда вы пишете новый HTML-контент.

# Метод 2: поместите код скрипта в тело страницы под <script>тегом. Тогда вам не нужно регистрировать его в functions.

Вы можете добавить собственный javascript или jquery с помощью этого плагина.
https://wordpress.org/plugins/custom-javascript-editor/

Когда вы используете jQuery, не забывайте использовать режим jquery noconflict

Здесь есть много руководств и ответов, как добавить свой скрипт на страницу. Но я не смог найти, как структурировать этот код, чтобы он работал правильно. Это связано с тем, что $ не используется в этой форме JQuery.

Итак, вот мой код, и вы можете использовать его как шаблон.

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});

Ответ отсюда: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Несмотря на то, что WordPress существует уже некоторое время, а метод добавления скриптов в темы и плагины остается неизменным в течение многих лет, все еще существует некоторая путаница в том, как именно вы должны добавлять скрипты. Итак, давайте проясним это.

Поскольку jQuery по-прежнему является наиболее часто используемым фреймворком Javascript, давайте посмотрим, как можно добавить простой скрипт в свою тему или плагин.

Режим совместимости jQuery

Прежде чем мы начнем прикреплять скрипты к WordPress, давайте посмотрим на режим совместимости jQuery. WordPress поставляется с предварительно упакованной копией jQuery, которую вы должны использовать со своим кодом. Когда загружается jQuery WordPress, он использует режим совместимости, который позволяет избежать конфликтов с другими языковыми библиотеками.

Это сводится к тому, что вы не можете использовать знак доллара напрямую, как в других проектах. При написании jQuery для WordPress вам нужно вместо этого использовать jQuery. Взгляните на приведенный ниже код, чтобы понять, что я имею в виду:

Решения, которые я видел, основаны на добавлении функций javascript в тему. Однако OP, в частности, спросил: «Как именно мне добавить его для одного страницы WordPress?» Это похоже на то, как я использую javascript в своем блоге Wordpress, где отдельные сообщения могут иметь разные «виджеты» на основе javascript. Например, сообщение может позволить пользователю изменять переменные (ползунки, флажки, поля ввода текста), а также отображать или перечислять результаты.

Начиная с точки зрения JavaScript:

1. Напишите свои функции JavaScript в отдельном файле «.js».

Даже не думайте о включении значительного количества JavaScript в HTML вашего сообщения - создайте файл или файлы JavaScript с вашим кодом.

2. Свяжите ваш JavaScript с HTML вашего поста

Если ваш виджет JavaScript взаимодействует с элементами управления и полями HTML, вам необходимо понимать, как запрашивать и устанавливать эти элементы из JavaScript, а также как разрешить элементам пользовательского интерфейса вызывать ваши функции JavaScript. Вот пара примеров; сначала из JavaScript:

var val = document.getElementById(“AM_Freq_A_3”).value;

И из html:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. Используйте jQuery для вызова функции инициализации виджета JavaScript

Добавьте это в свой файл .js, используя имя вашей функции, которая настраивает и рисует ваш виджет JavaScript, когда страница для этого готова:

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. В html-коде вашего сообщения загрузите скрипты, необходимые для вашего сообщения.

В редакторе кода Wordpress я обычно указываю скрипты в конце сообщения. Например, у меня есть папка сценариев в моем основном каталоге. Внутри у меня есть каталог служебных программ с общим кодом JavaScript, которым могут пользоваться некоторые из моих сообщений - в данном случае некоторые из моих собственных математических служебных функций и графическая библиотека flotr2. Мне кажется более удобным сгруппировать специфичный для постов JavaScript в другом каталоге с подкаталогами на основе даты, например, вместо использования медиа-менеджера.

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>

5. Поставить в очередь jQuery

Wordpress регистрирует jQuery, но он недоступен, если вы не сообщите Wordpress, что он вам нужен, поставив его в очередь. Если вы этого не сделаете, команда jQuery завершится ошибкой. Многие источники сообщают вам, как добавить эту команду в файл functions.php, но предполагают, что вы знаете некоторые другие важные детали.

Во-первых, редактировать тему - плохая идея - любое будущее обновление темы приведет к аннулированию ваших изменений. Сделайте дочернюю тему. Вот как:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Дочерний файл functions.php не отменяет одноименный файл родительской темы, а добавляет к нему. В руководстве по дочерним темам предлагается, как поставить в очередь родительский и дочерний файл style.css. Мы можем просто добавить еще одну строку к этой функции, чтобы также поставить jQuery в очередь. Вот весь мой файл functions.php для дочерней темы:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

Вы можете использовать предопределенную функцию WordPress для добавления файла сценария в плагин WordPress.

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

Посмотрите сообщение, которое поможет вам понять, насколько легко вы можете реализовать jQuery и CSS в плагине WordPress.

Помимо помещения сценария через функции, вы можете «просто» включить ссылку (тег rel rel) в заголовок, нижний колонтитул любого шаблона, где бы вы ни находились.

Нет. Вы никогда не должны просто добавлять ссылку на внешний скрипт вроде этого в WordPress. Помещение их в очередь через файл functions.php гарантирует, что скрипты загружаются в правильном порядке.

Отсутствие их постановки в очередь может привести к тому, что ваш сценарий не будет работать, хотя он написан правильно.

вы можете записать свой скрипт в другой файл. И поставить файл в очередь, как это, предположим, что имя вашего скрипта image-ticker.js.

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

вместо /js/image-ticker.jsнего следует указать путь к файлу js.

В WordPress правильный способ включения скриптов на ваш веб-сайт - использование следующих функций.

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

Эти функции вызываются внутри ловушки wp_enqueue_script.

Для получения дополнительных сведений и примеров вы можете проверить Добавление файлов JS в Wordpress с помощью wp_register_script и wp_enqueue_script

Пример:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

"У нас есть Google" соч. Для правильного использования скрипта внутри wordpress просто добавьте размещенные библиотеки. Как Google

После выбранной библиотеки, которую вам нужно связать перед вашим пользовательским скриптом: exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

и после вашего собственного сценария

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

Вам нужно только загрузить jquery?

1) Как говорят другие руководства, зарегистрируйте свой скрипт в файле functions.php следующим образом:

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) Обратите внимание, что нам не нужно регистрировать jQuery, потому что он уже находится в ядре. Убедитесь, что wp_footer () вызывается в вашем footer.php, а wp_head () вызывается в вашем header.php (именно здесь он выводит тег скрипта), а jQuery загружается на каждой странице. Когда вы ставите jQuery в очередь с WordPress, он будет в режиме «без конфликтов», поэтому вам придется использовать jQuery вместо $. Вы можете отменить регистрацию jQuery, если хотите, и перерегистрировать свой собственный, выполнив wp_deregister_script ('jquery').

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');