it-swarm.com.ru

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

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

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

108
Citizen

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

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

165
kdev

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

Если вы используете 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/parent-theme

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

6
DibaCode

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

4
Jitendra Damor

Помимо добавления скрипта в функции, вы можете «просто» включить ссылку (тэг link 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>
4
josh.chavanne

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

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

3
sameeuor

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

** # Метод 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>. Тогда вам не нужно регистрировать это в функциях.

2
Rajan471

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

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

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

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

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

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

2
Ahmed Elcheikh

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

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

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

1
Kenneth Odle

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

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

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

1
user64745

"У нас есть 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>
1
Vlad

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

1
upendra tiwari

В 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' );
1
Aman Dhanda

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

0
Eli Cole