Mengenal Kelas Walker WordPress
Diterbitkan: 2020-11-27Jika Anda tidak terbiasa dengan Kelas Walker, bersiaplah untuk kagum dengan betapa bermanfaatnya itu untuk pekerjaan Anda. Kelas Walker WordPress diimplementasikan di WordPress 2.1 untuk menyediakan pengembang dengan sarana untuk melintasi struktur data seperti pohon untuk tujuan rendering HTML. Pada artikel ini kita akan mempelajari cara kerja parameter walker dan cara menyesuaikan output di menu, kategori, dan komentar.
Mari kita pergi!
Ikhtisar Kelas Walker
Di WordPress, kita sering melihat objek yang memiliki struktur hierarki seperti menu navigasi, daftar kategori, atau daftar komentar
Seperti yang mungkin sudah Anda ketahui, dalam kasus struktur data pohon, beberapa elemen adalah orang tua dan yang lainnya adalah anak-anak mereka. “Posting Subkategori 1” adalah turunan dari “Posting Kategori 1”, balasan ke komentar adalah komentar anak dari komentar itu sendiri, dan “Layanan 1” adalah item menu turunan dari item “Layanan”.
Walker dinamai seperti itu hanya "berjalan" melalui setiap objek atau array asosiatif dan menjalankan fungsi di setiap node. Apa yang ingin kami capai dengan ini adalah kemampuan untuk membuat daftar tautan 'tingkat atas', dengan item 'anak' mereka dengan cara yang berbeda sesuai dengan persyaratan khusus kami.
Dengan kata lain, WordPress memberi Anda struktur <ul> <li> standar dan Anda dapat menyesuaikan argumennya, tetapi, dengan memperluas Walker, Anda dapat menyesuaikan struktur itu sendiri dengan memodifikasi konten HTML-nya.
File inti yang terkait dengan Kelas Walker adalah wp-includes/class-wp-walker.php dan mengatur semua jenis data seperti pohon yang kami daftarkan sebelumnya.
Karena ini adalah Kelas PHP abstrak, untuk menghasilkan HTML apa pun, itu harus diperluas oleh pengembang yang akan menentukan versi properti dan metode yang disesuaikan. Jadi mari kita pelajari kelas anak di file class-wp-walker.php satu per satu.
Kelas Anak
$tree_type adalah variabel opsional yang datang dalam tipe atau larik tipe dan mendefinisikan apa yang ditangani kelas.
public $tree_type = array( 'post_type', 'taxonomy', 'custom' ); $db_fields adalah variabel yang diperlukan dan mendefinisikan bidang database mana yang akan digunakan. Properti ini adalah larik dengan dua kunci: 'induk' dan 'id' yang nilainya adalah nama properti objek yang masing-masing menyimpan id induk dan id item.
public $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id', ); Properti $max_pages juga opsional dan perannya adalah untuk menentukan jumlah maksimum halaman yang dilalui oleh paged walker.
public $max_pages = 1; $has_children sebenarnya cukup jelas dan memiliki nilai benar atau salah tergantung pada apakah elemen saat ini memiliki anak.
public $has_children; Metode start_lvl dijalankan pada akar objek seperti pohon baru dan mengambil argumen $output, $depth dan $args.
public function start_lvl( &$output, $depth = 0, $args = array() ) {} Argumen $output menambahkan konten tambahan, $depth menentukan kedalaman item dan $args adalah array argumen tambahan.
Metode end_lvl menutup tag apa pun yang sebelumnya dibuka oleh metode start_lvl.
public function end_lvl( &$output, $depth = 0, $args = array() ) {} Metode start_el (Elemen Awal) digunakan untuk menampilkan tag HTML pembuka untuk elemen saat ini. Dalam hal menu, misalnya, biasanya tag <li>.
public function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {} Fungsi end_el dipanggil setelah Walker melewati elemen dengan semua turunannya dan mengembalikan tag penutup.
public function end_el( &$output, $object, $depth = 0, $args = array() ) {} display_element sebenarnya menampilkan elemen dari objek pohon. Ini memanggil start_el , start_lvl , display_element , end_lvl , end_el dalam urutan ini. Sekarang mari kita lihat argumennya.
- $elemen : elemen saat ini
- $children_elements : semua elemen anak dari objek pohon
- $max_depth : batas kedalaman maksimum yang bisa kita jelajahi
- $depth : Level kita saat ini
- $args : argumen opsional tambahan
- $output : Output HTML saat ini.
Kami sekarang akan mendemonstrasikan satu contoh untuk setiap tipe data dengan menggunakan instalasi WordPress dengan tema Twenty Twenty diaktifkan.
Menyesuaikan Struktur Menu
Fungsi wp_nav_menu() yang digunakan WordPress untuk menampilkan menu disertakan dalam wp-includes/nav-menu-template.php . Dalam file ini, WordPress juga memanggil Kelas Walker_Nav_Menu di sekitar baris 605.
function walk_nav_menu_tree( $items, $depth, $r ) { $walker = ( empty( $r->walker ) ) ? new Walker_Nav_Menu : $r->walker; return $walker->walk( $items, $depth, $r ); } Kelas Walker_Nav_Menu didefinisikan di dalam wp-includes/class-walker-nav-menu.php dan pada dasarnya adalah semua konten file.
Untuk menampilkan output menu, kode WordPress menggunakan properti dan metode Kelas Walker_Nav_Menu yang dijelaskan di dalam file ini.
Misalnya, mari kita perbaiki masalah umum yang dihadapi banyak pengembang yaitu mengubah elemen untuk item menu induk dengan tautan khusus kosong ('#') untuk mencegah pengunjung mengekliknya.
Untuk memungkinkan kami membandingkan hasil kami, pertama-tama kami akan membuat tiruan dari menu utama dengan hanya menambahkan kode di bawah ini di header.php tepat setelah elemen <header> dimulai.
<header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'menu_class' => 'primary-menu reset-list-style' ) ); ?> Apa yang sebenarnya kami lakukan di sini adalah untuk membuat ulang menu utama dan mewarisi fungsionalitas drop-down dan CSS dengan menambahkan kelas primary-menu reset-list-style ke menu baru juga.
Sekarang di file functions.php kami, kami akan membuat kelas yang memperluas kelas Walker_Nav_Menu. Karena kita ingin mengubah tipe elemen, kita akan mengganti metode start_el .
if ( !class_exists('My_Custom_Nav_Walker') ) { class My_Custom_Nav_Walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth=0, $args=[], $id=0) { $output .= "<li class='" . implode(" ", $item->classes) . "'>"; if ($item->url && $item->url != '#') { $output .= '<a href="' . $item->url . '">'; } else { $output .= '<span>'; } $output .= $item->title; if ($item->url && $item->url != '#') { $output .= '</a>'; } else { $output .= '</span>'; } } } }Jadi kami membungkus setiap elemen secara normal dengan tag <li> dan kemudian, dengan penggunaan pernyataan if menambahkan rentang ketika tautan adalah “#” dan tag <a> untuk sisanya.
Untuk menerapkan ini ke menu kami, kami kembali ke kode menu yang kami tambahkan sebelumnya dan tentukan parameter walker:
wp_nav_menu( array( 'walker' => new My_Custom_Nav_Walker, 'menu_class' => 'primary-menu reset-list-style' ) );Sekarang hasilnya akan terlihat seperti ini:
Jika Anda sekarang mengarahkan kursor ke 'Layanan' di item menu, kursor tangan tidak akan muncul dan item menu ini juga tidak dapat diklik. Namun, submenu tarik-turun akan tetap ditampilkan dengan benar.
Menyesuaikan Kategori
Pertama masuk ke area admin dan buat beberapa kategori dan subkategori posting untuk memiliki pohon kategori untuk demonstrasi.
Setelah itu kita akan membuat daftar kategori dengan menambahkan kode ini di suatu tempat di header.php . Anda dapat meletakkannya setelah elemen header dimulai seperti sebelumnya.
<header class="header-footer-group" role="banner"> <?php wp_list_categories( array('hide_empty' => FALSE) ); ?> Fungsinya adalah fungsi WordPress bawaan yang menghasilkan keluaran HTML dari pohon kategori. Secara default ini hanya menampilkan kategori yang berisi posting, itulah sebabnya kami menggunakan opsi hide_empty untuk menampilkan kategori kosong juga dan melihat seluruh hierarki untuk tujuan contoh ini.
Seperti sebelumnya kita dapat membuat kelas kustom di functions.php untuk memperluas Kelas Walker_Category default yang dijelaskan dalam wp-includes/class-walker-category.php dan menerapkan perubahan kita. Misalnya, kami akan menambahkan beberapa ikon sebelum nama kategori dengan menambahkan kode ini:
if ( !class_exists('My_Category_tree_Walker') ) { class My_Category_tree_Walker extends Walker_Category { function start_el(&$output, $item, $depth=0, $args=array(),$current_object_id = 0) { $output.= '<li><a href="'.home_url('category/'.$item->slug).'"> <img src="http://path/to/mages/'.($item->slug).'.jpg"> '.esc_attr($item->name); } } }Agar ini berfungsi, Anda tentu saja perlu menyiapkan gambar yang sesuai dan menyimpannya di folder yang ditentukan. Gambar-gambar ini harus mengikuti format nama tertentu yang dalam contoh ini adalah “post-category-1”, “post-subcategory-1”, “post-category-3.jpg”, dll.
Menyesuaikan Komentar
Memperbarui daftar menu dan kategori sejauh ini merupakan alasan paling umum mengapa Anda dapat menyesuaikan Kelas Walker, tetapi terkadang Anda juga harus menerapkan teknik yang sama untuk komentar. Jika, misalnya, Anda ingin mengubah info meta di sebelah gambar Gravatar di bagian komentar, kita dapat dengan mudah melakukannya dengan memperluas Kelas Walker_Comment yang ditemukan di file wp-includes/class-walker-comment.php.
Dalam file functions.php tambahkan kode ini
if ( !class_exists('My_Comment_Walker') ) { class My_Comment_Walker extends Walker_Comment { protected function html5_comment( $comment, $depth, $args ) { $tag = ( 'div' === $args['style'] ) ? 'div' : 'li'; ?> <<?php echo $tag; ?> <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>> <article class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <?php if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?> <?php printf( __( '%s <span class="says">says:</span>' ), sprintf( '<span class="fn">%s</span>', get_comment_author_link( $comment ) ) ); ?> </div><!-- .comment-author --> <div class="comment-metadata"> <?php $user_id=$comment->user_id; ?> <p class="commenter-bio"><?php the_author_meta('description',$user_id); ?></p> <p class="commenter-url"><a href="<?php the_author_meta('user_url',$user_id); ?>" target="_blank"><?php the_author_meta('user_url',$user_id); ?></a></p> </div><!-- .comment-metadata --> <?php if ( '0' == $comment->comment_approved ) : ?> <p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></p> <?php endif; ?> </footer><!-- .comment-meta --> <div class="comment-content"> <?php comment_text(); ?> </div><!-- .comment-content --> <?php comment_reply_link( array_merge( $args, array( 'add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth'], 'before' => '<div class="reply">', 'after' => '</div>' ) ) ); ?> </article><!-- .comment-body --> <?php } } } Seperti yang dapat Anda perhatikan dengan membandingkan kode about dengan konten Walker_Comment asli, satu-satunya perubahan yang diperlukan adalah pada metode html5_comment yang pada dasarnya menampilkan komentar dalam format HTML5.
Setelah itu kita harus menampilkan daftar komentar dengan menggunakan fungsi wp_list_comments bawaan dengan argumen yang tepat untuk menampilkan HTML objek seperti pohon komentar.
wp_list_comments( array( 'page' => 143, 'walker' => new My_Comment_Walker ));Kami memasukkan kode di baris yang sama dari header.php yang kami lakukan sebelumnya dan menggunakan ID posting yang berisi komentar. Tentu saja, Anda cukup mengganti kode terkait komentar dari template Anda dan melewatkan opsi 'halaman' sehingga berlaku untuk semua bagian komentar artikel Anda.
Jika Anda menyegarkan bagian depan situs web Anda sekarang, Anda akan melihat entri info tambahan (bio penulis dan URL penulis) yang kami tambahkan dalam kode khusus di atas.
Kesimpulan
Semoga penjelasan di atas memberi Anda beberapa wawasan tentang penggunaan Kelas Walker WordPress. Dalam semua contoh, kami menerapkan perubahan langsung ke file tema inti. Meskipun tidak apa-apa untuk tujuan demonstrasi, Anda jelas ingin memastikan bahwa Anda hanya menerapkan pengeditan pada tema anak dalam praktik untuk memastikan bahwa pembaruan ini tidak ditimpa saat WordPress atau tema yang digunakan diperbarui.