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

() translation by (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
BEM تعني Block-Element-Modifier وهي طريقة لتنظيم الأسلوب والعلامات. إذا رأيت اسم فئة مثل "header__form— email" ، فهذا يعني أن BEM فيها ...

Josh Medeski
28 فبراير 2014

HTML & CSS

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

"block" هو كيان مستقل ذو مغزى من تلقاء نفسه.

.menu { ... }

عنصر هو جزء من كتلة ويرتبط ارتباطًا ماديًا بمجموعته.

.menu__items { ... }
.menu__item { ... }
.menu__anchor { ... }

يقوم المبدل بتغيير مظهر أو عنصر الكتلة أو العنصر.

.menu--primary { ... }
.menu__anchor--button { ... }

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

<nav class="menu menu--primary">
  <ul class="menu__items menu__items--primary">
     <li class="menu__item"><a class="menu__anchor">Link text</a></li>
     <li class="menu__item"><a class="menu__anchor">Link text</a></li>
     <li class="menu__item"><a class="menu__anchor">Link text</a></li>
     <li class="menu__item"><a class="menu__anchor menu__anchor--button">Link text</a></li>
  </ul>
</nav>

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

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

.menu {
  ...
  
  &__items {
     ...
  }
  
  &__item {
     ...
  }
  
  &__anchor {
     ...
  }
  
  &__anchor--button {
     ...
  }
}

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

.menu {
  ...
}

menu__items {
  …
}

menu__item {
  …
}

menu__anchor {
  …
}

menu__anchor--button {
  …
}

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

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

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

<nav class="menu menu--primary">

<?php
  wp_nav_menu( array(
      'theme_location' => 'primary',
      'container'          => '',
      'menu_class'      => 'menu__items menu__items--primary',
  ) );
?>

</nav>

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

nav_menu_css_class لتطبيق الفئات لعنصر القائمة <li>.
nav_menu_link_attributes لتطبيق السمات لقائمة عنصر <a>.

استخدام nav_menu_css_class Filter

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

function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) {

  // Reset all default classes and start adding custom classes to array.
  $_classes = [ 'menu__item' ];

  // Return custom classes.
  return $_classes;

}

add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 );

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

function bemit_nav_menu_css_class( $classes, $item, $args, $depth ) {

  // Reset all default classes and start adding custom classes to array.
  $_classes = [ 'menu__item' ];

  // Get theme location, fallback for `default`.
  $theme_location = $args->theme_location ? $args->theme_location : 'default';

   // Add theme location class.
  $_classes[] = 'menu__item--' . $theme_location;

  // Return custom classes.
  return $_classes;

}

add_filter( 'nav_menu_css_class', 'bemit_nav_menu_css_class', 10, 4 );

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

استخدام nav_menu_link_attributes filter

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

function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) {

  // Start adding custom classes.
  $atts['class'] = 'menu__anchor';

  return $atts;
}

add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 );

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

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

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

function bemit_nav_menu_link_attributes( $atts, $item, $args, $depth ) {

  // Start adding custom classes.
  $atts['class'] = 'menu__anchor';

  // Add `menu__anchor--button` when there is `button` class in `<li>` element.
  if ( in_array( 'button', $item->classes, true ) ) {

       $atts['class'] .= ' menu__anchor--button';

   }

return $atts;

}

add_filter( 'nav_menu_link_attributes', 'bemit_nav_menu_link_attributes', 10, 4 );

يمكننا الآن استهداف مستوى واحد من 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 () فلاتر جيدة في الوقت الحالي. لكن هذا موضوع تعليمي آخر بالكامل.

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