Loncat ke Konten Utama

Javascript di WordPress: AJAX use case

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Ajax, atau Asynchronous Javascript dan XML, digunakan untuk berkomunikasi dengan skrip sisi server dan memungkinkan Anda memuat konten dinamis tanpa harus memuat ulang halaman.

Katakan, misalnya, bahwa Anda sedang membangun situs web untuk amal lokal dan Anda ingin mendorong suasana positif. Anda dapat menambahkan tombol berlabel "Tunjukkan sedikit cinta! »Dengan penghitung di laman beranda dan, terima kasih kepada AJAX, setiap kali tombol ini beraksi (diklik oleh pengunjung), peningkatan penghitung tanpa memuat ulang laman.

Ini adalah contoh yang akan kita buat dalam tutorial ini.

Dalam tutorial ini, Anda akan belajar lebih banyak tentang apa itu AJAX, bagaimana itu dapat digunakan, dan bagaimana membuat fitur-fitur hebat dengan itu di WordPress.

Mari kita mulai.

Dasar-dasar AJAX

  • Umpan AJAX biasanya mengikuti langkah-langkah berikut:
  • Memulai panggilan AJAX karena tindakan pengguna
  • Menerima dan memproses permintaan di server
  • Abadikan respons dan lakukan semua tindakan yang diperlukan melalui JavaScript
  • Menyiapkan lingkungan tema baru

Mari kita praktikkan ini di WordPress. Contoh pertama kami menunjukkan sembulan sederhana yang berisi jumlah komentar dari suatu artikel ketika kami mengklik judulnya. Kami akan menggunakan tema anak berdasarkan tema " dua puluh Enam belas Dari WordPress.

Inilah yang perlu Anda lakukan:

Buat folder baru di direktori Tema di instalasi WordPress Anda di " wp-konten Dan beri nama "ajax-test", buat dua file dibutuhkan oleh WordPressyaitu functions.php "," Styles.css "dan tambahkan file baru yang disebut" script.js ". Tambahkan kode berikut ke tajuk lembar gaya CSS Anda (style.css).

/ * Nama Tema: Ajax Test Theme URI: http://premium.wpmudev.com Deskripsi: Tema untuk menguji pengetahuan AJAX kami Penulis: Daniel Pataki Pengarang URI: http://danielpataki.com Templat: twentysixteen Versi: Lisensi 1.0.0 : GNU General Public License v2 atau yang lebih baru Lisensi URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Lembar gaya tema induk harus dimuat oleh tema anak. Di masa lalu, ini dilakukan dengan mengimpor file CSS ke tema anak, tetapi metode yang disarankan untuk melakukan ini adalah dengan menggunakan "enqueueing". Ingat, kami menunjukkan kepada Anda cara menggunakan fitur ini.

Jadi mari kita tambahkan style sheet induk dan file JavaScript kita secara langsung:

add_action ('wp_enqueue_scripts', 'ajax_test_scripts'); fungsi ajax_test_scripts () {wp_enqueue_style ('parent-style', get_template_directory_uri (). '/style.css'); wp_enqueue_script ('ajax-test-scripts', get_stylesheet_directory_uri (). '/scripts.js', array ('jquery'), '1.0.0', true); }

Jika Anda merasa memiliki energi untuk melangkah lebih jauh, cari gambar yang indah, pangkas ke 880px oleh 660px dan letakkan di folder tema anak, lalu ganti namanya screenshot.png ". Ini akan muncul di bagian Appearance ketika Anda ingin mengaktifkan tema.

contoh tema ajax WordPress

Karena tema anak ini didasarkan pada " dua puluh Enam belas Dan bahwa kami belum mengubah apa pun (belum!), Situs ini harus terlihat persis seperti tema klasik dengan tema " dua puluh Enam belas '.

Tambahkan sebuah tombol

Untuk memulai, kami akan menambahkan tombol " Tunjukkan sedikit cinta! ". Lokasi yang bagus untuk menampilkannya adalah artikel bertema sidebar.

Setelah beberapa penelitian, ternyata sidebar dibuat oleh fungsi bernama " twentysixteen_entry_meta () »Yang berada di direktori« inc / template-tags.php '.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Fungsi ini adalah " dihubungkan Yang berarti bahwa kita dapat memodifikasinya dengan mendefinisikannya di file functions.php kita sendiri. Langkah pertama adalah menyalin dan menempelkan seluruh fungsi ke file functions.php kita sendiri:

fungsi twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf ('<span class = "byline"> <span class = "author vcard">% 1 $ s <span class = "screen-reader-text" ('user_email'), $ author_avatar_size), _x ('Penulis', 'author_avatar_size', ' '), Esc_url (get_author_posts_url (get_the_author_meta (' ID '))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'attachment'))) {twentysixteen_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('post-format', $ format)) {printf ('<span class = "entry-format">% 2 $ s <a href="%3$s"> 4 $ s </ a ('format', 'digunakan sebelum format pos', 'twentysixteen')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo '<span class = "komentar-link">'; comments_popup_link (sprintf (__ ('twentysixteen'), get_the_title ())); echo '</ span>'; }}

Mari tambahkan kunci kami di bagian bawah semua metadata:

$ Get_post_meta cinta = (get_the_ID (), 'show_some_love', true); $ love = (kosong ($ love))? 0: $ love; echo '<span class = "number">' <span class = "love-button"> <img width = "28" $ cinta </ Span> </ span> ';
Mari kita jelaskan semua kode ini:

Baris pertama mengambil jumlah cinta yang diterima artikel. Dalam beberapa kasus, data ini tidak akan ada, yaitu, ketika Anda belum mengklik tombol. Untuk alasan ini, kami menggunakan

baris kedua dalam kode untuk mengatur nilai ke 0 jika nilainya kosong.

Baris ketiga memberikan tombol, yang terdiri dari rentang yang berisi gambar dan jumlah cinta. Saya membiarkan sumber gambar kosong karena saya ingin menggunakan SVG di sana. Anda dapat menggunakan SVG yang disandikan base64 untuk membuat garis gambar. Ini menyelamatkan Anda dari membuat permintaan dan akan membuat situs web Anda lebih efisien.

Saya menggunakan gambar gratis kecil ini yang tersedia link ini. Copy dan paste kode yang anda terima ke sumber gambar seperti ini:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

Saya juga menggunakan beberapa CSS untuk gaya tombol untuk memberikan efek hover. Tidak terlalu jelas bahwa itu adalah tombol, tetapi itu akan menjadi tes sederhana kami.

.love-button img {margin-right: 6px; opacity: 0.7; kursor: pointer; } .love-button img: hover {opacity: 1; }

tutorial cinta WordPress

Memicu suatu tindakan

Akhirnya, kita sampai pada JavaScript kita! Kami harus menargetkan item kami dan mendeteksi klik di sana. Berikut cara melakukannya:

(function ($) {$ (document) .on ('click', '.love-button img', function () {alert ("love shared");})}) (jQuery);

Jika Anda mengklik tombol pada titik ini, Anda akan melihat peringatan JavaScript dengan teks "Cinta dibagikan. "

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Persyaratan data

Alih-alih teks ini, kita perlu memicu panggilan AJAX. Sebelum menulis kode kita, kita akan mengerti apa yang perlu kita kirim.

URL AJAX

Pertama, kita membutuhkan tempat untuk mengirim data. Tempat kami mengirim data, memproses data, dan menjawab panggilan. WordPress memiliki lokasi bawaan untuk menangani panggilan AJAX, yang dapat kita gunakan: file " admin-ajax.php Di dalam " wp-admin ". Kami tidak dapat menambahkan URL ini ke skrip kami (memanfaatkan pengkodean "mentah" tidak dapat diterima), jadi kita akan menggunakan beberapa trik WordPress.

Fungsinya wp_localize_script () Awalnya dimaksudkan untuk menerjemahkan string ke file JavaScript, yang berfungsi dengan baik. Kami juga dapat menggunakannya untuk mengirimkan variabel ke file JavaScript kami, dalam hal ini URL file AJAX kami. Tambahkan kode berikut ke file kami fungsi Sebagai berikut:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', array ('ajax_url' => admin_url ('admin-ajax.php')));

Hasil dari objek terakhir ini akan dinamai ajaxTest, yang akan berisi array yang diberikan dalam parameter terakhir sebagai properti. Untuk memasukkan nilai yang bisa kita gunakan ajaxTest.ajax_url dalam kode JavaScript kami

Pengidentifikasi artikel

Kami akan mengirimkan data sewenang-wenang sebagai pengidentifikasi artikel (yang akan kita gunakan untuk mengidentifikasi artikel yang ingin kita "tambahkan sedikit cinta"). Ini dapat dipulihkan dari DOM. Lihatlah struktur yang digunakan dalam tema Twenty Sixteen di bawah ini:

struktur artikel Twenty Sixteen

Tombol kami memiliki "artikel" sebagai salah satu leluhurnya. Elemen ini memiliki kelas dan berisi pengenal numerik artikel. Meskipun ini bukan solusi yang paling elegan, kita dapat memasukkan ID dari sana.

$ (Dokumen) .on ( 'klik', 'img .love-tombol', function () {var = parseInt post_id ($ (ini) .parents ( 'article.post:first'). Attr ( 'id') .replace ('post-', '')) console.log (id)})

tindakan

WordPress juga mengharuskan kami mengirim parameter bernama action. Karena semua tindakan akan dikirim ke admin-ajax, kita perlu cara untuk membedakan pertanyaan ini, maka penggunaan parameter ini.

Mengirim permintaan AJAX

Kita sekarang bisa menyatukan semuanya. Kita perlu membuat panggilan AJAX untuk " wp-admin / admin-ajax.php Yang berisi ID artikel dan tindakan. Beginilah seharusnya.

(Fungsi ($) {$ (document) .on ( 'klik', 'img .love-tombol', function () {var = parseInt post_id ($ (ini) .parents ( 'article.post:first'). . attr ( 'id') ganti ( 'post', '')); $ ajax ({url: ajaxTest.ajax_url tipe 'post', Data: {aksi: 'add_love' pOST_ID: post_id} , sukses: function (respon) {alert ( 'sukses, hitungan baru' + respon)}})})}) (jQuery);

$ .ajax () adalah fungsi yang digunakan yang mengambil banyak parameter. Url berisi target yang saat ini adalah file kami ajax-url.php ". Jenis diatur ke " pos Seperti permintaan yang dikirim oleh formulir. Parameter data adalah objek yang berisi " kunci-nilai Itu yang ingin kita kirim ke server. Nantinya, kita dapat membacanya dengan $ _POST ['action'] dan $ _POST ['post_id'].

Memproses aplikasi

Biasanya Anda perlu mengedit file " admin-ajax.php Karena permintaan dikirim ke sana. Ini file sistem, jadi kami tidak akan mengubahnya. WordPress memungkinkan Anda untuk mengirim kueri AJAX menggunakan tanda kurung siku dengan parameter aksi. Modelnya adalah sebagai berikut:

Jika Anda menyebutkan tindakan Anda add_love Anda harus melampirkan fungsi ke pengait bernama " wp_ajax_add_love Dan / atau wp_ajax_nopriv_add_love ". Tindakannya NoPriv Berjalan untuk pengguna yang terputus, satu dipicu hanya untuk pengguna yang masuk. Dalam kasus kami, kami ingin menggunakan keduanya. Sebagai pengujian cepat, kami akan menetapkan nilai pengembalian default:

Parameter keberhasilan adalah fungsi yang akan dieksekusi ketika panggilan AJAX selesai. Kami akan menampilkan peringatan sederhana yang menunjukkan "Bravo! Akun baru adalah "dengan jawaban kami ditambahkan di akhir.

add_action ('wp_ajax_add_love', 'ajax_test_add_love'); add_action ('wp_ajax_nopriv_add_love', 'ajax_test_add_love'); fungsi ajax_test_add_love () {echo 4; mati (); }

Kami melampirkan fungsi kami ke kedua kurung, satu selesai gema 4 dan kemudian menggunakan fungsi " mati () ". Ini diperlukan di WordPress, jika tidak Anda akan menerima 0 di akhir setiap jawaban. Jika Anda mengklik tombol sekarang Anda akan melihat yang berikut:

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

contoh tombol ajax jquery

Untuk mendapatkan jumlah "suka" yang sebenarnya yang perlu kita lakukan adalah mendapatkan nomor saat ini, menambahkannya satu per satu, menyimpannya ke database dan menampilkan nomor baru.

fungsi ajax_test_add_love () {$ love = get_post_meta ($ _POST ['post_id'], 'show_some_love', true); $ love = (kosong ($ love))? 0: $ love; $ Cinta ++; update_post_meta ($ _POST ['post_id'], 'show_some_love', $ love); echo $ love; mati (); }

Jika Anda mengklik tombol sekarang Anda akan melihat jendela sembul menampilkan "1". Jika Anda me-refresh halaman, Anda akan melihat nomor baru ditampilkan. Mengklik tombol lagi akan membuatnya 2 ". Yang perlu kita lakukan sekarang adalah memastikan angkanya tercermin langsung di antarmuka pengguna.

Buat perubahan pada antarmuka pengguna menggunakan jawaban

Bagian ini terasa mudah (karena memang begitu), tetapi biasanya yang paling sulit untuk diatur. Untuk saat ini yang perlu kita lakukan adalah mencari item yang berisi angka saat ini dan mengubah isinya dengan jawabannya.

(fungsi ($) {$ (dokumen) .on ('klik', 'img tombol imitasi', fungsi () {var post_id = parseInt ($ (this) .parents ('article.post:first'). temukan ('.' number) $ .ajax ({url: ajaxTest.ajax_url, ketik: 'post', data: {action: 'add_love', post_id: post_id,}, success: function (response) {$ number.text (response);}})}) (jQuery);

Saya hanya menambahkan dua baris ke kode JS kami sebelumnya. Pada baris 5, saya menyimpan elemen yang berisi angka pada variabel $ nomor. Pada baris 14, saya memodifikasi teks elemen ini untuk menampilkan jawabannya, yang merupakan nomor baru.

Itu saja, pada prinsipnya Anda harus dapat melihat fitur baru ini beraksi pada tema khusus Anda. Jika Anda mengalami masalah, jangan ragu untuk memberi tahu kami. Apakah Anda memiliki tip lain yang ingin Anda bagikan? Lakukan di bagian komentar.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
7 saham
saham2
menciak1
Register4