التعرف على صف ووردبريس ووكر

إذا لم تكن معتادًا على فئة Walker ، فاستعد لتندهش من مدى فائدة ذلك لعملك. تم تنفيذ فئة WordPress Walker في WordPress 2.1 لتزويد المطورين بوسائل لاجتياز هياكل البيانات الشبيهة بالشجرة بغرض عرض HTML. في هذه المقالة سوف ندرس كيفية عمل معلمة walker وكيفية تخصيص المخرجات في القوائم والفئات والتعليقات.

هيا بنا نذهب!

نظرة عامة على فئة ووكر

في WordPress ، كثيرًا ما نرى كائنات لها بنية هرمية مثل قوائم التنقل أو قوائم الفئات أو قوائم التعليقات

كما تعلم بالفعل ، في حالة بنية البيانات الشجرية ، فإن بعض العناصر هي من الوالدين والبعض الآخر أطفالهم. "نشر الفئة الفرعية 1" هو عنصر ثانوي في "فئة النشر 1" ، والرد على تعليق هو تعليق فرعي على التعليق نفسه ، و "الخدمة 1" عبارة عن عنصر قائمة فرعي لعنصر "الخدمات".

يتم تسمية Walker على هذا النحو لأنه ببساطة "يمشي" عبر كل كائن أو مجموعة ترابطية وينفذ وظيفة في كل عقدة. ما نود تحقيقه من خلال ذلك هو القدرة على سرد روابط "المستوى الأعلى" ، مع عناصر "الأطفال" الخاصة بهم بطرق مختلفة وفقًا لمتطلباتنا المحددة.

بمعنى آخر ، يمنحك WordPress بنية <ul> <li> قياسية ويمكنك تخصيص وسيطاتها ، ولكن من خلال توسيع Walker يمكنك تخصيص البنية نفسها عن طريق تعديل محتوى HTML الخاص بها.

الملف الأساسي المتعلق بفئة Walker هو wp-includes/class-wp-walker.php وهو يحكم جميع أنواع البيانات الشبيهة بالشجرة التي ذكرناها سابقًا.

نظرًا لأنها فئة PHP مجردة ، من أجل إنشاء أي HTML ، يجب توسيعها بواسطة المطور الذي سيحدد إصدارًا مخصصًا من خصائصه وطرقه. لذلك دعونا ندرس الفصول الفرعية في ملف class-wp-walker.php واحدًا تلو الآخر.

فصول الأطفال

يُعد $tree_type متغيرًا اختياريًا يأتي في نوع أو مصفوفة من الأنواع ويحدد ما يتعامل معه الفصل.

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

يعد $db_fields متغيرًا مطلوبًا ويحدد حقول قاعدة البيانات التي يجب استخدامها. هذه الخاصية عبارة عن مصفوفة تحتوي على مفتاحين: 'الأصل' و 'id' وقيمهما هي أسماء خصائص الكائن التي تحتوي على معرف الأصل ومعرف العنصر ، على التوالي.

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

تعتبر الخاصية $max_pages اختيارية أيضًا ويتمثل دورها في تحديد الحد الأقصى لعدد الصفحات التي يتم عرضها بواسطة المشاة المقسمة إلى صفحات.

 public $max_pages = 1;

إن $has_children هو في الواقع لا يحتاج إلى شرح وله قيمة صحيحة أو خاطئة اعتمادًا على ما إذا كان العنصر الحالي له أطفال.

 public $has_children;

يتم تنفيذ طريقة start_lvl على جذر كائن جديد يشبه الشجرة ويأخذ الوسيطات $ output و $ deep و $ args.

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

تلحق الوسيطة $output محتوى إضافيًا ، بينما تحدد قيمة $depth عمق العنصر و $args عبارة عن مصفوفة من الوسائط الإضافية.

تغلق طريقة end_lvl أي علامة تم فتحها مسبقًا بواسطة طريقة start_lvl.

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

يتم استخدام طريقة start_el (Start Element) لعرض علامة HTML الافتتاحية للعنصر الحالي. في حالة وجود قائمة ، على سبيل المثال ، عادة ما تكون علامة <li>.

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

تُستدعى الدالة end_el بعد أن يمرر Walker عنصرًا بكل ما لديه من عناصر فرعية ويعيد علامة إغلاق.

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

يعرض display_element العرض في الواقع عناصر كائن الشجرة. يستدعي start_el و start_lvl و display_element و end_lvl و end_el بهذا الترتيب. الآن دعونا نلقي نظرة على حججه.

• العنصر $ : العنصر الحالي
• children_elements $ : جميع العناصر التابعة لكائن الشجرة
• max_depth دولار : الحد الأقصى للعمق الذي يمكننا استكشافه
• العمق بالدولار : المستوى الذي نحن عليه حاليًا
• args $ : وسيطات اختيارية إضافية
• $ output : ناتج HTML الحالي.

سنعرض الآن مثالًا واحدًا لكل نوع بيانات باستخدام تثبيت WordPress مع تنشيط موضوع Twenty Twenty.

تخصيص هيكل القائمة

يتم تضمين الوظيفة wp_nav_menu () التي يستخدمها WordPress لعرض القوائم في ملف wp-includes/nav-menu-template.php . في هذا الملف ، يستدعي WordPress أيضًا فئة Walker_Nav_Menu حول السطر 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 ); }

يتم تعريف فئة Walker_Nav_Menu داخل ملف wp-includes/class-walker-nav-menu.php وهو في الأساس جميع محتويات الملف.

لعرض إخراج القائمة ، يستخدم كود WordPress خصائص وأساليب فئة Walker_Nav_Menu الموضحة داخل هذا الملف.

دعنا على سبيل المثال نصلح مشكلة معروفة يواجهها العديد من المطورين وهي تغيير عنصر عناصر القائمة الرئيسية باستخدام رابط مخصص فارغ ("#") لمنع الزائرين من النقر فوقها.

لتمكيننا من مقارنة نتائجنا ، سننشئ أولاً نسخة من القائمة الأساسية عن طريق إضافة الكود أدناه في header.php مباشرةً بعد بداية عنصر <header> .

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

ما فعلناه هنا في الواقع هو إعادة إنشاء القائمة الأساسية ووراثة وظائفها المنسدلة و CSS عن طريق إضافة primary-menu reset-list-style للفئات إلى القائمة الجديدة أيضًا.

الآن في ملف functions.php الخاص بنا ، سننشئ صنفًا يمتد إلى فئة Walker_Nav_Menu. نظرًا لأننا نريد تغيير نوع العنصر ، فسوف نتجاوز طريقة 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>'; } } } }

لذلك قمنا بلف كل عنصر بشكل طبيعي بعلامة <li> وبعد ذلك ، باستخدام عبارة if ، قمنا بإلحاق مسافة عندما يكون الرابط "#" وعلامة <a> للباقي.

لتطبيق هذا على قائمتنا ، نعود إلى رمز القائمة الذي أضفناه مسبقًا وحدد معلمة walker:

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

الآن يجب أن تبدو النتيجة كما يلي:

إذا قمت الآن بالتمرير فوق "الخدمات" في عنصر القائمة ، فلن يظهر مؤشر اليد ولا يمكن النقر فوق عنصر القائمة هذا. ومع ذلك ، ستظل القائمة الفرعية المنسدلة معروضة بشكل صحيح.

تخصيص الفئات

انتقل أولاً إلى منطقة الإدارة وأنشئ بعض فئات المنشورات والفئات الفرعية من أجل الحصول على شجرة فئات للعرض التوضيحي.

بعد ذلك سننشئ قائمة فئات بإضافة هذا الرمز في مكان ما في header.php . يمكنك وضعه بعد بداية عنصر الرأس كما في السابق.

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

الوظيفة عبارة عن وظيفة مدمجة في WordPress تقوم بإنشاء إخراج HTML لشجرة الفئات. بشكل افتراضي ، يعرض فقط الفئات التي تحتوي على منشورات وهذا هو سبب استخدامنا لخيار hide_empty لعرض الفئات الفارغة أيضًا ومشاهدة التسلسل الهرمي بالكامل لأغراض هذا المثال.

كما سبق ، يمكننا إنشاء فئة مخصصة في functions.php لتوسيع فئة Walker_Category الافتراضية الموضحة في ملف wp-includes/class-walker-category.php وتطبيق التغييرات التي أجريناها. على سبيل المثال ، سنضيف بعض الرموز قبل أسماء الفئات بإضافة هذا الرمز:

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

لكي يعمل هذا ، ستحتاج بالطبع إلى إعداد صور مناسبة وحفظها في المجلد المحدد. ستحتاج هذه الصور إلى اتباع تنسيق اسم محدد والذي سيكون في هذا المثال "post-category-1" و "post-subcategory-1" و "post-category-3.jpg" إلخ.

تخصيص التعليقات

يعد تحديث القائمة والفئات أكثر الأسباب شيوعًا التي تجعلك تقوم بتخصيص فئة Walker ، ولكن في بعض الأحيان يتعين عليك تنفيذ نفس الأسلوب للتعليقات أيضًا. على سبيل المثال ، إذا كنت تريد تغيير المعلومات الوصفية بجوار صورة Gravatar في قسم التعليقات ، فيمكننا القيام بذلك بسهولة عن طريق توسيع فئة Walker_Comment الموجودة في ملف wp-include / class-walker-comment.php.

في ملف jobs.php أضف هذا الرمز

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

كما يمكنك أن تلاحظ من خلال مقارنة التعليمات البرمجية حول مع محتويات Walker_Comment الأصلية ، فإن التغيير الوحيد الضروري كان في طريقة html5_comment التي تُخرج تعليقًا بشكل أساسي بتنسيق HTML5.

بعد ذلك ، يتعين علينا عرض قائمة التعليقات باستخدام وظيفة wp_list_comments المضمنة مع الوسائط الصحيحة لعرض التعليقات التي تشبه شجرة HTML.

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

أدخلنا الكود في نفس سطر header.php الذي فعلناه من قبل واستخدمنا معرف المنشور الذي يحتوي على التعليقات. بالطبع ، يمكنك ببساطة استبدال الرمز المتعلق بالتعليق في القالب الخاص بك بدلاً من ذلك وتخطي خيار "الصفحة" بحيث ينطبق على جميع قسم التعليقات على مقالاتك.

إذا قمت بتحديث الواجهة الأمامية لموقع الويب الخاص بك الآن ، فستلاحظ إدخالات المعلومات الإضافية (السيرة الذاتية للمؤلف وعنوان URL للمؤلف) التي أضفناها في الرمز المخصص أعلاه.

استنتاج

نأمل أن يكون ما سبق قد أعطاك نظرة ثاقبة حول استخدام WordPress Walker Class. في جميع الأمثلة قمنا بتطبيق التغييرات مباشرة على ملفات السمات الأساسية. في حين أن هذا جيد لأغراض العرض التوضيحي ، فمن الواضح أنك تريد التأكد من أنك تقوم فقط بتطبيق التعديلات على سمة فرعية في الممارسة العملية لضمان عدم الكتابة فوق هذه التحديثات عند تحديث WordPress أو القالب المستخدم.