Як додати простий сценарій jQuery до WordPress?

Я прочитав Codex та кілька дописів у блозі про використання jQuery в WordPress, і це дуже засмучує. Я маю functions.phpна увазі завантаження jQuery у файл, але всі путівники там безладні, тому що вони припускають, що ви вже маєте багато досвіду WordPress. Наприклад, вони кажуть, що зараз, коли я завантажую jQuery через functions.phpфайл, тепер все, що мені потрібно зробити, це завантажити свій jQuery.

Як саме я це роблю? До яких файлів, зокрема, додати код? Як саме я додати його для однієї сторінки WordPress?

Я знаю, що ви маєте на увазі підручники. Ось як я це роблю:

Спочатку потрібно написати свій сценарій. У папці з темами створіть папку, яка називається на зразок "js". Створіть файл у цій папці для свого javascript. Наприклад, ваш-script.js. Додайте до цього файлу сценарій jQuery ( <script>теги у файлі .js не потрібні ).

Ось приклад того, як може виглядати ваш сценарій jQuery (у wp-content / themes / your-topic / js / your-scrript.js):

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

Зауважте, що я використовую jQuery, а не $ на початку функції.

Добре, тепер відкрийте файл function.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 .

Після довгих пошуків я нарешті знайшов щось, що працює з останньою 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. Перейдіть до каталогу теми, відкрийте function.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-content / теми / батьківська тема

get_stylesheet_directory_uri: / your-site / wp-content / themes / child-тема

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

Окрім введення сценарію через функції, ви можете «просто» включити посилання (тег відносної посилання, який є) у заголовок, колонтитул, у будь-який шаблон, де коли-небудь. Вам просто потрібно переконатися, що шлях правильний. Я пропоную скористатися чимось подібним (якщо припустити, що ви перебуваєте в каталозі вашої теми)

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

** # Спосіб 1: ** Спробуйте помістити код jquery в окремий js-файл.

Тепер зареєструйте цей скрипт у файлі function.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.

# Метод 2: помістіть код скрипту всередині тіла сторінки під <script>тег. Тоді вам не потрібно реєструвати його у функціях.

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

Під час використання jQuery не забудьте використовувати режим jquery без конфлікту

Тут є багато підручників та відповідей, як додати свій скрипт для включення на сторінку. Але я не міг знайти, як структурувати цей код, щоб він працював належним чином. Це пов'язано з тим, що $ не використовується в цій формі 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/

Незважаючи на те, що WordPress існує вже деякий час, і метод додавання скриптів до тем та плагінів уже рік однаковий, все ще існує певна плутанина навколо того, як саме ви повинні додати сценарії. Тож давайте розберемося.

Оскільки jQuery як і раніше є найбільш часто використовуваною рамкою Javascript, давайте розглянемо, як ви можете додати простий скрипт до своєї теми чи плагіна.

Режим сумісності jQuery

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

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

Я бачив рішення з точки зору додавання javascript функцій до теми. Однак ОП запитала конкретно: "Як саме я додати його для однієї сторінки WordPress?" Це виглядає так, як я можу використовувати javascript у своєму блозі Wordpress, де окремі повідомлення можуть мати різні "віджети", що працюють на JavaScript. Наприклад, публікація може дозволити користувачеві змінювати змінні (повзунки, прапорці, поля введення тексту), а також графіки або списки результатів.

Починаючи з точки зору JavaScript:

1. Запишіть свої функції JavaScript в окремий файл .js

Навіть не замислюйтесь про те, щоб у HTML-файл вашої публікації включити важливий JavaScript - створіть файл JavaScript або файли з кодом.

2. Інтерфейс вашого JavaScript з html вашої публікації

Якщо ваш віджет JavaScript взаємодіє з html-контролями та полями, вам потрібно зрозуміти, як запитувати та встановлювати ці елементи з JavaScript, а також як дозволити елементам інтерфейсу викликати ваші функції JavaScript. Ось пара прикладів; по-перше, з JavaScript:

var val = document.getElementById(“AM_Freq_A_3”).value;

І з html:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. Використовуйте jQuery для виклику функції ініціалізації віджета JavaScript

Додайте це до свого файлу .js, використовуючи ім’я функції, яка налаштовує та малює ваш віджет JavaScript, коли сторінка готова до нього:

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. У html-код вашої публікації завантажте сценарії, необхідні для вашої публікації

У редакторі коду Wordpress я зазвичай вказую сценарії в кінці публікації. Наприклад, у мене в основному каталозі є папка сценаріїв. Всередині у мене є каталог утиліт із загальним JavaScript, яким можуть ділитися деякі мої публікації - в цьому випадку частина моєї власної функції утиліти з математики та бібліотека графіків flotr2. Мені зручніше групувати спеціальний JavaScript в іншому каталозі з підкаталогами на основі дати замість використання медіа-менеджера, наприклад.

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>

5. Запитай jQuery

Wordpress реєструє jQuery, але він недоступний, якщо ви не скажете Wordpress, що вам це потрібно, натиснувши його. Якщо цього не зробити, команда jQuery вийде з ладу. Багато джерел розповідають про те, як додати цю команду до функцій.php, але припускають, що ви знаєте деякі інші важливі деталі.

По-перше, погана ідея редагувати тему - будь-яке подальше оновлення теми знищить ваші зміни. Складіть дитячу тему. Ось як:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Дочірній файл function.php не замінює однойменний файл батьківської теми, він додає до нього. Навчальний посібник-теми підказують, як зав'язати батьківський та дочірній файл style.css. Ми можемо просто додати ще одну лінію до цієї функції, щоб також залучати jQuery. Ось мій весь файл function.php для дочірньої теми:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

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

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

Подивіться на публікацію, яка допоможе вам зрозуміти, наскільки легко ви можете реалізувати jQuery та CSS у плагіні WordPress.

Окрім введення сценарію через функції, ви можете «просто» включити посилання (тег відносної посилання, який є) у заголовок, колонтитул, у будь-який шаблон, де коли-небудь.

Ні. Ніколи не слід додавати посилання на такий зовнішній скрипт у WordPress. Зачеплення їх через файл function.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.

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

Цит "У нас є Google". Для правильного використання сценарію всередині 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>

Вам потрібно лише завантажити jquery?

1) Як кажуть інші посібники, зареєструйте свій скрипт у файлі funk.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').

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');