Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. BEM
Webdesign

نصيحة سريعة: تسمية BEM و مرشحات "WordPress" للتنقل

by
Difficulty:IntermediateLength:ShortLanguages:

Arabic (العربية/عربي) translation by Amr Salah (you can also view the original English article)

يعد الحفاظ على CSS أمرًا صعبًا ، خاصة في المشروعات الكبيرة التي تعمل مع فريق. يمكن أن تساعد اصطلاحات التسمية في جعل CSS أكثر قابلية للقراءة وسهولة في الصيانة. في هذه النصيحة السريعة ، سنلقي نظرة على كيفية استخدام منهجية تسمية BEM (Block Element Modifier) ​​في WordPress.

أنظمة إدارة المحتوى مثل الفئات الافتراضية لمخرجات "WordPress" في ترميز الواجهة الأمامية. في WordPress هناك الكثير من الفلاتر لتعديل هذه الفئات outputted.

إذا كنت ترغب في الغوص مباشرة في التعليمات البرمجية ، وهنا مثال على موضوع لي. يمكن العثور على الفلاتر في ملف "inc/functions-filters.php file".

ما هو BEM؟

"BEM" يعني Block Element Modifier (كتلة العنصر المعدل).

"BEM عبارة عن منهجية تساعدك على إنشاء مكونات قابلة لإعادة الاستخدام ومشاركة الشفرة في تطوير الواجهة الأمامية."
  • مقدمة لمنهجية BEM

سأستخدم ترميز التنقل كمثال:

  • "block" هو كيان مستقل ذو مغزى من تلقاء نفسه.
    • .menu { ... }
  • عنصر هو جزء من كتلة ويرتبط ارتباطًا ماديًا بمجموعته.
    • .menu__items { ... }
    • .menu__item { ... }
    • .menu__anchor { ... }
  • يقوم المبدل بتغيير مظهر أو عنصر الكتلة أو العنصر.
    • .menu--primary { ... }
    • .menu__anchor--button { ... }

قد يبدو ترميز التنقل الكامل كما يلي:

اصطلاحات التسمية مثل "BEM" تبقي SASS و CSS مسطحًا مع خصوصية منخفضة (وهو أمر لطيف دائمًا!).

في SASS ، يمكنك تصميم مثالنا على هذا النحو:

ستبدو CSS المجمعة كما يلي:

ولكن كيف يمكننا تغيير فئات التنقل المستخدمة في WordPress؟

استخدام فلاتر WordPress لتغيير فئات التنقل

باستخدام وظيفة wp_nav_menu () المضمنة في WordPress ، يمكنك تحديد فئات لعناصر <nav> و <ul>. فمثلا:

لاحظ البراميتيرmenu_class لإضافة فئات مخصصة إلى عنصر <ul>. يحتوي WordPress أيضًا على فلاتر يدوية لعناصر <li> و <a>:

استخدام  nav_menu_css_class Filter

في هذا المثال ، تتم إعادة تعيين جميع الفئات الافتراضية من عنصر القائمة <li> وإضافة فئات مخصصة خاصة بنا. دعنا نضيف فصولنا النموذجية المسماة menu__item عن طريق إدراج هذا الفلتر في وظائفنا بphp:

هل لاحظت وجود 4 براميترز؟ دعنا نضيف menu__item -- primary class modifier  ، حيث primary هو موقع السمة. لهذا يمكننا استخدام براميتر $ args لإضافة موقع سمة. الآن يبدو فلترنا هكذا:

يمكن العثور على أمثلة التعليمات البرمجية الكاملة في سمة المثال الخاصة بي في ملف inc / functions-filters.php.

استخدام nav_menu_link_attributes filter

دعنا نضيف مثالنا menu__anchor إلى كل عنصر <a> في القائمة.

إضافة فئات عن طريق منشئ القائمة

نضيف أحيانًا فئات مخصصة إلى عنصر القائمة <li> من واجهة المستخدم لأداة إنشاء القوائم.

Adding button class for menu item

للحفاظ على CSS ثابتًا ، دعنا نضيف تصنيف menu__anchor--button إلى عنصر <a>  حيث توجد كلاس ال button:

يمكننا الآن استهداف مستوى واحد من CSS مباشرةً باستخدام .menu__anchor - button {...}. في العرض التوضيحي الخاص بك سترى عنصر القائمة واحد على غرار زر ، استهدفت دون الحاجة إلى الغوص في "rabbit’s warren" .

Navigation with call to action menu item

الصفحات الفرعية للتنقل

إذا كنت تستخدم wp_list_pages () لجلب الصفحات الفرعية ، فهناك عوامل تصفية مماثلة متاحة:

في العرض التوضيحي هناك دالة bemit_sub_pages_navigation () تسرد الصفحات الفرعية في الشريط الجانبي. تحقق من النتيجة النهائية من موقع العرض.

الاستنتاج!

كما رأيت، فقد لا تحتاج إلى أداة Walker مخصصة للتنقل إذا كنت تجري تغييرات أصغر. هناك الكثير من الفلاتر حولها.

مع ذلك ، ليس من السهل تعديل كل العلامات. على سبيل المثال ، لا توفر وظائف ترقيم الصفحات مثل the_posts_pagination () فلاتر جيدة في الوقت الحالي. لكن هذا موضوع تعليمي آخر بالكامل.

آمل أن تجد هذه النصيحة السريعة حول فلاتر التنقل مفيدة!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.