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

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

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

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

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

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

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

  //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');
  

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

Если вы используете 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:/your-site/wp-content/themes/ родительская тема

get_stylesheet_directory_uri:/your-site/wp-content/themes/ child-theme

Вы можете добавить jQuery или javascript в файл theme.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/

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

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

Помимо ввода script через функции, вы можете "просто" включить ссылку (тег 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>

Здесь есть много руководств и ответов о том, как добавить ваш script для включения в страницу. Но я не мог найти, как структурировать этот код, чтобы он работал правильно. Это связано с тем, что $не используется в этой форме 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/?mksi=b&utm_expid=3606929-94.SWGkQ9hyQQGxJNtgEiBgWA.1&utm_referrer=https%3A%2F%2Fwww.google.com.eg%2F

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

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

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

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

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

вы можете написать свой script в другом файле. И запишите свой файл, как этот предположим, что ваше имя script 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.

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

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

В противном случае ваш script не работает, хотя он написан правильно.

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

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

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

и после вашего собственного script

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

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

Теперь зарегистрируйте, что script в файле 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' );

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

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

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

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

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

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

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

1) Как говорят другие гиды, зарегистрируйте свой script в файле 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(здесь он выведет тэг script), и jQuery будет загружаться на каждую страницу. Когда вы вставляете jQuery в WordPress, он будет в режиме "без конфликтов", поэтому вам нужно использовать jQuery вместо $. Вы можете отменить регистрацию jQuery, если хотите, и перерегистрировать свой собственный, выполнив wp_deregister_script ('jquery').