Memanfaatkan Kekuatan Hooks WordPress: Tindakan dan Filter Dijelaskan

Seperti CMS lainnya, WordPress tidak akan selalu memenuhi setiap kebutuhan Anda secara langsung. Karena ini open-source, Anda dapat meretasnya agar sesuai dengan kebutuhan bisnis Anda—tetapi sebaliknya, Anda dapat menggunakan kait WordPress untuk mencapai tujuan Anda. Membangun dengan kait adalah strategi pemenang yang membebaskan pengembang WordPress untuk membangun hampir semua fitur situs web yang bisa dibayangkan.

Kait WordPress: Tindakan dan Filter

Hook WordPress bukan hanya alat kustomisasi yang kuat, tetapi juga bagaimana komponen WordPress berinteraksi satu sama lain. Fungsi terkait mengelola banyak tugas rutin yang kami anggap sebagai bagian tak terpisahkan dari WordPress, seperti menambahkan gaya atau skrip ke halaman, atau mengelilingi teks footer dengan elemen HTML. Pencarian basis kode WordPress Core mengungkapkan ribuan kait di lebih dari 700 lokasi. Tema dan plugin WordPress berisi lebih banyak kait.

Sebelum kita beralih ke hook dan menjelajahi perbedaan antara action hook dan filter hook, mari kita pahami di mana mereka cocok dengan arsitektur WordPress.

Infrastruktur WordPress

Elemen modular WordPress siap berintegrasi satu sama lain, sehingga kita dapat dengan mudah mencampur, mencocokkan, dan menggabungkan:

1. Inti WordPress: Ini adalah file yang diperlukan agar WordPress berfungsi. WordPress Core menyediakan arsitektur umum, dasbor Admin WP, kueri basis data, keamanan, dan banyak lagi. WordPress Core ditulis dalam PHP dan menggunakan database MySQL.
2. Tema (atau Tema Induk): Tema mendefinisikan tata letak dan desain dasar situs web. Didukung oleh file PHP, HTML, JavaScript, dan CSS, sebuah tema berfungsi dengan membaca database WordPress MySQL untuk menghasilkan kode HTML yang ditampilkan di browser. Kait dalam tema dapat menambahkan lembar gaya, skrip, font, atau jenis posting khusus, misalnya.
3. Tema Anak: Kami membuat tema anak sendiri untuk menyempurnakan tata letak dan desain dasar yang disediakan oleh tema induk. Tema anak dapat menentukan stylesheet dan skrip untuk memodifikasi fitur yang diwarisi atau menambah atau menghapus jenis posting. Instruksi tema anak selalu menggantikan instruksi dari tema induk.
4. Plugin: Untuk memperluas fungsionalitas back-end WordPress, kita dapat memilih dari ribuan plugin pihak ketiga. Kait dalam sebuah plugin dapat, misalnya, memberi tahu kami melalui email saat sebuah postingan dipublikasikan atau menyembunyikan komentar yang dikirimkan pengguna yang berisi bahasa terlarang.
5. Plugin Kustom: Ketika plugin pihak ketiga tidak sepenuhnya memenuhi kebutuhan bisnis, kami dapat meningkatkannya dengan menulis plugin kustom di PHP. Atau kita bisa menulis plugin baru dari awal. Dalam kedua kasus, kami akan menambahkan kait untuk memperluas fungsionalitas yang ada.

Mengingat bahwa kami memiliki akses ke sumber dari kelima lapisan, mengapa kait diperlukan di WordPress?

Keamanan Kode

Untuk mengikuti perkembangan teknologi, kontributor WordPress Core, tema induk, dan plugin sering merilis pembaruan untuk mengurangi kerentanan keamanan, memperbaiki bug, mengatasi ketidaksesuaian, atau menawarkan fitur baru. Seperti yang diketahui oleh konsultan mana pun dengan pengalaman darurat secara langsung, kegagalan untuk memperbarui komponen WordPress dapat membahayakan atau bahkan menonaktifkan situs.

Jika kami secara langsung memodifikasi salinan lokal komponen WordPress upstream, kami menghadapi masalah: Pembaruan menimpa penyesuaian kami. Bagaimana kita bisa menghindari ini saat menyesuaikan WordPress? Melalui kait, dalam tema anak dan plugin khusus.

Pengkodean dalam Tema Anak Kita

Tema anak adalah ruang aman tempat kita dapat menyesuaikan tampilan dan nuansa tema yang kita pasang. Kode apa pun yang ditambahkan di sini akan menimpa kode yang sebanding di induknya tanpa risiko ditimpa oleh pembaruan.

Saat tema anak diaktifkan, itu menautkan ke orang tua yang dinonaktifkan, mewarisi dan menunjukkan karakteristik orang tua sambil tetap tidak terpengaruh oleh pembaruan orang tua. Agar tidak tergoda untuk mengubah tema, praktik terbaik menyarankan agar tema anak diaktifkan sebagai bagian dari penyiapan kami.

Menulis Plugin Kustom

Ketika sebuah plugin diaktifkan, file functions.php -nya dijalankan dengan setiap panggilan di server. WordPress, pada gilirannya, memuat dan mengurutkan kait dari semua plugin aktif sesuai dengan prioritasnya dan mengeksekusinya secara berurutan. Untuk memperluas fungsionalitas plugin pihak ketiga, kita dapat menulis plugin kustom WordPress kita sendiri.

Di mana Menempatkan Kait Kami di WordPress

Persiapan Sebelum Menyelam: Definisi

Untuk menghindari istilah yang tumpang tindih, kami akan tetap berpegang pada terminologi ini:

• Hook adalah sweet spot di WordPress tempat fungsi terdaftar untuk dijalankan. Kami dapat menghubungkan fungsi kami ke salah satu dari banyak kait di WordPress dan komponennya atau membuat sendiri.
  • Kait tindakan menjalankan tindakan.
  • Kait filter menjalankan filter.
• Fungsi tertaut adalah fungsi panggilan balik PHP kustom yang telah kami "kaitkan" ke lokasi kait WordPress. Jenis mana yang digunakan bergantung pada apakah pengait dimaksudkan untuk mengizinkan perubahan di luar fungsi—misalnya, menambahkan langsung ke keluaran halaman web, memodifikasi database, atau mengirim email. Ini dikenal sebagai efek samping .
  • Filter (atau fungsi filter ) harus menghindari efek samping dengan hanya bekerja, lalu mengembalikan salinan yang dimodifikasi, data yang diteruskan ke sana.
  • Tindakan (atau fungsi tindakan ), sebaliknya, dimaksudkan untuk menyebabkan efek samping. Itu tidak memiliki nilai kembali.

Dengan mengingat perbedaan ini, kita dapat memulai eksplorasi kait.

Abstraksi dan Kode Bersih

Ketika tindakan atau filter dimasukkan ke dalam kait, sesuai kebutuhan, kami memenuhi tujuan menulis hanya satu fungsi per tugas dan menghindari duplikasi kode dalam sebuah proyek. Misalnya, kita ingin menambahkan stylesheet yang sama ke tiga templat halaman (arsip, satu halaman, dan pos kustom) di tema kita. Daripada menimpa setiap template di induk, lalu membuat ulang masing-masing di tema anak kita, lalu menambahkan stylesheet ke bagian kepala individu, kita bisa menulis kode dalam satu fungsi dan melampirkannya dengan kait wp_head .

Nomenklatur yang Bijaksana

Hindari konflik secara proaktif dengan memberi nama tema anak atau pengait plugin khusus secara unik. Memiliki kait dengan nama yang sama di satu situs adalah resep untuk perilaku kode yang tidak diinginkan. Praktik terbaik menetapkan bahwa kita memulai nama hook kita dengan awalan pendek yang unik (misalnya, inisial penulis, proyek, atau perusahaan), diikuti dengan nama hook deskriptif. Misalnya, dengan menggunakan pola “inisial proyek plus nama kait”, untuk Plugin Luar Biasa Tahir proyek, kita dapat memberi nama kait kita tfp-upload-document atau tfp-create-post-news .

Pengembangan dan Debugging Bersamaan

Satu kait dapat memicu lebih dari satu tindakan atau filter. Misalnya, kita dapat menulis halaman web yang berisi banyak skrip, yang semuanya menggunakan kait tindakan wp_head untuk mencetak HTML (misalnya, bagian <style> atau <script> ) di dalam bagian <head> di bagian depan halaman.

Dengan demikian, beberapa pengembang plugin dapat memajukan beberapa tujuan secara paralel pada satu plugin, atau membagi plugin menjadi beberapa plugin individual yang lebih sederhana. Jika suatu fitur tidak berfungsi dengan baik, kami dapat langsung menyelidiki dan men-debug fungsi yang terkait tanpa harus mencari seluruh proyek.

tindakan

Tindakan menjalankan kode ketika suatu peristiwa terjadi di WordPress. Tindakan dapat melakukan operasi seperti:

• Membuat data.
• Membaca data.
• Memodifikasi data.
• Menghapus data.
• Merekam izin pengguna yang masuk.
• Melacak lokasi dan menyimpannya dalam database.

Contoh peristiwa di mana tindakan dapat dipicu meliputi:

• init , setelah WordPress dimuat tetapi sebelum mengirim header ke aliran keluaran.
• save_post , ketika sebuah posting telah disimpan.
• wp_create_nav_menu , tepat setelah menu navigasi berhasil dibuat.

Suatu tindakan dapat berinteraksi dengan API untuk mengirimkan data (misalnya, tautan ke pos di media sosial), tetapi tindakan tersebut tidak akan mengembalikan data ke kait panggilan.

Katakanlah kita ingin mengotomatiskan pembagian semua posting baru di situs kita melalui media sosial. Mulailah dengan melihat melalui dokumentasi WordPress untuk hook yang dapat dipicu setiap kali sebuah posting diterbitkan.

Tidak ada jalan pintas untuk menemukan kail kami: Kami akan belajar melalui pengalaman atau mempelajari tindakan yang terdaftar untuk menemukan kandidat yang mungkin. Kami mungkin menganggap save_post sebagai kandidat, tetapi dengan cepat mengesampingkannya karena akan memicu beberapa kali selama satu sesi pengeditan. Pilihan yang lebih baik adalah transition_post_status , yang terpicu hanya ketika status kiriman diubah (mis., dari draft ke publish , dari publish ke trash ).

Kami akan menggunakan transition_post_status tetapi juga akan memperbaiki tindakan kami untuk berjalan hanya ketika status pos kami beralih ke publish . Selanjutnya, dengan mengikuti dokumentasi resmi dan API dari berbagai platform media sosial, kami dapat mengintegrasikan dan mempublikasikan konten posting kami, bersama dengan gambar unggulan:

 <?php function publish_post_on_social_media ( $new_status = NULL, $old_status = NULL, $post_ID = NULL ) { if ( 'publish' == $new_status && 'publish' != $old_status ) { // build the logic to share on social media } } add_action( 'transition_post_status', 'publish_post_on_social_media', 10, 3 ); ?>

Sekarang setelah kita tahu cara menggunakan action hook, ada satu yang sangat membantu, terutama dalam hal CSS.

Menentukan Prioritas Dengan wp_enqueue_scripts

Katakanlah kita ingin menambahkan lembar gaya tema anak kita terakhir, setelah semua yang lain dimuat, untuk memastikan bahwa setiap kelas dengan nama yang sama yang berasal dari tempat lain ditimpa oleh kelas tema anak kita.

WordPress memuat stylesheet dalam urutan default:

1. Tema orang tua
2. Tema anak
3. Plugin apa saja

Dalam konstruksi ini:

 add_action( string $hook_name, callable $callback, int $priority = 10, int $accepted_args = 1)

…nilai priority dari tindakan yang ditambahkan menentukan urutan eksekusinya:

• Nilai priority default untuk wp_enqueue_scripts (atau tindakan apa pun) adalah “10.”
• Sebuah fungsi berjalan lebih awal jika kita mengatur ulang priority ke angka yang lebih rendah.
• Sebuah fungsi berjalan kemudian jika kita mengatur ulang priority ke angka yang lebih tinggi.

Untuk memuat lembar gaya tema anak kita terakhir, gunakan wp_enqueue_scripts , tindakan yang biasa digunakan oleh tema dan plugin WordPress. Kami hanya perlu mengubah prioritas wp_enqueue_scripts tindakan tema anak kami ke angka yang lebih tinggi dari default "10," katakan "99":

 add_action( 'wp_enqueue_scripts', 'child_theme_styles', 99 );

Secara umum, kami menggunakan tindakan ketika kami tidak mencari nilai kembalian. Untuk mengembalikan data ke hook panggilan, kita perlu melihat filter.

Filter

Filter memungkinkan kita untuk mengubah data sebelum diproses untuk ditampilkan di browser. Untuk tujuan ini, filter menerima variabel, memodifikasi nilai yang diteruskan, dan mengembalikan data untuk diproses lebih lanjut.

WordPress memeriksa dan menjalankan semua filter terdaftar sebelum menyiapkan konten untuk browser. Dengan cara ini, kita dapat memanipulasi data sebelum mengirimkannya ke browser atau database, sebagaimana mestinya.

Salah satu klien saya mempersonalisasi produk yang dia jual dengan mencetaknya dengan gambar yang disediakan pelanggan. Klien ini menggunakan plugin WooCommerce untuk mengelola e-commerce. WooCommerce tidak mendukung fungsi ini di luar kotak. Oleh karena itu, saya menambahkan dua bit kode ke functions.php klien saya :

1. woocommerce_checkout_cart_item_quantity , tercantum dalam dokumentasi WooCommerce, adalah pengait filter yang memungkinkan pelanggan menambahkan elemen eksternal ke keranjang mereka, sebelum checkout.
2. my_customer_image_data_in_cart adalah filter yang akan kami tulis sendiri dan gunakan untuk memicu woocommerce_checkout_cart_item_quantity setiap kali WooCommerce menyiapkan keranjang untuk ditampilkan.

Dengan menggunakan template berikut, kita dapat menambahkan filter dan memodifikasi perilaku default keranjang:

 add_filter( 'woocommerce_checkout_cart_item_quantity', 'my_customer_image_data_in_cart', 1, 3 ); function my_customer_image_data_in_cart( $html, $cart_item, $cart_item_key ) { if ( !empty( $cart_item['images_data'] ) ) { // Store image // Get image URL // Modify $html } return $html; }

Kami menambahkan filter dengan cara yang sama seperti kami menambahkan tindakan. Filter bekerja mirip dengan tindakan, termasuk bagaimana prioritas diproses. Perbedaan utama antara filter dan tindakan adalah bahwa tindakan tidak akan mengembalikan data ke kait panggilan tetapi filter akan.

Kait Aksi dan Kait Filter yang Disesuaikan

Menulis kait tindakan khusus tidak memperluas Wordpress Core tetapi hanya membuat titik pemicu baru dalam kode kita sendiri.

Membuat Kait Tindakan Kustom

Menambahkan kait khusus di tema atau plugin kami memungkinkan pengembang lain untuk memperluas fungsionalitas tanpa mengubah basis kode kami. Untuk menambahkan kait khusus, gunakan teknik yang sama dengan yang digunakan oleh basis kode WordPress Core itu sendiri: Pada titik pemicu yang diinginkan, kami cukup memanggil do_action dengan nama kait baru kami, secara opsional menambahkan argumen sebanyak yang mungkin berguna bagi panggilan balik kami:

 do_action( 'myorg_hello_action', $arg1, $arg2 );

Kode ini hanya menjalankan fungsi panggilan balik apa pun yang telah dikaitkan ke kait khusus kami. Perhatikan bahwa namespace bersifat global, jadi, seperti yang disarankan sebelumnya, merupakan ide yang baik untuk mengawali nama hook khusus kita dengan bentuk singkat dari nama organisasi kita (dan mungkin juga proyek kita), maka myorg_ di sini.

Sekarang setelah kita mendefinisikan myorg_hello_action , sekarang tersedia bagi pengembang untuk menghubungkan ke cara yang sama persis seperti yang kita bahas sebelumnya untuk kait bawaan: Tentukan fungsi, lalu panggil add_action() .

Kecuali jika kita ingin menggunakan hook baru secara internal—bagaimanapun juga, ini adalah cara yang berguna untuk menyusun kode kita—kita harus mengomunikasikan ketersediaannya secara downstream, kepada anggota lain dari tim kami atau kepada pengguna eksternal plugin kami, melalui dokumentasi yang jelas .

Membuat Kait Filter Kustom

Pola WordPress untuk kait filter khusus sama dengan kait tindakan, kecuali bahwa kita memanggil apply_filters() alih-alih do_action() .

Mari kita lihat contoh yang lebih konkrit kali ini. Misalkan plugin kita membuat menu sidebar, yang biasanya terdiri dari empat item. Kami akan menambahkan kait filter khusus sehingga kami (dan pengembang hilir) dapat memodifikasi daftar item tersebut di tempat lain:

 // Text labels of sidebar menu $sidebar_menu = array( "Page One", "Page Two", "Page Three", "Page Four" ); $sidebar_menu = apply_filters( 'myorg_sidebar_menu', $sidebar_menu );

Itu saja—kait filter khusus kami myorg_sidebar_menu sekarang siap digunakan di plugin yang mungkin dimuat nanti atau di tempat lain di plugin ini. Ini memungkinkan siapa pun yang menulis kode hilir untuk menyesuaikan bilah sisi kami.

Kami atau pengembang lain akan mengikuti pola yang sama saat menggunakan kait WordPress bawaan. Dengan kata lain, kita akan mulai dengan mendefinisikan beberapa fungsi callback yang mengembalikan versi modifikasi dari data yang mereka lewati:

 function lowercase_sidebar_menu( $menu ) { $menu = array_map( 'strtolower', $menu ); return $menu; } function add_donate_item( $menu ) { $menu = array_push( $menu, 'Donate' ); return $menu; }

Seperti contoh sebelumnya, kami sekarang siap untuk menghubungkan fungsi panggilan balik filter kami ke kait khusus kami:

 add_filter( 'myorg_sidebar_menu', 'add_donate_item', 100 ); add_filter( 'myorg_sidebar_menu', 'lowercase_sidebar_menu' );

Dengan itu, kami telah mengaitkan dua contoh fungsi panggilan balik ke kait filter khusus kami. Keduanya sekarang memodifikasi konten asli $the_sidebar_menu . Karena kami memberikan nilai priority yang lebih tinggi ke add_donate_item , itu berjalan nanti, setelah lowercase_sidebar_menu dijalankan.

Pengembang hilir selalu bebas untuk menghubungkan lebih banyak fungsi panggilan balik ke myorg_sidebar_menu . Saat melakukannya, mereka dapat menggunakan parameter priority untuk membuat kait mereka berjalan sebelum, sesudah, atau di antara dua contoh fungsi panggilan balik kami.

Langit adalah Batasnya Dengan Tindakan dan Filter

Dengan tindakan, filter, dan kait, fungsionalitas WordPress dapat tumbuh dengan pesat. Kami dapat mengembangkan fitur khusus untuk situs kami, meninggalkan kontribusi kami sendiri yang dapat diperluas seperti WordPress. Hooks memungkinkan kami mematuhi keamanan dan praktik terbaik saat kami membawa situs WordPress kami ke tingkat berikutnya.

Blog Toptal Engineering mengucapkan terima kasih kepada Fahad Murtaza atas keahliannya, pengujian beta, dan tinjauan teknis artikel ini.