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

Katakanlah, misalnya, Anda sedang membangun situs jaringan untuk amal lokal dan Anda ingin mendorong getaran positif. Anda dapat menambahkan tombol berlabel "Tunjukkan cinta! »Dengan penghitung di beranda dan, berkat AJAX, setiap kali tombol diaktifkan (diklik oleh a pengunjung), peningkatan penghitung tanpa memuat ulang laman.

Ini adalah contoh yang akan kami 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 menampilkan popup sederhana yang berisi jumlah komentar untuk sebuah artikel saat kami mengklik judulnya. Kami akan menggunakan tema anak berdasarkan " 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 bernama" script.js ". Tambahkan kode berikut ke header 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 * /

Stylesheet tema induk harus dimuat oleh tema anak. Di masa lalu, ini dilakukan dengan mengimpor file CSS ke tema anak, tetapi cara yang disarankan untuk melakukannya adalah dengan menggunakan "enqueueing". Ingat, kami telah menunjukkan 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, temukan gambar yang bagus, potong menjadi 880px kali 660px dan letakkan di folder tema anak, lalu ganti namanya " screenshot.png ". Ini akan muncul di bagian tampilan, ketika Anda ingin mengaktifkan tema.

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

Menambahkan tombol

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

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

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

function Twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Penulis', 'Digunakan sebelum nama penulis posting.', 'dua puluhsixteen'), 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 (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Used before post format.', ' dua puluh enam ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } jika (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Tinggalkan komentar di% s ', 'dua puluhsixteen'), get_the_title ())); echo ' '; }}

Mari tambahkan kunci kami di bagian bawah semua metadata:

$ love = get_post_meta (get_the_ID (), 'show_some_love', true); $ cinta = (kosong ($ cinta))? 0: $ cinta; echo ' '. $ cinta. ' ';

Mari kita jelaskan semua kode ini:

Baris pertama mengambil jumlah cinta yang diterima artikel tersebut. Dalam beberapa kasus, data ini tidak akan ada, dengan kata lain saat tombol belum diklik. 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 tuntutan dan akan membuat Anda situs web lebih hemat.

Saya menggunakan gambar gratis kecil ini yang tersedia link ini. Salin dan tempel kode yang Anda terima ke dalam 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 sedikit CSS untuk gaya tombol untuk memberikan efek hover. Tidak terlalu jelas apakah itu tombol, tetapi akan untuk pengujian sederhana kami.

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

Memicu 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 saat ini, Anda akan melihat peringatan JavaScript dengan teks "Cinta dibagikan." "

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-tama, kita membutuhkan tempat untuk mengirim data. Tempat kami mengirimkan data akan memproses data dan menjawab panggilan. WordPress memiliki tempat bawaan untuk menangani panggilan AJAX, yang dapat kita gunakan: " admin-ajax.php " dalam " wp-admin ". Kami tidak dapat menambahkan URL ini ke skrip kami (menggunakan pengkodean "mentah" tidak dapat diterima), jadi kita akan menggunakan beberapa trik WordPress.

Fungsinya wp_localize_script () Awalnya dimaksudkan untuk menerjemahkan string dalam file JavaScript, yang dilakukannya dengan baik. Kami juga dapat menggunakannya untuk meneruskan 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 kami gunakan untuk mengidentifikasi artikel yang ingin kami "tambahkan sedikit cinta"). Ini bisa diambil dari DOM. Lihatlah struktur yang digunakan dalam tema "Dua Puluh Enam Belas" di bawah ini:

Tombol kami memiliki "artikel" sebagai salah satu leluhurnya. Elemen ini memiliki kelas dan berisi pengenal numerik artikel. Meskipun ini bukan solusi yang paling elegan, kami dapat mengambil 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 tindakan. Karena semua tindakan akan dikirim ke admin-ajax, kita memerlukan cara untuk membedakan permintaan tersebut, oleh karena itu parameter ini digunakan.

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. Seperti inilah seharusnya terlihat.

(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 semua permintaan yang dikirim oleh a bentuk. Parameter data adalah objek yang berisi " kunci-nilai Yang ingin kami kirim ke server. Nanti kita akan bisa membacanya dengan $ _POST ['action'] dan $ _POST ['post_id'].

Memproses aplikasi

Biasanya Anda perlu mengedit file " admin-ajax.php », Karena permintaan dikirim ke sana. Ini adalah file sistem, jadi kami tidak akan mengubahnya. WordPress memungkinkan Anda untuk mengirimkan permintaan AJAX menggunakan tanda kurung siku dengan parameter tindakan. 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 keluar, satu pemicu hanya untuk pengguna yang masuk. Dalam kasus kami, kami ingin menggunakan keduanya. Sebagai tes cepat, kami akan menetapkan nilai pengembalian default:

Parameter sukses adalah fungsi, yang akan dijalankan ketika panggilan AJAX selesai. Kami akan menampilkan peringatan sederhana yang menunjukkan "Bagus! 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:

Untuk mendapatkan nomor "suka" yang sebenarnya, yang perlu kita lakukan adalah mengambil nomor saat ini, menambahnya 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 nomor tersebut tercermin langsung di UI.

Lakukan perubahan pada antarmuka pengguna menggunakan respons

Bagian ini terasa mudah (karena memang begitu), tetapi umumnya paling sulit untuk digabungkan. Untuk saat ini yang perlu kita lakukan adalah mencari elemen yang berisi nomor saat ini dan mengubah isinya dengan respons.

(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 dasarnya Anda harus dapat melihat fitur baru ini beraksi pada tema khusus Anda. Jika Anda memiliki masalah, beri tahu kami. Apakah Anda memiliki tip lain yang ingin Anda bagikan? Lakukan di bagian komentar.