WordPress Walker Sınıfını Tanımak

Yayınlanan: 2020-11-27

Walker Class'a aşina değilseniz, işiniz için ne kadar yararlı olabileceğine şaşırmaya hazır olun. WordPress Walker Sınıfı, geliştiricilere HTML'yi oluşturmak amacıyla ağaç benzeri veri yapılarını geçmek için bir araç sağlamak için WordPress 2.1'de uygulandı. Bu yazıda walker parametresinin nasıl çalıştığını ve menüler, kategoriler ve yorumlardaki çıktıların nasıl özelleştirileceğini inceleyeceğiz.

Haydi gidelim!

Walker Sınıfına Genel Bakış

WordPress'te gezinme menüleri, kategori listeleri veya yorum listeleri gibi hiyerarşik bir yapıya sahip nesneleri sıklıkla görüyoruz.

Bildiğiniz gibi, bir ağaç-veri yapısı durumunda, bazı öğeler ebeveynlerdir ve diğerleri onların çocuklarıdır. "Alt Kategori 1", "Yazı Kategorisi 1"in alt öğesidir, bir yoruma verilen yanıt, yorumun kendisine yapılan bir alt yorumdur ve "Hizmet 1", "Hizmetler" öğesinin alt menü öğesidir.

Walker, her nesne veya ilişkisel dizide basitçe "yürüdüğü" ve her düğümde bir işlev yürüttüğü için adlandırılır. Bununla elde etmek istediğimiz şey, 'üst düzey' bağlantıları, 'alt' öğeleriyle birlikte, özel gereksinimlerimize göre farklı şekillerde listeleme yeteneğidir.

Başka bir deyişle, WordPress size standart bir <ul> <li> yapısı verir ve onun argümanlarını özelleştirebilirsiniz, ancak Walker'ı genişleterek HTML içeriğini değiştirerek yapının kendisini özelleştirebilirsiniz.

Walker Class ile ilgili çekirdek dosya wp-includes/class-wp-walker.php ve daha önce listelediğimiz ağaç benzeri tüm veri türlerini yönetir.

Soyut bir PHP Sınıfı olduğundan, herhangi bir HTML oluşturmak için, özelliklerinin ve yöntemlerinin özelleştirilmiş bir versiyonunu tanımlayacak olan geliştirici tarafından genişletilmesi gerekir. O halde class-wp-walker.php dosyasındaki alt sınıfları tek tek inceleyelim.

Çocuk Sınıfları

$tree_type , bir tür veya tür dizisinde gelen ve sınıfın neyi işleyeceğini tanımlayan isteğe bağlı bir değişkendir.

 public $tree_type = array( 'post_type', 'taxonomy', 'custom' );

$db_fields gerekli bir değişkendir ve hangi veritabanı alanlarının kullanılacağını tanımlar. Bu özellik, iki anahtarı olan bir dizidir: 'parent' ve 'id', değerleri sırasıyla ana id ve item id'yi tutan nesne özelliklerinin adlarıdır.

 public $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id', );

$max_pages özelliği de isteğe bağlıdır ve rolü, disk belleği olan yürüteç tarafından yürünen maksimum sayfa sayısını belirtmektir.

 public $max_pages = 1;

$has_children aslında kendi kendini açıklayıcıdır ve mevcut öğenin çocukları olup olmadığına bağlı olarak doğru veya yanlış bir değere sahiptir.

 public $has_children;

start_lvl yöntemi, ağaç benzeri yeni bir nesnenin kökünde yürütülür ve $çıktı, $derinlik ve $args bağımsız değişkenlerini alır.

 public function start_lvl( &$output, $depth = 0, $args = array() ) {}

$output bağımsız değişkeni ek içerik ekler, $depth belirtir ve $args bir dizi ek bağımsız değişkendir.

end_lvl yöntemi, start_lvl yöntemi tarafından daha önce açılmış olan etiketi kapatır.

 public function end_lvl( &$output, $depth = 0, $args = array() ) {}

start_el (Başlangıç ​​Öğesi) yöntemi, geçerli öğe için açılış HTML etiketini görüntülemek için kullanılır. Örneğin bir menü olması durumunda, genellikle bir <li> etiketidir.

 public function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 ) {}

end_el işlevi, Walker tüm alt öğeleriyle birlikte bir öğeyi geçtikten ve bir kapanış etiketi döndürdükten sonra çağrılır.

 public function end_el( &$output, $object, $depth = 0, $args = array() ) {}

display_element aslında ağaç nesnesinin öğelerini görüntüler. start_el , start_lvl , display_element , end_lvl , end_el fonksiyonlarını bu sırayla çağırır. Şimdi argümanlarına bir göz atalım.

  • $element : geçerli öğe
  • $children_elements : ağaç nesnesinin tüm alt öğeleri
  • $max_depth : keşfedebileceğimiz maksimum derinlik sınırı
  • $derinlik : Şu anda bulunduğumuz seviye
  • $args : ek isteğe bağlı argümanlar
  • $çıktı : Geçerli HTML çıktısı.

Şimdi, Twenty Twenty teması etkinleştirilmiş bir WordPress kurulumu kullanarak her veri türü için bir örnek göstereceğiz.

Menü Yapısını Özelleştirme

WordPress'in menüleri görüntülemek için kullandığı wp_nav_menu() işlevi, wp-includes/nav-menu-template.php dosyasında bulunur. Bu dosyada, WordPress ayrıca 605 satırı civarında Walker_Nav_Menu Sınıfını da çağırır.

 function walk_nav_menu_tree( $items, $depth, $r ) { $walker = ( empty( $r->walker ) ) ? new Walker_Nav_Menu : $r->walker; return $walker->walk( $items, $depth, $r ); }

Walker_Nav_Menu sınıfı, wp-includes/class-walker-nav-menu.php dosyası içinde tanımlanır ve temelde dosyanın tüm içeriğidir.

Menünün çıktısını görüntülemek için WordPress kodu, bu dosyanın içinde açıklanan Walker_Nav_Menu Sınıfının özelliklerini ve yöntemlerini kullanır.

Örneğin, birçok geliştiricinin karşılaştığı, ziyaretçilerin tıklamasını önlemek için boş bir özel bağlantı ('#') ile ana menü öğelerinin öğesini değiştirmek olan iyi bilinen bir sorunu çözelim.

Sonuçlarımızı karşılaştırmamızı sağlamak için önce <header> öğesinin başlangıcından hemen sonra header.php aşağıdaki kodu ekleyerek birincil menünün bir klonunu oluşturacağız.

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'menu_class' => 'primary-menu reset-list-style' ) ); ?>

Burada aslında yaptığımız şey, birincil menüyü yeniden oluşturmak ve sınıflarını primary-menu reset-list-style yeni menüye ekleyerek aşağı açılır işlevselliğini ve CSS'yi devralmaktı.

Şimdi functions.php dosyamızda Walker_Nav_Menu sınıfını genişleten bir sınıf oluşturacağız. Elemanın türünü değiştirmek istediğimiz için start_el yöntemini geçersiz kılacağız.

 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>'; } } } }

Bu nedenle, her öğeyi normal olarak bir <li> etiketi ile sardık ve ardından, if ifadesinin kullanımıyla, bir bağlantı “#” olduğunda bir yayılma ve geri kalanı için bir <a> etiketi ekledik.

Bunu menümüze uygulamak için daha önce eklediğimiz menü koduna dönüyoruz ve walker parametresini belirliyoruz:

 wp_nav_menu( array( 'walker' => new My_Custom_Nav_Walker, 'menu_class' => 'primary-menu reset-list-style' ) );

Şimdi sonuç şöyle görünmelidir:

Şimdi menü öğesindeki 'Hizmetler'in üzerine gelirseniz, hiçbir el imleci görünmez ve bu menü öğesi de tıklanabilir değildir. Bununla birlikte, açılır alt menü yine de doğru şekilde gösterilecektir.

Kategorileri Özelleştirme

Gösteri için bir kategori ağacına sahip olmak için önce yönetici alanına gidin ve bazı kategoriler ve alt kategoriler oluşturun.

Bundan sonra bu kodu header.php içinde bir yere ekleyerek bir kategori listesi oluşturacağız. Daha önce olduğu gibi başlık öğesinin başlangıcından sonra koyabilirsiniz.

 <header class="header-footer-group" role="banner"> <?php wp_list_categories( array('hide_empty' => FALSE) ); ?>

İşlev, bir kategori ağacının HTML çıktısını oluşturan yerleşik bir WordPress işlevidir. Varsayılan olarak yalnızca gönderileri içeren kategorileri gösterir, bu nedenle boş kategorileri de görüntülemek ve bu örneğin amaçları doğrultusunda tüm hiyerarşiyi görmek için hide_empty seçeneğini kullandık.

Daha önce olduğu gibi, wp-includes/class-walker-category.php dosyasında açıklanan varsayılan Walker_Category Sınıfını genişletmek ve değişikliklerimizi uygulamak için functions.php içinde özel bir sınıf oluşturabiliriz. Örneğin, bu kodu ekleyerek kategori adlarından önce bazı simgeler ekleyeceğiz:

 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); } } }

Bunun çalışması için elbette uygun görüntüleri hazırlamanız ve bunları tanımlanan klasöre kaydetmeniz gerekir. Bu resimlerin, bu örnekte "kategori-1 sonrası", "alt kategori-1 sonrası", "kategori-3.jpg sonrası" vb. olacak belirli bir ad biçimini izlemesi gerekir.

Yorumları Özelleştirme

Menü ve kategori listesini güncellemek, bir Walker Class'ı özelleştirmenizin açık ara en yaygın nedenleridir, ancak bazen aynı tekniği yorumlar için de uygulamanız gerekir. Örneğin, yorumlar bölümünde Gravatar görüntüsünün yanındaki meta bilgiyi değiştirmek isterseniz, wp-includes/class-walker-comment.php dosyasında bulunan Walker_Comment Class'ı genişleterek bunu kolayca yapabiliriz.

Functions.php dosyasına bu kodu ekleyin

 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 } } }

Hakkında kodunu orijinal Walker_Comment içeriğiyle karşılaştırarak fark edebileceğiniz gibi, gerekli olan tek değişiklik, temelde HTML5 biçiminde bir yorum veren html5_comment yöntemindeydi.

Bundan sonra, yorum ağacı benzeri nesne HTML'sini görüntülemek için yerleşik wp_list_comments işlevini doğru argümanlarla kullanarak yorum listesini görüntülememiz gerekir.

 wp_list_comments( array( 'page' => 143, 'walker' => new My_Comment_Walker ));

Kodu daha önce yaptığımız header.php satırına ekledik ve yorumları içeren gönderinin kimliğini kullandık. Tabii ki, bunun yerine şablonunuzun yorumla ilgili kodunu değiştirebilir ve 'sayfa' seçeneğini atlayarak tüm makalelerinizin yorum bölümüne uygulanabilmesini sağlayabilirsiniz.

Web sitenizin ön ucunu şimdi yenilerseniz, yukarıdaki özel koda eklediğimiz ekstra bilgi girişlerini (yazar biyografisi ve yazar URL'si) fark edeceksiniz.

Çözüm

Umarım yukarıdakiler size WordPress Walker Class'ı kullanma konusunda biraz fikir vermiştir. Tüm örneklerde değişiklikleri doğrudan ana tema dosyalarına uyguladık. Gösteri amacıyla bu iyi olsa da, WordPress veya kullanılan tema güncellendiğinde bu güncellemelerin üzerine yazılmamasını sağlamak için pratikte yalnızca bir alt temaya düzenlemeler uyguladığınızdan emin olmak isteyeceksiniz.