كيفية إضافة عناصر مخصصة إلى قوائم ووردبريس الخاص بك

قوائم ووردبريس مذهلة. تجعل واجهة السحب والإسقاط الأمر سهلاً حقًا لمطوري قوالب ووردبريس والمستخدمين على حدٍ سواء. لقد أوضحنا لك في الماضي كيفية إضافة قائمة مخصصة في ووردبريس إلى جانب كيفية تصميم قائمة مخصصة. الشيء الوحيد الذي يقتصر على الواجهة المرئية للقوائم هو أنه يمكنك فقط إضافة روابط (صفحات أو فئة أو روابط مخصصة).

يمكنك الاطلاع على كيفية إضافة أيقونات الوسائط الاجتماعية إلى قوائم ووردبريس

ماذا لو كنت تريد إضافة عنصر مخصص إلى قوائم ووردبريس الخاصة بك؟

قوائم ووردبريس

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

ملاحظة: هذا المقال مخصص لمطوري قوالب ووردبريس ، لذلك من المتوقع أن تعرف html / css الأساسي وفهمًا جيدًا لكيفية عمل قوالب ووردبريس .

من الواضح أنك بحاجة إلى تمكين قائمة مخصصة في القوالب الخاصة بك قبل أن تتمكن من المضي قدمًا.

. هيا لنبدأ مع الأساسيات نحتاج إلى إضافة عامل التصفية الخاص بنا إلى wp_nav_menu_items hook. قد يبدو هذا المثال كالتالي:

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if (is_single() && $args->theme_location == 'primary') {
        $items .= '<li>Show whatever</li>';
    }
    return $items;
}

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

الآن بعد أن رأيت مثالًا أساسيًا ، دعنا نعرض لك بعض الأمثلة المحددة لكيفية عمل ذلك.

إضافة روابط تسجيل الدخول / الخروج إلى قائمة ووردبريس محددة

إذا كنت ترغب في منح المستخدمين القدرة على تسجيل الدخول / الخروج ، فسيكون هناك مكان واحد يمكنك إضافة الروابط فيه في قائمتك المخصصة. المقتطف أدناه سيعرض روابط تسجيل الدخول / الخروج لمستخدميك بشكل مناسب في موقع القائمة: أساسي. يمكنك تغيير موقع القائمة إذا كنت تريد.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

إضافة شريط بحث إلى قائمة محددة

هل تريد إضافة شريط بحث إلى قائمة محددة؟ حسنا لا مزيد من البحث. يمكنك القيام بذلك عن طريق لصق المقتطف التالي:

add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'primary' )
        return $items."<li class='menu-header-search'><form action='http://example.com/' id='searchform' method='get'><input type='text' name='s' id='s' placeholder='Search'></form></li>";
 
    return $items;
}

إضافة تاريخ اليوم إلى قائمة ووردبريس محددة

سيضيف المقتطف أدناه تاريخ اليوم إلى قائمة ووردبريس الخاصة بك. .

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
         
        $todaysdate = date('l jS F Y');
        $items .=  '<li>' . $todaysdate .  '</li>';
 
    }
    return $items;
}

نأمل أن تسمح هذه المقالة للمطورين بتوسيع وظائف قوالبهم.