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

после долгих поисков, я наконец-то нашел что-то, что работает с последним WordPress. Вот шаги, чтобы следовать:

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

3. убедитесь, что ваш пользовательский jQuery .js выглядит как это:

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

4. перейдите в каталог темы, откройте функции.в 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-контент / темы/родитель-тема

get_stylesheet_directory_uri : / ваш-сайт / wp-контент / темы/ребенок-тема

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

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

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

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

вы можете добавить jQuery или javascript в функцию темы.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

есть много учебников и ответов здесь, как добавить свой скрипт, который будет включен в страницу. Но я не смог найти, как структурировать этот код, чтобы он работал правильно. Это связано с тем, что $ не используется в этой форме 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);
  });
});

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

Теперь зарегистрируйте этот скрипт в функциях.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' );

Теперь вы сделали.

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

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

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

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

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

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

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

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

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

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

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

" У нас есть Google " cit. Для правильного использования скрипта внутри 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>

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

нет. Вы никогда не должны просто добавить ссылку на внешний скрипт, как это в WordPress. Запрашивать их через функции.файл 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.

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

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