it-swarm.asia

wp_nav_menu () ، كيفية تغيير فئة <li>؟

أنا بناء قائمة لموقع الويب الخاص بي. ساكنة تبدو مثل هذا:

<nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

لقد تمكنت من فهم كيفية تخصيص العلامة <ul> ، للتخلص من العلامة <div> التلقائية. ولكن الآن ، أريد تخصيص علامة <li> لتكون قادرًا على تعيين اسم class مختلفًا للتحكم في سلوك معين من خلال CSS. عندما أستخدم wp_nav_menu() ، يكون الإخراج كما يلي:

    <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

أريد التخلص من id في علامات <li> وتغيير class لعكس اسم الصفحة التي أريد الارتباط بها. في الأساس ، أريد إخراج نفس الشيء مثل مقتطف الشفرة الأول في هذا المنشور.

السبب في قيامي بذلك ، هو أنني أستخدم صورًا مخصصة يتم التحكم فيها بواسطة CSS الخاص بي باستخدام نص عادي.

هل هذا ممكن؟ ما هي الاستراتيجية التي يجب استخدامها للتغلب على هذه المشكلة؟

15
Christian

استخدم مشي مخصص ، أزل أي شيء لا تحتاجه وأضف فصولك الدراسية. إليك أداة مشاة استخدمها للحصول على قائمة بها علامات نظيفة: T5_Nav_Menu_Walker_Simple .

يمكنك أيضًا تصفية 'nav_menu_css_class' أو 'wp_nav_menu_items'. لكن من السهل فهم فصل المشي والتحكم فيه في رأيي.

12
fuxia

انتقل إلى المظهر> قوائم - حدد القائمة التي تريدها - اذهب إلى "خيارات الشاشة" في الجزء العلوي الأيمن ، وحدد "فصول المغلق" - أضف فصلاً إلى كل عنصر قائمة ..

10
Q Studio

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

$item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

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

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">
0
user2080750

تعيين فئة <li> إلى nav-link ، حيث أن bootstrap 4.3 يحتاجها:

function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

يمكنك أيضًا إلغاء تعيين سمة id في هذا الصفيف.

0
cweiske