Cara Menggunakan Ajax Di WordPress

Diterbitkan: 2022-10-07

Ajax adalah teknik populer untuk membuat aplikasi web yang dinamis dan responsif. Banyak tema dan plugin WordPress menggunakan Ajax untuk memberikan pengalaman pengguna yang lebih lancar. Dalam tutorial ini, kami akan menunjukkan cara menggunakan Ajax di tema WordPress Anda. Kami akan membahas topik-topik berikut: Apa itu Ajax? Bagaimana cara menggunakan Ajax di WordPress? Ajax di tema WordPress Ajax di plugin WordPress Contoh Ajax di WordPress Apa itu Ajax? Ajax adalah teknik pengembangan web yang memungkinkan aplikasi web berinteraksi dengan data server tanpa memuat ulang halaman. Permintaan Ajax dibuat menggunakan objek XMLHttpRequest. Server memproses permintaan dan mengembalikan respons. Respons tersebut kemudian diproses oleh browser dan hasilnya ditampilkan di halaman. Ajax dapat digunakan untuk membuat aplikasi web yang dinamis dan responsif. Ada dua cara untuk menggunakan Ajax di WordPress: 1. Gunakan fungsi Ajax bawaan WordPress. 2. Gunakan perpustakaan jQuery. Fungsi WordPress Ajax adalah metode yang disukai untuk sebagian besar situasi. Pustaka jQuery adalah pustaka JavaScript populer yang dapat digunakan untuk membuat permintaan Ajax. Ajax di tema WordPress Banyak tema WordPress menggunakan Ajax untuk meningkatkan pengalaman pengguna. Misalnya, tema WordPress Twenty Seventeen menggunakan Ajax untuk memuat komentar di posting blog. Jika Anda mengembangkan tema WordPress, Anda dapat menggunakan fungsi WordPress Ajax bawaan atau perpustakaan jQuery untuk membuat permintaan Ajax. Ajax di plugin WordPress Banyak plugin WordPress menggunakan Ajax untuk meningkatkan pengalaman pengguna. Misalnya, plugin WordPress Contact Form 7 menggunakan Ajax untuk mengirimkan data formulir tanpa memuat ulang halaman. Jika Anda mengembangkan plugin WordPress, Anda dapat menggunakan fungsi WordPress Ajax bawaan atau perpustakaan jQuery untuk membuat permintaan Ajax. Contoh Ajax di WordPress Berikut adalah beberapa contoh bagaimana Ajax digunakan di WordPress: Memuat komentar pada posting blog Mengirimkan data formulir tanpa memuat ulang halaman Memuat hasil pencarian tanpa memuat ulang halaman Menampilkan posting baru tanpa memuat ulang halaman Jika Anda sedang mengembangkan tema WordPress atau plugin, Anda dapat menggunakan Ajax untuk meningkatkan pengalaman pengguna.

Bahasa pemrograman yang paling populer dalam pengembangan web adalah AJAX (Asynchronous JavaScript and XML). Ini sangat berguna untuk aplikasi seperti Amazon dan lainnya. Ajax adalah aplikasi yang memungkinkan Anda mengirim dan menerima data tanpa memuat ulang browser web Anda. Ajax, yang sudah ada di WordPress, akan digunakan untuk demonstrasi. Langkah pertama adalah membuat file JavaScript tersedia di WordPress. Saat diminta oleh fungsi wp_enqueue_script(), Anda dapat melampirkan file JavaScript. Permintaan Ajax harus dibuat.

Untuk memulai, Anda harus terlebih dahulu membuka file custom.js dan menyalin kode berikut. Untuk mengirim permintaan AJAX, silakan kunjungi www.example.com/administrator/ajax.php. Kita harus mendefinisikan sebuah kait tindakan untuk menangani permintaan agar dapat menanganinya dengan benar.

AJAX, singkatnya, adalah JavaScript dan XML asinkron. Intinya, XMLHttpRequest digunakan untuk mengirim permintaan ke server. Sistem dapat mengirim dan menerima data dalam berbagai format, termasuk file JSON, XML, HTML, dan teks.

JavaScript ditempatkan di kepala atau badan di browser. Jika Anda menempatkan semua JavaScript, termasuk semua JavaScript, di bagian bawah body>, ini akan mengurangi waktu pemuatan.

Bisakah Kita Menggunakan Ajax Di WordPress?

Kredit: awhitepixel.com

Di WordPress, pengguna memicu permintaan Ajax, yang kemudian diteruskan ke admin-ajax melalui metode Ajax . Anda bisa mendapatkannya dengan menyalin file php dari folder WP-Admin. Untuk mengirim permintaan Ajax, satu atau lebih data harus disediakan (baik melalui GET atau POST).

Ajax dapat digunakan untuk memuat data dari backend, mengirim data ke server di latar belakang, meminta data, dan menerima data saat halaman sedang dimuat. Teknik yang kuat ini dapat digunakan dalam berbagai aplikasi, selain aplikasi web itu sendiri. Muat data yang harus divalidasi sebelum menyimpan tindakan ke dalam aplikasi Ajax . Pengguna tidak perlu menunggu halaman dimuat ulang setelah memodifikasi data dengan cara ini. Ajax adalah alat yang ampuh yang dapat digunakan dalam berbagai cara untuk mengurangi waktu yang dibutuhkan untuk membangun aplikasi backend.

Bagaimana Saya Dapat Mengetahui Jika WordPress Ajax Berfungsi?

Kredit: Stack Overflow

Tidak ada cara pasti untuk mengetahui apakah WordPress Ajax berfungsi atau tidak. Cara terbaik untuk mengujinya adalah dengan mencoba membuat permintaan dari front-end situs Anda. Jika permintaan berjalan dan Anda melihat hasil yang diharapkan, maka WordPress Ajax mungkin berfungsi sebagaimana mestinya.

Menggunakan WP_doing_ajax di WordPress 4.0.0 akan memungkinkan Anda melakukan tindakan apa pun. Ini lebih disukai karena plugin yang melakukan Ajax secara berbeda dapat mengubah urutan filter dari false menjadi true. Dalam codex, do_AJAX harus disetel ke true untuk menguji konstanta ini. Ian dan Spencer sama-sama menyatakan interpretasi yang benar.

Cara Menggunakan Ajax Di WordPress

Di area admin WordPress, AJAX digunakan. Yang harus Anda lakukan adalah menggunakan kode yang telah dibuat untuk Anda.

Apa yang Dilakukan Metode Ajax ()?

Permintaan AJAX (HTTP asinkron) dijalankan menggunakan metode Ajax(). Metode jQuery AJAX, yang menggunakan metode jQuery(), digunakan untuk semua metode jQuery AJAX . Metode ini biasanya digunakan untuk memenuhi permintaan yang tidak ditangani oleh metode lain.

Tidak ada bahasa pemrograman di Ajax, seperti yang tersirat dalam subtitle. Teknologi asinkron bekerja dengan cara yang sama seperti AJAX, yaitu meminta lebih banyak data dari server dan memuatnya di server di latar belakang tanpa menyentuh tampilan atau bagian halaman lainnya. Dengan demikian, Anda dapat menelusuri informasi yang ditampilkan tanpa memuat ulang situs. Metode $.load() dapat digunakan untuk memuat data ke dalam elemen situs web. Metode $.get() dan metode $.post() keduanya melakukan hal yang sama. Kami mengirim parameter pada metode ini untuk mengirim yang pertama, tetapi itu bukan persyaratan. Ini adalah gambaran global implementasi AJAX dan JQuery .

AJAX dapat digunakan untuk mengakses data dari web server. Dalam konten dinamis, kita dapat menggunakan AJAX. Dimungkinkan untuk mengangkut data dalam teks biasa atau JSON menggunakan AJAX.

Tiga Jenis Permintaan Servlet

servlet diklasifikasikan menjadi tiga jenis: br>, br>2, dan br>3. Permintaan GET adalah contoh permintaan data server.
Menggunakan POST adalah cara paling umum untuk mengirim data ke server.
Data ditransfer antara server dan file PUT.


WordPress Ajax Posting

Ajax adalah teknologi yang memungkinkan pembuatan aplikasi web yang dinamis dan responsif. WordPress adalah sistem manajemen konten yang memungkinkan pembuatan dan pengelolaan situs web atau blog. WordPress Ajax memungkinkan sistem manajemen konten WordPress untuk berkomunikasi dengan database WordPress tanpa harus memuat ulang seluruh halaman. Ini membuat pengalaman web yang lebih responsif dan dinamis bagi pengguna.

Apakah Ajax Sebuah Permintaan Posting?

Memang benar bahwa permintaan posting dikirim melalui Ajax.

Ajax Di WordPress Tanpa Plugin

Ajax adalah teknik yang digunakan untuk membuat permintaan asinkron dari browser ke server. Ini berarti bahwa alih-alih harus memuat ulang seluruh halaman saat pengguna mengklik tautan, hanya bagian halaman yang perlu diperbarui yang dimuat ulang. WordPress hadir dengan perpustakaan ajax sendiri, yang dapat digunakan untuk melakukan permintaan ajax tanpa harus menginstal plugin. Untuk menggunakan perpustakaan ajax WordPress, cukup sertakan kode berikut dalam file functions.php tema Anda: add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' ); function my_theme_enqueue_scripts() { wp_enqueue_script( 'ajax-script', get_template_directory_uri() . ' /js/ajax.js', array('jquery') ); wp_localize_script( 'ajax-script', 'ajax_params', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) )); } Kode di atas akan mengantrekan file ajax.js dan meneruskan parameter ajax_url ke sana. Parameter ajax_url adalah URL dari file admin-ajax.php WordPress, yang digunakan untuk menangani permintaan ajax. Dalam file ajax.js, Anda kemudian dapat menggunakan variabel ajax_params.ajax_url untuk membuat permintaan ajax: jQuery(document).ready(function($){ $.ajax({ url: ajax_params.ajax_url, ketik: 'POST', data: { tindakan: 'my_action', param1: 'value1', param2: 'value2' }, sukses: function(data) { alert('success'); }, error: function(data) { alert('error' ); } }); }); Kode di atas akan membuat permintaan POST ke file admin-ajax.php, dengan parameter aksi diatur ke my_action. Tindakan my_action kemudian akan ditangani oleh fungsi di file functions.php: add_action( 'wp

Keuntungan utama Ajax adalah kemampuannya untuk mengelola operasi database tanpa memuat ulang halaman web. Hasilnya, Anda dapat menyimpan data dari database dan menampilkannya di front-end tanpa harus me-refresh halaman. Karena ini adalah cara cepat dan sederhana untuk menampilkan konten, Ajax telah menjadi sistem manajemen konten yang banyak digunakan di banyak situs web. File JavaScript dan CSS harus didaftarkan dan diantrekan dengan kait WordPress agar berfungsi dengan baik. Langkah selanjutnya adalah membuat link Read Me Later untuk setiap posting blog. Ketika pengguna mengklik tautan, posting akan muncul di daftar 'Baca Saya Nanti'. Setelah kami memeriksanya, kami akan membuat tautannya.

Dengan kata lain, kami menggunakan atribut data HTML5 untuk menyimpan ID posting blog. Di dalam plugin, fungsi get_the_id() dapat digunakan untuk mengambil ini. Untuk menjalankan panggilan Ajax , panggilan tersebut harus dijalankan terlebih dahulu di file admin-ajax.php. File bertanggung jawab untuk menangani dan memproses semua permintaan Ajax Anda dalam konteks WordPress. Kami telah menambahkan metode ke kode kami yang akan dipanggil saat pengguna mengklik tautan 'Baca Saya Nanti'. ID posting diambil menggunakan metode data dalam fungsi ini, yang disimpan di 'rml_post_id' sebagai variabel. Kode berikut diperlukan untuk menggunakan metode berikut setelah metode.ajax() digunakan.

Ketika pengguna mengklik tautan 'Baca Saya Nanti', itu akan dihapus. ID posting disimpan sebagai variabel dalam variabel $rml_post_id. Fungsi get_user_meta() memanfaatkan baris di WordPress. Jika benar, kami menyimpannya di database kami, menggunakan tabel usermeta. Kami memeriksa untuk melihat apakah $value ada. Dalam file read-me-later.html, salin kode berikut: Fungsi update() menghapus nilai input pengguna dan memperbaruinya. Semua posting dapat dipilih menggunakan fungsi get_posts() WordPress, yang digunakan untuk menentukan preferensi pengguna.

Sekarang kita akan menyiapkan metode widget() untuk menampilkan 'Read Me.' Nanti postingan akan dibuat di frontend. Sejujurnya, saya tidak keberatan dengan widget sederhana di sini. Jika permintaan tidak datang dari lokasi yang benar dan pengguna yang diautentikasi membuatnya, nonce akan digunakan. Jika nonce salah atau tidak menentukan pengaturan, panggilan Ajax akan dihentikan. Dalam tutorial ini, kami membuat sistem di mana pengguna dapat menyimpan posting favorit mereka dan kemudian membacanya nanti dengan melakukannya.

Menggunakan Ajax Di WordPress

Jika Anda ingin menggunakan Ajax di situs WordPress Anda, Anda harus terlebih dahulu memahami cara kerja permintaan sebelum Anda dapat mengatur file admin-ajax.html Anda untuk mengirim permintaan Ajax ke URL yang benar.

WordPress Ajax Url

Ajax adalah teknik yang digunakan untuk membuat permintaan asinkron dari browser ke server. Ini berarti bahwa alih-alih harus memuat ulang seluruh halaman saat pengguna membuat perubahan, hanya bagian halaman yang perlu diperbarui yang dimuat ulang. WordPress menggunakan ajax untuk banyak hal, seperti memastikan jumlah posting yang benar ditampilkan ketika pengguna mengubah jumlah posting untuk ditampilkan di halaman beranda blog mereka.

Cara Menggunakan Ajax Di WordPress

URL ditentukan di sebagian besar contoh AJAX di halaman dokumentasi jQuery. Setiap kali Anda membuat permintaan server, baik menggunakan AJAX atau metode kuno sinkron, Anda harus menentukan siapa yang akan mengirimkannya (apakah Anda menggunakan AJAX atau metode kuno sinkron). Hampir semua contoh yang saya lihat di halaman dokumentasi jQuery memiliki URL tertentu (url: test).
Apa itu AJAX? Menggunakan AJAX, Anda dapat mengirim data ke skrip dan kemudian menerima dan memproses responsnya tanpa perlu memuat ulang halaman. Menggunakan HTML, CSS, dan JavaScript, Anda dapat mengirim data ke skrip. Untuk melakukannya, permintaan AJAX harus dibuat dan URL harus diberikan ke skrip tempat data akan diproses.
Untuk apa WordPress?
Sistem manajemen konten (CMS) WordPress adalah CMS populer yang menggunakan AJAX untuk memungkinkan Anda mengirim data ke skrip dan menerima serta memproses respons skrip tanpa perlu memuat ulang halaman. WordPress mengaitkan fungsi khusus ke dalam panggilan Ajax yang disebut WP_ajax_, yang dijalankan selama panggilan Ajax.
Bagaimana saya bisa memanggil admin di WordPress sebagai Ajax?
Permintaan AJAX WordPress dikirim ke URL umum, dan ketika parameter dikembalikan, metode yang sesuai dipanggil secara internal menggunakan parameter. Admin_url, 'ajax,' adalah pilihan yang paling tepat. URL ini dapat diperoleh dengan menggunakan fungsi WordPress PHP' (').