Bagaimana cara menambahkan skrip jQuery sederhana ke WordPress?

Saya membaca Codex dan beberapa posting blog tentang penggunaan jQuery di WordPress, dan itu sangat membuat frustrasi. Saya sudah sejauh memuat jQuery dalam functions.phpfile, tetapi semua panduan di luar sana jelek karena mereka menganggap Anda sudah memiliki banyak pengalaman WordPress. Misalnya, mereka mengatakan bahwa sekarang saya memuat jQuery melalui functions.phpfile, sekarang yang harus saya lakukan adalah memuat jQuery saya.

Bagaimana tepatnya saya melakukan ini? File apa, khususnya, yang saya tambahkan kode? Bagaimana tepatnya cara menambahkannya untuk satu halaman WordPress?

Saya tahu apa yang Anda maksud tentang tutorial. Begini cara saya melakukannya:

Pertama, Anda perlu menulis skrip Anda. Di folder tema Anda buat folder bernama sesuatu seperti 'js'. Buat file di folder itu untuk javascript Anda. Misalnya Anda-script.js. Tambahkan skrip jQuery Anda ke file itu (Anda tidak perlu<script> tag dalam file .js).

Berikut adalah contoh tampilan skrip jQuery Anda (di wp-content / themes / your-theme / js / your-scrript.js):

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

Perhatikan bahwa saya menggunakan jQuery dan bukan $ pada awal fungsi.

Oke, sekarang buka file functions.php tema Anda. Anda akan ingin menggunakan wp_enqueue_script()fungsi tersebut sehingga Anda dapat menambahkan skrip Anda sambil juga memberi tahu WordPress bahwa itu bergantung pada jQuery. Berikut cara melakukannya:

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
    );
}

Dengan asumsi bahwa tema Anda memiliki wp_head dan wp_footer di tempat yang tepat, ini seharusnya berfungsi. Beri tahu saya jika kamu membutuhkan bantuan.

Pertanyaan WordPress dapat ditanyakan di WordPress Answers .

Setelah banyak mencari, saya akhirnya menemukan sesuatu yang berfungsi dengan WordPress terbaru. Berikut langkah-langkah yang harus diikuti:

1. Temukan direktori tema Anda, buat folder di direktori untuk js kustom Anda ( custom_js dalam contoh ini ).
2. Letakkan jQuery kustom Anda dalam file .js di direktori ini ( jquery_test.js dalam contoh ini ).

3. Pastikan jQuery .js kustom Anda terlihat seperti ini:

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

4. Pergi ke direktori tema, buka functions.php

5. Tambahkan beberapa kode di dekat bagian atas yang terlihat seperti ini:

   //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. Lihat situs Anda untuk memastikannya berfungsi!

Jika Anda menggunakan tema anak wordpress untuk menambahkan skrip ke tema Anda, Anda harus mengubah fungsi get_template_directory_uri menjadi get_stylesheet_directory_uri, misalnya:

Tema Induk:

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

Tema Anak:

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: / situs-Anda / wp-content / themes / parent-theme

get_stylesheet_directory_uri: / situs-Anda / wp-konten / tema / tema-anak

Anda dapat menambahkan jQuery atau javascript di file function.php tema. Kodenya seperti di bawah ini:

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
);
}

Untuk detail lebih lanjut kunjungi tutorial ini: http://www.codecanal.com/add-simple-jquery-script-wordpress/

Selain memasukkan skrip melalui fungsi, Anda dapat "hanya" menyertakan tautan (tag rel tautan yang ada) di header, footer, di template mana pun, di mana pun. Anda hanya perlu memastikan jalurnya benar. Saya sarankan menggunakan sesuatu seperti ini (dengan asumsi Anda berada di direktori tema Anda).

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

Praktik yang baik adalah memasukkan ini tepat sebelum tag body penutup atau setidaknya tepat sebelum footer Anda. Anda juga dapat menggunakan penyertaan php, atau beberapa metode lain untuk menarik file ini.

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

** # Metode 1: ** Coba letakkan kode jquery Anda di file js terpisah.

Sekarang daftarkan skrip itu di file 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' );

Sekarang Anda sudah selesai.

Mendaftarkan skrip dalam fungsi memiliki keuntungan karena muncul di <head>bagian saat halaman dimuat sehingga selalu menjadi bagian dari header.php. Jadi Anda tidak perlu mengulang kode Anda setiap kali Anda menulis konten html baru.

#Method 2: letakkan kode script di dalam badan halaman di bawah <script>tag. Maka Anda tidak perlu mendaftarkannya dalam fungsi.

Anda dapat menambahkan javascript atau jquery khusus menggunakan plugin ini.
https://wordpress.org/plugins/custom-javascript-editor/

Saat Anda menggunakan jQuery jangan lupa gunakan mode noconflict jquery

Ada banyak tutorial dan jawaban di sini bagaimana menambahkan script Anda untuk dimasukkan ke halaman. Tetapi yang tidak dapat saya temukan adalah bagaimana menyusun kode itu sehingga akan berfungsi dengan baik. Ini karena $ tidak digunakan dalam bentuk JQuery ini.

Jadi inilah kode saya dan Anda dapat menggunakannya sebagai template.

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);
  });
});

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

Terlepas dari kenyataan bahwa WordPress telah ada selama beberapa waktu, dan metode menambahkan skrip ke tema dan plugin telah sama selama bertahun-tahun, masih ada beberapa kebingungan tentang bagaimana tepatnya Anda seharusnya menambahkan skrip. Jadi mari kita perjelas.

Karena jQuery masih merupakan kerangka kerja Javascript yang paling umum digunakan, mari kita lihat bagaimana Anda dapat menambahkan skrip sederhana ke tema atau plugin Anda.

Mode Kompatibilitas jQuery

Sebelum kita mulai melampirkan skrip ke WordPress, mari kita lihat mode kompatibilitas jQuery. WordPress telah dikemas sebelumnya dengan salinan jQuery, yang harus Anda gunakan dengan kode Anda. Saat jQuery WordPress dimuat, ia menggunakan mode kompatibilitas, yang merupakan mekanisme untuk menghindari konflik dengan pustaka bahasa lain.

Intinya adalah Anda tidak dapat menggunakan tanda dolar secara langsung seperti yang Anda lakukan di proyek lain. Saat menulis jQuery untuk WordPress, Anda perlu menggunakan jQuery sebagai gantinya. Lihatlah kode di bawah ini untuk melihat apa yang saya maksud:

Solusi yang saya lihat berasal dari perspektif menambahkan fitur javascript ke tema. Namun, OP bertanya, secara khusus, "Bagaimana tepatnya cara menambahkannya untuk satu halaman WordPress?" Ini terdengar seperti cara saya menggunakan javascript di blog Wordpress saya, di mana setiap posting mungkin memiliki "widget" bertenaga javascript yang berbeda. Misalnya, sebuah posting memungkinkan pengguna mengubah variabel (slider, kotak centang, bidang input teks), dan plot atau daftar hasil.

Mulai dari perspektif JavaScript:

1. Tulis fungsi JavaScript Anda di file “.js” terpisah

Jangan pernah berpikir untuk menyertakan JavaScript yang signifikan dalam html posting Anda — buat file JavaScript, atau file, dengan kode Anda.

2. Antarmuka JavaScript Anda dengan html posting Anda

Jika widget JavaScript Anda berinteraksi dengan kontrol dan bidang html, Anda harus memahami cara membuat kueri dan menyetel elemen-elemen tersebut dari JavaScript, dan juga cara membiarkan elemen UI memanggil fungsi JavaScript Anda. Berikut ini beberapa contoh; pertama, dari JavaScript:

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

Dan dari html:

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

3. Gunakan jQuery untuk memanggil fungsi inisialisasi widget JavaScript Anda

Tambahkan ini ke file .js Anda, menggunakan nama fungsi Anda yang mengkonfigurasi dan menggambar widget JavaScript Anda saat halaman siap:

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

4. Di kode html posting Anda, muat skrip yang diperlukan untuk posting Anda

Di editor kode Wordpress, saya biasanya menentukan skrip di akhir posting. Misalnya, saya memiliki folder skrip di direktori utama saya. Di dalamnya saya memiliki direktori utilitas dengan JavaScript umum yang mungkin dibagikan oleh beberapa posting saya — dalam hal ini beberapa fungsi utilitas matematika saya dan pustaka plotting flotr2. Saya merasa lebih mudah untuk mengelompokkan JavaScript spesifik pasca di direktori lain, dengan subdirektori berdasarkan tanggal daripada menggunakan manajer media, misalnya.

<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. Antrean jQuery

Wordpress mendaftarkan jQuery, tetapi tidak tersedia kecuali jika Anda memberi tahu Wordpress bahwa Anda membutuhkannya, dengan mengantrekannya. Jika tidak, perintah jQuery akan gagal. Banyak sumber memberi tahu Anda cara menambahkan perintah ini ke functions.php Anda, tetapi asumsikan Anda mengetahui beberapa detail penting lainnya.

Pertama, mengedit tema adalah ide yang buruk — pembaruan tema apa pun di masa mendatang akan menghapus perubahan Anda. Buat tema anak. Begini caranya:

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

File functions.php anak tidak menimpa file tema induk dengan nama yang sama, ia menambahkannya. Tutorial tema anak menyarankan cara mengantrekan file induk dan anak style.css. Kita cukup menambahkan baris lain ke fungsi itu untuk juga memasukkan jQuery. Inilah seluruh file functions.php saya untuk tema anak:

<?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');
}

Anda dapat menggunakan fungsi standar WordPress untuk menambahkan file skrip ke plugin WordPress.

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

Lihat postingan yang membantu Anda memahami betapa mudahnya Anda menerapkan jQuery dan CSS di plugin WordPress.

Selain memasukkan skrip melalui fungsi, Anda dapat "hanya" menyertakan tautan (tag rel tautan yang ada) di header, footer, di template mana pun, di mana pun.

Tidak. Anda sebaiknya tidak menambahkan link ke skrip eksternal seperti ini di WordPress. Mengantre mereka melalui file functions.php memastikan bahwa skrip dimuat dalam urutan yang benar.

Kegagalan mengantrekannya dapat mengakibatkan skrip Anda tidak berfungsi, meskipun ditulis dengan benar.

Anda dapat menulis skrip Anda di file lain. Dan mengantrekan file Anda seperti ini misalkan nama skrip Anda adalah image-ticker.js.

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

di tempat /js/image-ticker.jsAnda harus meletakkan path file js Anda.

Di WordPress, cara yang benar untuk memasukkan skrip di situs Anda adalah dengan menggunakan fungsi berikut.

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

Fungsi-fungsi ini disebut di dalam pengait wp_enqueue_script.

Untuk detail dan contoh lebih lanjut, Anda dapat memeriksa Menambahkan file JS di Wordpress menggunakan wp_register_script & wp_enqueue_script

Contoh:

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

"Kami memiliki Google" cit. Untuk menggunakan skrip dengan benar di dalam wordpress cukup tambahkan pustaka yang dihosting. Seperti Google

Setelah perpustakaan yang dipilih, Anda perlu menautkannya sebelum skrip kustom Anda: exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

dan setelah naskah Anda sendiri

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

Apakah Anda hanya perlu memuat jquery?

1) Seperti yang dikatakan panduan lain, daftarkan skrip Anda di file functions.php Anda seperti ini:

// 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) Perhatikan bahwa kita tidak perlu mendaftarkan jQuery karena sudah ada di inti. Pastikan wp_footer () dipanggil di footer.php Anda dan wp_head () dipanggil di header.php Anda (di sinilah ia akan menampilkan tag skrip), dan jQuery akan dimuat di setiap halaman. Saat Anda memasukkan jQuery dengan WordPress, itu akan berada dalam mode "tanpa konflik", jadi Anda harus menggunakan jQuery alih-alih $. Anda dapat membatalkan pendaftaran jQuery jika ingin dan mendaftarkan ulang milik Anda sendiri dengan melakukan wp_deregister_script ('jquery').

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