कस्टम मेनू में विशिष्ट लिंक के लिए कक्षा जोड़ें

Question

मुझे पता है कि आप कस्टम मेनू विकल्पों में एक वर्ग जोड़ सकते हैं, लेकिन यह ए से पहले एल को जोड़ता है। मैं वर्ग को इस विशिष्ट ए पर सीधे लागू करना चाहता हूं, फिर पूरे एलआई।

इसलिए आउटपुट के बजाय

<li id="menu-item-51" class="NEWCLASS menu-item menu-item-type-custom menu-item-51"><a href="#">Link</a> </li>

मैं चाहता हूं कि यह भी ऐसा हो।

<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-51"><a href="#" class="NEWCLASS">Link</a></li>

कोई विचार?

Comments

बस स्पष्ट होने के लिए, आपको कक्षा जोड़ने से क्या मतलब है? क्या आप वास्तव में व्यवस्थापक पैनल में क्लिक करते हैं?

— वर्डप्रेस

किस बात का? बस से अपने चयनकर्ता बदलने .classके लिए .class a?

— wyrfel

हाँ, मुझे यह भी नहीं मिलता है, बस अपने सीएसएस को युक्त <li>तत्व के आधार पर लिंक को लक्षित करने के लिए सेट करें । यदि आपके पास उस विशेष आइटम के नीचे एक सबमेनू है तो यह कोई समस्या नहीं है, आप सीएसएस में (मैं यदि आवश्यक हो तो उदाहरण दे सकता हूं) से निपट सकता हूं।

— t31os

+1 आपकी टिप्पणी के लिए @wyrfel ... @ Picard102 सीएसएस विशिष्टता पर एक नज़र डालें। यह आपको यह भी समझाएगा कि कैसे सीएसएस के माध्यम से HTML तत्वों को ठीक से लक्षित किया जाए।

— कासर

Answer 1

आप nav_menu_css_classफ़िल्टर का उपयोग कर सकते हैं

add_filter('nav_menu_css_class' , 'my_nav_special_class' , 10 , 2);
function my_nav_special_class($classes, $item){
    if(your condition){ //example: you can check value of $item to decide something...
        $classes[] = 'my_class';
    }
    return $classes;
}

इस $ आइटम का उपयोग करके आप अपनी इच्छानुसार कोई भी शर्त रख सकते हैं। और यह वर्ग को विशिष्ट ली में जोड़ेगा और आप एक टैग को उसके आधार पर स्टाइल कर सकते हैं:

.my_class a{
   background-color: #FFFFFF;
}

Comments

मैं एक विशिष्ट पृष्ठ टेम्पलेट के साथ आइटम के लिए एक वर्ग जोड़ने की कोशिश कर रहा हूं, लेकिन मुझे get_page_template_slugकाम नहीं मिल सकता है । कोई विचार?

— बिल

Answer 2

मुझे एक कस्टम वॉकर के उपयोग के माध्यम से इस साइट पर एक समाधान मिला ।

दो चरण: डिफ़ॉल्ट wp_nav_menu कोड को एक संपादित के साथ बदलें, और फिर विषय के functions.php में कोड जोड़ें।

पहले, डिफ़ॉल्ट wp_nav_code को निम्नलिखित के साथ बदलें (कोड उपरोक्त साइट से कॉपी किया गया है):

    wp_nav_menu( array(
     'menu' => 'Main Menu',
     'container' => false,
     'menu_class' => 'nav',
     'echo' => true,
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'walker' => new description_walker())
     );

अगला, functions.php में निम्न कोड जोड़ें। ऐसा करके आप वास्तव में मेनू लिंक में एक वर्ग जोड़ सकते हैं:

class description_walker extends Walker_Nav_Menu
{

  function start_el(&$output, $item, $depth, $args)
  {
       global $wp_query;
       $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

       $class_names = $value = '';

       $classes = empty( $item->classes ) ? array() : (array) $item->classes;

       $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
       $class_names = ' class="'. esc_attr( $class_names ) . '"';

       $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

       $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
       $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
       $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
       $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

       $prepend = '<strong>';
       $append = '</strong>';
       $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

       if($depth != 0)
       {
                 $description = $append = $prepend = "";
       }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
        $item_output .= $description.$args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

                    if ($item->menu_order == 1) {
            $classes[] = 'first';
        }

        }
}

कोड के अंत में कई पंक्तियाँ हैं जो $ item_output से शुरू होती हैं। विशेष रूप से, आप इस टुकड़े को देखना चाहते हैं:

$item_output .= '<a'. $attributes .'>';

क्योंकि यह लाइन लिंक html की शुरुआत के लिए आउटपुट को निर्धारित करती है। यदि आप इसे कुछ इस तरह से बदलते हैं:

$item_output .= '<a'. $attributes . 'class="abc"' .'>';

तब मेनू में आपके सभी लिंक में क्लास = "एबीसी" होगा, उन्हें जोड़ा जाएगा।

---

उस ने कहा, यह प्रत्येक लिंक के लिए एक कस्टम वर्ग की अनुमति नहीं देता (या कम से कम मुझे नहीं पता कि इसे कैसे कोड किया जाए)। यह मेरे लिए एक मुद्दा है।

यह पूछने वालों के लिए कि आप ऐसा क्यों करना चाहेंगे? मैं अपने मेन्यू लिंक को खुले लाइटबॉक्स (कलरबॉक्स, अधिक विशिष्ट होना चाहता हूं) चाहता हूं, और उन्हें ऐसा करने के लिए लिंक पर कक्षाओं की आवश्यकता होती है। उदाहरण के लिए:

<a class="lightbox1" href="#">Photo</a>

क्या संभवतः वर्गों को गतिशील रूप से उत्पन्न करने का एक तरीका है, जैसे कि पहले लिंक के लिए "लाइटबॉक्स 1", दूसरे लिंक के लिए "लाइटबॉक्स 2", और इसी तरह?

Comments

@ रैनमैन आपके जवाब से मुझे थोड़ी मदद मिली और आपने एक अच्छा सवाल खड़ा किया। मुझे यकीन है कि आपने एक बेहतर समाधान ढूंढ लिया है, लेकिन उन लोगों के लिए, जो मैंने यहां पाए गए समाधान के एक संशोधित संस्करण का उपयोग नहीं किया है: wpbeginner.com/wp-themes/…

— NW Tech

Answer 3

हल किया!!!! मैं एक फेनबॉक्स में इनलाइन HTML के मेनू आइटम लिंक बनाने के लिए यह पता लगाने की जरूरत है। अपनी थीम के फंक्शन में निम्न कोड पेस्ट करें।

function add_menuclass($ulclass) {
    return preg_replace('/<a rel="fancybox"/', '<a class="fancybox"', $ulclass, -1);
}
add_filter('wp_nav_menu','add_menuclass');

तब ... WP डैशबोर्ड के मेनू टैब में, एक कस्टम लिंक बनाएं, इसे अपने मेनू में जोड़ें। शीर्ष पर जहां स्क्रीन विकल्प कहते हैं, सुनिश्चित करें कि आपके पास "लिंक संबंध (XFN)" है। यह आपके कस्टम मेनू आइटम में उस फ़ील्ड को जोड़ देगा। फ़ील्ड में "फ़ैंटबॉक्स" (बिना उद्धरण के) टाइप करें और अपना मेनू सहेजें।

फ़ंक्शन नेविगेशन मेनू पर कॉल की तलाश करता है, फिर आपको कहीं भी एक rel="fancybox"जगह मिलती है और इसे ए के साथ बदल देता है rel="fancybox" class="fancybox"। आप अपने मेनू आइटम में जो भी वर्ग जोड़ने की आवश्यकता है, उसके साथ आप फैंसीबॉक्स को बदल सकते हैं। किया और किया!

Comments

महान पद!! बस एक बात ध्यान दें। यदि कोई शीर्षक जोड़ता है तो कोड काम नहीं करेगा। मैं एक ही मुद्दे में भाग गया ... इसलिए मैंने दोनों प्रतिस्थापन मूल्यों की शुरुआत से ए टैग हटा दिया। मुझे कुछ इस तरह से छोड़कर ... प्रीग_रेप्ले ('/ rel = "फैंसीबॉक्स" /', 'क्लास = "फैंसीबॉक्स"', $ ulclass, -1); कोड महान काम करता है!

Answer 4

वर्तमान उत्तर यह नहीं समझते हैं कि प्रश्न यह है कि aतत्व में वर्ग को कैसे जोड़ा जाए और तत्व को नहीं li, या बहुत जटिल है। यहां nav_menu_link_attributesफ़िल्टर का उपयोग करके एक सरल दृष्टिकोण है जो आपको एक विशिष्ट मेनू को लक्षित करने की अनुमति देता है जो कि स्लग पर आधारित है और उस मेनू में एक विशिष्ट पेज लिंक है जो कि आईडी पर आधारित है। अपनी स्थिति बनाने के लिए और तरीके प्राप्त करने के लिए आप $ args और $ आइटम को var_dump कर सकते हैं।

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

function custom_nav_menu_link_attributes($atts, $item, $args, $depth){
    if ($args->menu->slug == 'your-menu-slug' && $item->ID == 1){

        $class = "button";

        // Make sure not to overwrite any existing classes
        $atts['class'] = (!empty($atts['class'])) ? $atts['class'].' '.$class : $class; 
    }

    return $atts;
}

Comments

बहुत बहुत धन्यवाद, मैं ifइसे if ($args->theme_location == 'footer-menu' )अपने स्थान के अनुसार मेनू को देखने के लिए बदल देता हूं , और सभी महान काम करते हैं

— efirvida

Answer 5

मुझे पता है कि यह एक लंबे समय से पहले उत्तर दिया गया था, लेकिन सामान्य जानकारी के रूप में, मैंने पाया कि कस्टम मेनू के लिए वर्डप्रेस व्यवस्थापक पृष्ठ के "स्क्रीन" विकल्प का उपयोग करके व्यक्तिगत रूप से प्रत्येक मेनू आइटम में एक वर्ग कैसे जोड़ा जाए।

Answer 6

मुझे हाल ही में कुछ ऐसा ही करना पड़ा और यह पता चला। मुझे निवो लाइटबॉक्स प्लगइन के लिए एक समान वर्ग जोड़ना था। इसलिए मैंने "एनआईओ" को रिले विशेषता ("लिंक रिलेशनशिप (एक्सएफएन)") में जोड़ा और फिर nav_menu_link_attributesफिल्टर पर निम्नलिखित ।

function add_nivo_menuclass($atts, $item, $args) {
    if( is_array($atts) && !empty($atts['rel']) && $atts['rel'] = 'nivo' ) {
        $atts['class'] = 'lightbox';
        $atts['data-lightbox-type'] = 'inline';
    }

    return $atts;

    }
add_filter('nav_menu_link_attributes','add_nivo_menuclass', 0,3);

Answer 7

Appearance -> Menusपृष्ठ के ऊपरी क्षेत्र में , का विस्तार करने के लिए क्लिक करें Screen Options, के चेकबॉक्स की जांच करें CSS Classes। अब जब आप प्रत्येक जोड़े गए मेनू आइटम का विस्तार करते हैं, तो आपको एक CSS Classes (optional)फ़ील्ड दिखाई देगा ।