wp bootstrap navwalker
v4.3.0: Version bump to 4.3.0
يخضع هذا الكود الموجود في فرع الريبو الرئيسي لعملية تغيير كبيرة لجعله يتماشى مع المعايير الحديثة ولدمج واختبار تراكم العلاقات العامة التي تركتها لفترة طويلة جدًا. الرجاء استخدام علامة v4.3.0 للإصدار الثابت أثناء حدوث هذه العملية. https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0
فئة WordPress Nav Walker مخصصة لتنفيذ نمط التنقل Bootstrap 4 بشكل كامل في سمة مخصصة باستخدام مدير القائمة المدمج في WordPress.
هذه فئة أدوات مساعدة تهدف إلى تنسيق قائمة سمات WordPress الخاصة بك باستخدام بناء الجملة الصحيح وفئات CSS للاستفادة من التنقل المنسدل في Bootstrap. ولا يتضمن ملفات Bootstrap JS وCSS المطلوبة - سيتعين عليك تضمينها يدويًا.
تتوافق أداة المشي هذه تمامًا مع جميع إرشادات مراجعة السمات الخاصة بإرسال سمة wordpress.org. لا يتطلب الأمر أي تعديل ليكون متوافقًا، ولكن يمكنك اختياريًا استبدال المجال النصي wp-bootstrap-navwalker (الذي يظهر مرتين في الوظيفة fallback ) بالمجال النصي الخاص بموضوعك.
بين الإصدار 3 والإصدار 4 من جهاز المشي، كانت هناك تغييرات كبيرة في قاعدة التعليمات البرمجية. تم تصميم الإصدار 4 من جهاز المشي للعمل مع Bootstrap 4 ولم يتم اختبار توافقه مع الإصدارات السابقة مع Bootstrap 3. ويتم الاحتفاظ بفرع منفصل لـ Bootstrap 3 هنا: https://github.com/wp-bootstrap/wp-bootstrap- navwalker/شجرة/v3-branch
فيما يلي قائمة بأبرز التغييرات:
class- ليناسب اصطلاحات التسمية الخاصة بمعايير ترميز PHP بشكل أفضل.class-wp-bootstrap-navwalker.phpwp-bootstrap-navwalker.phpCSS Classes بدلاً من إدخال Title .sr-only . ضع class-wp-bootstrap-navwalker.php في مجلد سمات WordPress الخاص بك /wp-content/themes/your-theme/
افتح ملف jobs.php الخاص بموضوعات WordPress - /wp-content/themes/your-theme/functions.php - وأضف الكود التالي:
/**
* Register Custom Navigation Walker
*/
function register_navwalker (){
require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}
add_action ( ' after_setup_theme ' , ' register_navwalker ' );إذا واجهت أخطاء في الكود أعلاه، فاستخدم علامة اختيار كهذه لإرجاع أخطاء نظيفة للمساعدة في تشخيص المشكلة.
if ( ! file_exists ( get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ) ) {
// File does not exist... return an error.
return new WP_Error ( ' class-wp-bootstrap-navwalker-missing ' , __ ( ' It appears the class-wp-bootstrap-navwalker.php file may be missing. ' , ' wp-bootstrap-navwalker ' ) );
} else {
// File exists... require it.
require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
} ستحتاج أيضًا إلى الإعلان عن قائمة جديدة في ملف functions.php الخاص بك إذا لم تكن موجودة بالفعل.
register_nav_menus ( array (
' primary ' => __ ( ' Primary Menu ' , ' THEMENAME ' ),
) ); قم بإضافة أو تحديث أي من وظائف wp_nav_menu() في القالب الخاص بك (غالبًا ما توجد في header.php ) لاستخدام Walker الجديد عن طريق إضافة عنصر 'walker' إلى مصفوفة الوسيطات wp_nav_menu.
wp_nav_menu ( array (
' theme_location ' => ' primary ' ,
' depth ' => 2 , // 1 = no dropdowns, 2 = with dropdowns.
' container ' => ' div ' ,
' container_class ' => ' collapse navbar-collapse ' ,
' container_id ' => ' bs-example-navbar-collapse-1 ' ,
' menu_class ' => ' navbar-nav mr-auto ' ,
' fallback_cb ' => ' WP_Bootstrap_Navwalker::fallback ' ,
' walker ' => new WP_Bootstrap_Navwalker (),
) );سيتم الآن تنسيق القائمة الخاصة بك باستخدام البنية والفئات الصحيحة لتنفيذ التنقل عبر القائمة المنسدلة في Bootstrap.
عادةً ما يتم تغليف القائمة بعلامات إضافية، فيما يلي مثال لقائمة fixed-top يمكن طيها للتنقل سريع الاستجابة عند نقطة توقف md.
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<?php
wp_nav_menu ( array (
' theme_location ' => ' primary ' ,
' depth ' => 2 ,
' container ' => ' div ' ,
' container_class ' => ' collapse navbar-collapse ' ,
' container_id ' => ' bs-example-navbar-collapse-1 ' ,
' menu_class ' => ' nav navbar-nav ' ,
' fallback_cb ' => ' WP_Bootstrap_Navwalker::fallback ' ,
' walker ' => new WP_Bootstrap_Navwalker (),
) );
?>
</div>
</nav> لتغيير نمط القائمة، قم بإضافة أسماء فئات التنقل في Bootstrap إلى إعلان menu_class .
راجع الخيارات الموجودة في مستندات Bootstrap لمزيد من المعلومات حول فئات التنقل.
لعرض القائمة، يجب عليك ربط قائمتك بموقع السمة الخاصة بك. يمكنك القيام بذلك عن طريق تحديد موقع السمة الخاصة بك في قائمة مواقع السمات أثناء تحرير القائمة في مدير قائمة WordPress.
لقد كان هناك بعض الاهتمام بجعل هذه المشاية هي المشاية الافتراضية لجميع القوائم. قد يؤدي ذلك إلى بعض المواقف غير المتوقعة ولكن يمكن تحقيق ذلك عن طريق إضافة هذه الوظيفة إلى ملف jobs.php الخاص بك.
function prefix_modify_nav_menu_args ( $ args ) {
return array_merge ( $ args , array (
' walker ' => new WP_Bootstrap_Navwalker (),
) );
}
add_filter ( ' wp_nav_menu_args ' , ' prefix_modify_nav_menu_args ' );قد لا يكون مجرد تحديث جهاز المشي كافيًا لتشغيل القوائم بشكل صحيح، فقد تحتاج إلى إضافة أغلفة أو فئات إضافية، ويمكنك القيام بذلك عبر الوظيفة المذكورة أعلاه أيضًا.
يستخدم Bootstrap 5 سمات البيانات ذات مساحة الاسم. تتضمن جميع سمات data الآن bs باعتبارها infix. تعمل السمات الجديدة تمامًا مثل السمات القديمة. إليك زر تبديل القائمة من المثال أعلاه مع سمات البيانات المعاد تسميتها.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
<span class="navbar-toggler-icon"></span>
</button> يضيف جهاز المشي أيضًا سمة بيانات لتبديل القائمة المنسدلة عبر طريقة start_el() . الصق هذا في ملف jobs.php الخاص بك لتجعل جهاز المشي يستخدم سمة البيانات المثبتة.
add_filter ( ' nav_menu_link_attributes ' , ' prefix_bs5_dropdown_data_attribute ' , 20 , 3 );
/**
* Use namespaced data attribute for Bootstrap's dropdown toggles.
*
* @param array $atts HTML attributes applied to the item's `<a>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @return array
*/
function prefix_bs5_dropdown_data_attribute ( $ atts , $ item , $ args ) {
if ( is_a ( $ args -> walker , ' WP_Bootstrap_Navwalker ' ) ) {
if ( array_key_exists ( ' data-toggle ' , $ atts ) ) {
unset( $ atts [ ' data-toggle ' ] );
$ atts [ ' data-bs-toggle ' ] = ' dropdown ' ;
}
}
return $ atts ;
}في بعض المواقع، يعد إنشاء قائمة كبيرة نادرًا ما تتغير عند كل طلب صفحة بمثابة عبء إضافي قد ترغب في تجنبه. في هذه الحالات، يمكنني أن أقترح عليك إلقاء نظرة على نتائج قائمة التخزين بشكل عابر.
أكبر عيب في تخزين قوائم التنقل مؤقتًا باستخدام هذه الطريقة هو أنه لا يمكن بسهولة تطبيق .current-menu-item أو الفئة .active على العنصر النشط حاليًا حيث يقرر WP ما هو نشط حاليًا عند تحميل الصفحة - وبما أن القائمة مخزنة مؤقتًا فهو يعرف فقط الصفحة النشطة التي تم تخزينها مؤقتًا عليها في الأصل.
يمكنك أن تقرر بنفسك ما إذا كنت تريد تحمل هذه العيوب لصالح إزالة وقت إنشاء القائمة في معظم عمليات تحميل الصفحات. يمكنك متابعة هذه المقالة التي كتبها Dave Clements لترى كيف قمنا بتخزين قوائم التنقل مؤقتًا التي تم إنشاؤها بواسطة هذا المتجول: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/
تأكد من ضبط وسيطة echo على FALSE في استدعاء the wp_nav_menu() عند القيام بذلك حتى يمكن تخزين النتائج بدلاً من تكرارها في الصفحة.
أنظر أيضا:
يتضمن هذا البرنامج النصي القدرة على استخدام تعديلات رابط التنقل في Bootstrap في قوائمك من خلال واجهة مستخدم قائمة WordPress. يتم دعم الروابط المعطلة ورؤوس القائمة المنسدلة وفواصل القائمة المنسدلة. بالإضافة إلى ذلك، تم دمج دعم الأيقونات في Glyphicons وFont Awesome (ملاحظة: ستحتاج إلى تضمين أوراق أنماط الأيقونات أو أصولها بشكل منفصل).
لإضافة رمز إلى الرابط الخاص بك، ما عليك سوى إدخال أسماء فئات Glyphicons أو Font Awesome في حقل فئات CSS الخاصة بالروابط في واجهة مستخدم القائمة وسيقوم فصل Walker بالباقي. IE glyphicons glyphicons-bullhorn أو fa fa-arrow-left أو fas fa-arrow-left .
لإظهار عنصر ما مع الأيقونة، قم فقط بتطبيق فئة قارئ الشاشة bootstrap sr-only على العنصر بجانب أي أسماء فئات أيقونات. سيؤدي هذا بعد ذلك إلى إخفاء النص الذي سيظهر كنص الرابط فقط.
لتعيين رابط معطل، ما عليك سوى إضافة disabled إلى حقل فئات CSS في واجهة مستخدم القائمة وسيقوم فصل ووكر بالباقي. ملاحظة: بالإضافة إلى إضافة فئة .disabled، سيؤدي هذا إلى تغيير الرابط href إلى # أيضًا بحيث لا يكون رابطًا قابلاً للمتابعة.
يمكن إضافة الرؤوس والفواصل والعناصر النصية فقط ضمن القوائم المنسدلة عن طريق إضافة رابط مخصص وإضافة إما dropdown-header أو dropdown-divider أو dropdown-item-text في إدخال فئات CSS . ملاحظة: سيؤدي هذا إلى إزالة href الموجود على العنصر وتغييره إلى <span> للعناوين أو <div> للفواصل.
وفقًا لوثائق wp_nav_menu() يتعين على المرء توفير مثيل لفئة Walker المخصصة من أجل تطبيق Walker المخصص على القائمة. نظرًا لأن المثيل غير قابل للتسلسل بتنسيق JSON، فسيؤدي ذلك إلى عدم ظهور اختصار تحرير القائمة في معاينة أداة التخصيص. لإصلاح ذلك قم بما يلي:
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
- 'walker' => new WP_Bootstrap_Navwalker(),
+ 'walker' => 'WP_Bootstrap_Navwalker',
) );functions.php الخاص بك function slug_provide_walker_instance ( $ args ) {
if ( isset ( $ args [ ' walker ' ] ) && is_string ( $ args [ ' walker ' ] ) && class_exists ( $ args [ ' walker ' ] ) ) {
$ args [ ' walker ' ] = new $ args [ ' walker ' ];
}
return $ args ;
}
add_filter ( ' wp_nav_menu_args ' , ' slug_provide_walker_instance ' , 1001 );يرجى الاطلاع على سجل التغيير.
