मेनू आइटम विवरण? Wp_nav_menu के लिए कस्टम वॉकर ()


104

सामान्य वर्डप्रेस मेनू जैसा दिखता है:

घर | ब्लॉग | हमारे बारे में | संपर्क करें

लेकिन मैंने इन लिंक के तहत विवरण के साथ कई पृष्ठ देखे हैं:

होम पेज | हमारे ब्लॉग | हमारे बारे में | संपर्क करें
.... हमसे मिलें ... | और पढ़ें | बुनियादी जानकारी | संपर्क करें प्रपत्र

इसे कैसे प्राप्त किया जाए?

(मैं चाहता हूं कि यह मेरे सभी विषयों के लिए मुख्य कार्य हो, इसलिए कोई प्लगइन्स न करें, मैं बस यह जानना चाहता हूं कि यह कैसे किया जाता है)

जवाबों:


115

आपको नौसेना मेनू के लिए एक कस्टम वॉकर की आवश्यकता है।

मूल रूप से, आप एक पैरामीटर जोड़ने 'walker'के लिए wp_nav_menu()विकल्प और एक बेहतर वर्ग का एक उदाहरण फोन:

wp_nav_menu(
    array (
        'menu'            => 'main-menu',
        'container'       => FALSE,
        'container_id'    => FALSE,
        'menu_class'      => '',
        'menu_id'         => FALSE,
        'depth'           => 1,
        'walker'          => new Description_Walker
    )
);

वर्ग Description_Walkerविस्तार करता है Walker_Nav_Menuऔर start_el( &$output, $item, $depth, $args )देखने के लिए फ़ंक्शन को बदलता है $item->description

एक मूल उदाहरण:

/**
 * Create HTML list of nav menu items.
 * Replacement for the native Walker, using the description.
 *
 * @see    https://wordpress.stackexchange.com/q/14037/
 * @author fuxia
 */
class Description_Walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array|object $args    Additional strings. Actually always an 
                                     instance of stdClass. But this is WordPress.
     * @return void
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            ' '
        ,   apply_filters(
                'nav_menu_css_class'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) . '"';

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

        $attributes  = '';

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

        // insert description for top level elements only
        // you may change this
        $description = ( ! empty ( $item->description ) and 0 == $depth )
            ? '<small class="nav_desc">' . esc_attr( $item->description ) . '</small>' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $description
            . $args->after;

        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}

या, जैसा कि @nevvermind ने वैकल्पिक रूप से टिप्पणी की थी , आप माता-पिता के कार्य की सभी कार्यप्रणालियों को विरासत में प्राप्त कर सकते हैं start_elऔर केवल इस विवरण को संलग्न कर सकते हैं $output:

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) 
{
    parent::start_el( $output, $item, $depth, $args );
    $output .= sprintf( 
        '<i>%s</i>', 
        esc_html( $item->description ) 
    );
}

नमूना उत्पादन:

यहाँ छवि विवरण दर्ज करें

अब wp-admin/nav-menus.phpइस फ़ील्ड को संपादित करने की क्षमता प्राप्त करने के लिए वर्णन फ़ील्ड को सक्षम करें। यदि आप WP नहीं करते हैं, तो अपनी पूरी पोस्ट सामग्री को उसमें मिटा देते हैं।

यहाँ छवि विवरण दर्ज करें

आगे की पढाई:

और बस।


11
यदि आप विरासत के लिए! = पूरी विधि को फिर से लिखते हैं, तो बस एक ही नाम रखें , इसे आज़माएँ:public function start_el(&$output, $item, $depth, $args) { parent::start_el($output, $item, $depth, $args); $output .= sprintf('<i>%s</i>', esc_html($item->description)); }
nevvermind

2
@nevvermind आपको कम से कम यह देखना चाहिए कि विवरण में कुछ सामग्री है या नहीं। ;) मेरे नमूना कोड में विवरण की स्थिति समाधान का वर्णन करने का सबसे सरल तरीका है। आप लंगर में वर्णन प्राप्त करने की आवश्यकता है, तो आप है पूरे समारोह को फिर से बनाने के लिए।
FUXIA

1
हां, आपको पूरी विधि लिखनी होगी, इसके बारे में कोई संदेह नहीं है, लेकिन जिन लोगों को (कहना ...) की आवश्यकता है, वे इसे जोड़ सकते हैं, यह उन्हें बहुत सारे सिर-दर्द से बचा सकता है। और यह सब WP की गलती है। Arrrgh!
नेवरमाइंड

एक अच्छा और मैंने इसे थोड़ा सा संशोधित करके इस उत्तर में उपयोग किया है , हो सकता है कि अगर मैं कुछ चूक गया तो आप इसे बेहतर बना सकते हैं, धन्यवाद।
अल्फा

वास्तव में मुझे जो चाहिए था वह wp_nav_menu था , लेकिन मुझे अपने विशेष उपयोग के मामले में काम करने के लिए ' कंटेनर_क्लास ' पैरामीटर को बदलने की जरूरत थी, जहां मैंने कुछ शर्त पर मुख्य मेनू को एक दूसरे के लिए स्वैप किया, लेकिन सीएसएस के अनुरूप होने के लिए कक्षाओं की आवश्यकता थी।
D. दान

33

के बाद से वर्डप्रेस 3.0 , तो आप नहीं है अब और एक कस्टम वॉकर की जरूरत है!

नहीं है walker_nav_menu_start_elफिल्टर, देख https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

उदाहरण:

function add_description_to_menu($item_output, $item, $depth, $args) {
    if (strlen($item->description) > 0 ) {
        // append description after link
        $item_output .= sprintf('<span class="description">%s</span>', esc_html($item->description));

        // insert description as last item *in* link ($input_output ends with "</a>{$args->after}")
        //$item_output = substr($item_output, 0, -strlen("</a>{$args->after}")) . sprintf('<span class="description">%s</span >', esc_html($item->description)) . "</a>{$args->after}";
    }

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_description_to_menu', 10, 4);

1
अच्छा! मैं @ वॉचो द्वारा नेवी वॉकर समाधान का उपयोग कर रहा था, लेकिन यह बहुत क्लीनर और बनाए रखने में आसान है। यह स्वीकृत उत्तर, बहुत बेहतर अभ्यास होना चाहिए।
नीजोह

8

यह अन्य सुझावों से बेहतर या बुरा नहीं है; यह सिर्फ अलग है। यह छोटा है और मीठा भी है।

वर्णन फ़ील्ड का उपयोग करने के बजाय, जैसा कि @toscho बताता है, आप अपने इच्छित पाठ के साथ प्रत्येक मेनू आइटम पर "शीर्षक" फ़ील्ड भर सकते हैं और फिर इस CSS का उपयोग कर सकते हैं:

.menu-item a:after { content: attr(title); }

इसे जोड़ने के लिए jQuery का उपयोग करना भी आसान होगा, लेकिन पाठ सजावटी काफी है कि सीएसएस उचित लगता है।


2

आप <span>मेनू में नेविगेशन लेबल के बाद एक तत्व भी लिख सकते हैं और इसकी displayसेटिंग बदलने के लिए निम्नलिखित सीएसएस नियम का उपयोग कर सकते हैं (यह inlineडिफ़ॉल्ट रूप से है):

span {display:block}

2
वैसे इसका एक सरल और आसान उपाय है लेकिन spanअगर आप इसे किसी भी तरह से ब्लॉक करते हैं तो इसका उपयोग क्यों करें ? xhtml / html4 लिंक के अंदर ब्लॉक एलिमेंट्स को अनुमति नहीं देता है, फिर भी html5 करता है, इसलिए बस उपयोग करें div, और किसी भी सीएसएस की आवश्यकता नहीं है!
जेम्स मिच
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.