Вопрос по jquery, wordpress – Как добавить простой скрипт jQuery в WordPress?

108

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

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

что вы пробовали, что заставляет вас думать, что все гиды там дерьмовые? undefined
Сначала я согласен с @Citizen, что это мое поле, чтобы понять, что делать с WordPress, поскольку в некоторых руководствах, которые можно найти в Интернете, инструкции для новичков не очень полны. Haris
Вwhich вести вwhich шаг вы столкнулисьwhich проблема? pixelistik
Можете ли вы быть конкретным? Что ты пробовал и не получилось? Ahmed Fouad
Проверьте ссылку ниже:wpseoblogs.com/how-to-add-javascript-code-when-published-post Patel

Ваш Ответ

15   ответов
4

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

<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>
2

https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Despite the fact WordPress has been around for a while, and the method of adding scripts to themes and plugins has been the same for years, there is still some confusion around how exactly you’re supposed to add scripts. So let’s clear it up.

Since jQuery is still the most commonly used Javascript framework, let’s take a look at how you can add a simple script to your theme or plugin.

jQuery’s Compatibility Mode

Before we start attaching scripts to WordPress, let’s look at jQuery’s compatibility mode. WordPress comes pre-packaged with a copy of jQuery, which you should use with your code. When WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries.

What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use jQuery instead. Take a look at the code below to see what I mean:

41

finally нашел то, что работает с последней версией WordPress. Вот шаги, чтобы следовать:

Find your theme's directory, create a folder in the directory for your custom js (custom_js in this example). Put your custom jQuery in a .js file in this directory (jquery_test.js in this example).

Make sure your custom jQuery .js looks like this:

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

Go to the theme's directory, open up functions.php

Add some code near the top that looks like this:

//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');
Check out your site to make sure it works!
Спасибо за это пошаговое объяснение, Стэн! (и примечание об использовании этого с дочерними темами, @DavidTaiaroa)
Спасибо, это мне очень помогло! Для тех, кто работает с дочерней темой, используйте get_stylesheet_directory_uri () вместо get_template_directory_uri ()
1

Предположим, ваш сценарий называется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.

6

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

Parent Theme :

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-content / themes /child-theme

2

** Попробуйте поместить свой код 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 играет с огнем.
1

ия файла скрипта в плагин WordPress.

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

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

4

Код как ниже:

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/

0

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»).

Нет, я понял эту часть. Загрузка JQuery легко. Мне нужно знать, к какому файлу и как добавить свой код jquery. Citizen
Положите wp_enqueue_script («имя сценария»); перед get_header () шаблона, в который вы хотите поместить этот скрипт.
1

just" include a link ( a link rel tag that is) in the header, the footer, in any template, where ever.

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

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

165

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

в functions.php
в каком файле вы его добавили? @EleMunjeli
Мне пришлось добавить add_action («wp_enqueue_scripts», «add_my_script»); чтобы загрузить это, но это все еще самый ясный ответ.
Спасибо чувак. Вы спасли мой день, который вы сняли, отлично работает для меня
Спасибо, Ele Munjeli, за подсказку для add_action. ТАКЖЕ: если вы работаете с дочерней темой, используйте вместо нее get_stylesheet_directory_uri.
1

я использование следующих функций.

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

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

Для более подробной информации и примеров, вы можете проверитьДобавление файлов JS в Wordpress с помощью wp_register_script & amp; 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' );
3

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

& quot; У нас есть Google & quot; соч.е размещенные библиотеки. подобно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>
3

ого плагина.
https://wordpress.org/plugins/custom-javascript-editor/

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

Похожие вопросы