Cara menambahkan Javascript dengan benar di functions.php

10

Saya ingin menghapus beberapa panah tampak jelek yang standar pada tombol keranjang di WooCommerce. Untuk mencapai ini, saya menemukan tip menambahkan kode berikut, yang akan menghapus panah ketika dokumen telah dimuat.

Saya menganggap saya akan meletakkannya di functions.php saya? Bagaimana tepatnya saya melakukan itu?

$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});

EDIT

Baik. Saya sudah mencoba pendekatan ini:

Membuat file bernama 'removeArrows.js' dan meletakkannya di folder plugin saya. Ini memiliki konten yang sama dengan kode asli, kecuali jQuery sebagai gantinya $. Kemudian saya menambahkan yang berikut ini ke functions.php:

function wpb_adding_scripts() {
      wp_register_script('my_amazing_script', plugins_url('removeArrows.js', FILE), array('jquery'),'1.1', true);
     wp_enqueue_script('my_amazing_script');
 } 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Saya tidak tahu bagaimana cara membuat kode ditampilkan dengan benar. Ini tidak berhasil. Ada saran untuk membuat ini berfungsi?

jQuery Snippet Source

pengguna2806026
sumber
Itu gila: tidak bisakah Anda mengedit panah di kode yang menghasilkannya? (Atau apakah itu diunduh dari sumber eksternal?) Dalam hal apa pun Anda dapat melakukan keduanya menggantikan dalam satu fungsi untuk menghindari membaca dan menulis semua HTML di dalam blok keranjang dua kali. Saya tidak tahu cara untuk menyuntikkan langsung ke halaman dari functions.php tetapi Anda dapat menyimpannya dalam file skrip yang terpisah (jika Anda belum memilikinya, Anda dapat menambahkannya) dan kemudian wp-enqueue-script. Anda juga harus mengubah $s ke jQuery(lihat halaman bagian 7)
Rup
Tidak, saya cukup yakin itu tidak dapat dihapus sebelum dimasukkan. Jika bisa, saya belum dapat menemukan cara untuk melakukannya. Poin bagus tentang menambahkannya dalam satu fungsi. Apakah akan terlihat seperti ini? $ (dokumen) .ready (function () {$ (". woocommerce-cart"). html (fungsi (i, val) {return val.replace ("→", ""); return val.replace ("← "," ");});}); Saya akan melihat skrip enqueue. Sepertinya agak rumit, meskipun .. Terima kasih!
user2806026
Baik. Saya mencoba pendekatan ini; Membuat file bernama 'removeArrows.js' dan meletakkannya di folder plugin saya. Ini memiliki konten yang sama dengan kode asli, kecuali jQuery sebagai gantinya $. kemudian saya menambahkan yang berikut ini ke functions.php; `function wpb_adding_scripts () {wp_register_script ('my_amazing_script', plugins_url ('removeArrows.js', FILE ), array ('jquery'), '1.1', true); wp_enqueue_script ('my_amazing_script'); } add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); (Maaf, saya tidak tahu bagaimana cara membuat kode ditampilkan dengan benar) Ini tidak berhasil. Bisakah Anda membantu saya memperbaikinya?
user2806026
1
Silakan ajukan pengeditan dan tambahkan semua info yang relevan langsung ke pertanyaan Anda. Jangan gunakan bagian komentar untuk menambahkan kode
Pieter Goosen

Jawaban:

10

Anda $scrdi Anda wp_register_script()fungsi yang salah. Mengingat functions.php Anda ada di dalam plugin Anda, dan removeArrows.js Anda ada di root plugin Anda, Anda $scrakan terlihat seperti ini

plugins_url( '/removeArrows.js' , __FILE__ )

Catatan lain, selalu merupakan praktik yang baik untuk memuat skrip dan gaya Anda terakhir. Ini akan memastikan bahwa itu tidak akan ditimpa oleh skrip dan gaya lain. Untuk melakukan ini, tambahkan saja prioritas sangat rendah (angka sangat tinggi) ke parameter prioritas Anda ( $priority) dari add_action.

 add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

Dan selalu muat / enqueue skrip dan gaya melalui wp_enqueue_scriptskait tindakan, karena ini adalah kait yang tepat untuk digunakan. Jangan memuat skrip dan gaya langsung ke wp_headatauwp_footer

EDIT

Untuk tema, karena Anda telah mengindikasikan bahwa Anda sekarang memindahkan semuanya ke tema Anda, Anda $scrakan berubah menjadi ini

 get_template_directory_uri() . '/removeArrows.js'

untuk tema orang tua dan ini

get_stylesheet_directory_uri() . '/removeArrows.js'

untuk tema anak. Kode lengkap Anda akan terlihat seperti ini

function wpb_adding_scripts() {
    wp_register_script('my_amazing_script', get_template_directory_uri() . '/removeArrows.js', array('jquery'),'1.1', true);
    wp_enqueue_script('my_amazing_script');
} 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 
Pieter Goosen
sumber
Terima kasih banyak atas saran Anda yang luar biasa. Ini sepertinya pendekatan yang digunakan. Namun satu pertanyaan; functions.php ada di folder tema saya. Bagaimana saya menautkan file js jika hanya di folder root theme yang sama?
user2806026
Anda harus menyimpan semuanya dalam plugin atau tema, jangan membaginya. Jika Anda berada dalam suatu tema, Anda $scrakan menjadi get_template_directory_uri() . '/removeArrows.js'tema orang tua, dan get_templatestylesheet_directory_uri() . '/removeArrows.js'untuk tema anak
Pieter Goosen
Mencoba lagi, kali ini menambahkan removeArrows.js langsung di folder tema dan menggunakan yang berikut ini di functions.php; function wpb_adding_scripts () {wp_register_script ('my_amazing_script', get_template_directory_uri (). '/removeArrows.js', FILE ), array ('jquery'), '1.1', true); wp_enqueue_script ('my_amazing_script'); } add_action ('wp_enqueue_scripts', 'wpb_adding_scripts', 999); ini memberi saya kesalahan Parse: kesalahan sintaks, tak terduga ',' pada baris wp_register_script.
user2806026
get_template_directory_uri() . '/removeArrows.js', FILE)seharusnyaget_template_directory_uri() . '/removeArrows.js'
Pieter Goosen
Nggak. Digunakan kode Anda sepenuhnya yang Anda edit ke bagian bawah posting asli Anda. Satu-satunya hal yang dilakukannya adalah membekukan halaman keranjang saat melihat konten. Saya pikir saya hanya akan menyerah :-) Satu pilihan terakhir; Anda mulai dengan menyebutkan bahwa get_template_directory_uri () adalah untuk tema induk, dan kemudian dalam kode lengkap akhir bahwa itu untuk tema anak. Yang mana itu? Tema saya adalah orangtua :-)
user2806026
4

Saya tidak akan menambahkan file js eksternal lain, itu hanya sumber daya tambahan dan tidak perlu untuk mengambil dan itu adalah sesuatu yang kami ingin mengurangi dalam hal waktu pemuatan halaman.

Saya akan menambahkan potongan jQuery ini di kepala situs web Anda menggunakan wp_headhook. Anda akan menempelkan yang berikut ini di file tema atau fungsi plugin Anda. Saya juga memastikan jQuery dalam mode tanpa konflik seperti yang Anda lihat di bawah.

add_action('wp_head','woocommerce_js');

function woocommerce_js()
{ // break out of php ?>

jQuery(document).ready(function($) {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
<?php } // break back into php

Setelah Anda melakukan ini dan me-refresh halaman Anda, periksa sumber halaman untuk memastikan snippet jQuery ini sebenarnya dimuat ke halaman Anda. Jika ya maka itu akan berfungsi kecuali jika mereka ada sesuatu di snipet jQuery yang sebenarnya Anda gunakan.

Matt Royal
sumber
Itu bukan cara WordPress untuk memuat Javascript. Lihat wp_enqueue_script()untuk informasi lebih lanjut.
Pat J
2
Hai @ PatJ, saya setuju, untuk memuat perpustakaan JS eksternal atau file JS dengan semua fungsi Javascript Anda di dalamnya, maka ya benar itu akan menjadi cara yang benar. Namun jika Anda memuat potongan Javascript, tidak masuk akal untuk membuat file JS baru dan menambahkan permintaan HTTP tambahan hanya untuk itu. Ambil Google Analytics misalnya, di 99% tema atau bangunan khusus, JS akan ditambahkan ke header atau footer melalui opsi tema atau file fungsi. Praktik umum untuk memasukkan JS atau bahkan cuplikan CSS dengan cara ini.
Matt Royal
1
"Praktek umum" tidak membuatnya benar. The wp_enqueue_script()docs bahkan menyatakan ini adalah metode yang direkomendasikan menghubungkan JavaScript ke halaman WordPress yang dihasilkan .
Pat J
Jika Anda menggunakan WordPress default dua puluh empat tema, itu memuat html5.js di header.php. Diberikan caranya seperti ini karena suatu alasan agar pengecekan browser memenuhi syarat menjadi IE <9, tetapi poin saya adalah bahwa dapat dimengerti, enqueuing adalah metode yang disarankan dan disukai tetapi tergantung pada semua variabel / keadaan lain di sekitar apa yang Anda berusaha untuk mencapainya mungkin tidak selalu yang paling praktis dan saya pikir beberapa kebijaksanaan harus digunakan. Dengar, aku juga bisa benar-benar salah dalam pandangan ini, aku tertarik untuk mendengar apa yang dikatakan beberapa orang yang benar-benar berpengalaman :-)
Matt Royal
Terima kasih atas saran Anda. Saya tidak bisa membuatnya bekerja; jika saya menambahkan kode Anda di dalam tag <? php dari functions.php saya, saya mendapatkan 'Parse error: kesalahan sintaks, tak terduga' <'di /somepath.../functions.php on line 1146'. Jika saya menambahkannya di luar <? Php, ini sepertinya akan menggemakan kode yang diberikan di atas halaman. Apa yang kulewatkan di sini?
user2806026
0

Karena jawabannya sudah diterima, saya hanya ingin mengatakan ada cara lain untuk membuat kode javascript di footer yang telah saya lakukan berkali-kali.

dalam file functions.php:

function load_script_to_remove_arrow(){
?>
<script>
$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
</script>
<?php
}
add_action( 'wp_footer', 'load_script_to_remove_arrow' );

Anda dapat memuat skrip ini ke templat halaman tertentu hanya dengan menggunakan kondisi

if( is_page_template( 'page-template.php' ) ):

//put above code (or just add_action part) inside this condition to load file only if the condition is true 

endif;

jika halaman-template.php ada di direktori (misalkan direktori templates di direktori root tema Anda) Anda bisa menulis seperti:

is_page_template( 'templates/page-template.php' );
Maverick
sumber
Saya tidak akan merekomendasikan "memanggang" JavaScript ke dalam footer seperti ini. Ini mencegahnya menjadi tidak bisa dibuka atau dimodifikasi (setidaknya, mudah) yang sangat penting dalam pengembangan plugin dan tema. Jika Anda adalah pengguna akhir sebuah situs dan membutuhkan skrip cepat atau semacamnya, lakukanlah - tetapi bahkan wp_enqueue_script()hampir selalu secara universal lebih baik dan lebih fleksibel.
Xhynk
-1

Untuk menjawab pertanyaan, pertama-tama kita harus membuat perbedaan antara javascript dan JQuery.

Untuk menyatakannya secara sederhana:

  • Javascript didasarkan pada ECMAScript
  • JQuery adalah perpustakaan untuk Javascript

Jadi pada kenyataannya Anda mengajukan dua pertanyaan berbeda:

  • Judul Anda berbicara tentang solusi untuk mengimplementasikan javascript
  • Pertanyaan Anda berbicara tentang solusi untuk mengimplementasikan JQuery

Karena hasil Google menunjukkan judul Anda dan semua konten halaman berbicara tentang JQuery, ini bisa membuat sangat frustasi bagi orang yang mencari solusi javascript.

Dan sekarang untuk solusi JQuery:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Dan solusi javascript:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );

Kode ini dapat ditambahkan ke functions.php Anda Lokasi skrip dalam kedua kasus adalah wp-content/themes/theme-name/js/script.js

Selamat coding!

fred heuvel
sumber
Sekitar waktu ketika OP diposting, devs memang menggunakan jquery dan javascript secara bergantian. Itu sama sekali tidak akurat, tapi itu adalah seberapa populer jquery dan berapa banyak fitur javascript yang hilang.
Rocky Kev