Как добавить javascript вставлять в wordpress [дубликат]

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

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

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

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

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

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

Если вы используете 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');
}

Child Theme:

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 / parent-theme

get_stylesheet_directory_uri: / your-site / wp- содержание / темы / дети тема

Вам нужно только загрузить 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').

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

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

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

Вы можете добавить 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>

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

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

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

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

** # Метод 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-контент.

#Method 2: поместите код скрипта внутри тела страницы в тег <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);
  });
});

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

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

После долгих поисков я наконец нашел что-то, что работает с последним 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. Проверьте свой сайт, чтобы убедиться, что он работает!

«У нас есть 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>