মেনু আইটেমের বিবরণ? 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
        );
    }
}

অথবা, বিকল্প হিসাবে @ নেভারভারমাইন্ড মন্তব্য করেছে , আপনি পিতামাতার কার্যকারিতাটির সমস্ত কার্যকারিতা উত্তরাধিকার সূত্রে গ্রহণ করতে পারেন 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এই ক্ষেত্রটি সম্পাদনা করার ক্ষমতা পেতে এখন বিবরণ ক্ষেত্রটি সক্ষম করুন । আপনি যদি ডাব্লুপি না করেন তবে এটিতে আপনার সম্পূর্ণ পোস্টের সামগ্রী ট্র্যাশ করে।

এখানে চিত্র বর্ণনা লিখুন

আরও পড়া:

এবং এটাই.


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)); }
নেভভারমাইন্ড

2
@ নিউভারমাইন্ড বর্ণনায় কিছু বিষয়বস্তু রয়েছে কিনা তা আপনার কমপক্ষে পরীক্ষা করা উচিত। ;) আমার স্যাম্পল কোডে বর্ণনার অবস্থানটি সমাধানটি চিত্রিত করার সবচেয়ে সহজ উপায়। আপনি নোঙ্গর মধ্যে বিবরণ পেতে প্রয়োজন হয়, আপনি আছে পুরো ফাংশন পুনরায় গড়ে তুলতে।
ফুসিয়া

1
হ্যাঁ, আপনাকে পুরো পদ্ধতিটি লিখতে হবে, এটি সম্পর্কে কোনও সন্দেহ নেই, তবে যে লোকদের (বলতে ...) এটি সংযোজন করা দরকার তাদের পক্ষে এটি সম্ভবত প্রচুর মাথা ব্যথা বাঁচাতে পারে। এবং এটি সমস্ত WP এর দোষ। Arrrgh!
নেভভারমাইন্ড

খুব সুন্দর এবং আমি এই উত্তরে এটি কিছুটা সংশোধন করে ব্যবহার করেছি , ধন্যবাদ আমি যদি কিছু মিস করি তবে আপনি এটি আরও ভাল করতে পারেন, ধন্যবাদ।
আলফা

আমার আসলে যা দরকার ছিল তা ছিল wp_nav_menu , তবে আমার বিশেষ ব্যবহারের ক্ষেত্রে কাজ করার জন্য আমার ' ধারক_ক্লাস ' প্যারামিটারটি পরিবর্তন করা দরকার ছিল, যেখানে আমি কিছু শর্তে অন্য একটির জন্য মূল মেনু বদলেছিলাম , তবে ক্লাসগুলি সিএসএসের জন্য সামঞ্জস্যপূর্ণ হওয়া দরকার।
ডি ডান

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
নিস! আমি @ টাস্কো দ্বারা নেভ ওয়াকার সমাধানটি ব্যবহার করছিলাম তবে এটি অনেকটা পরিস্কার এবং রক্ষণাবেক্ষণ করা সহজ his এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, আরও ভাল অনুশীলন।
নীঝোহ

8

এটি অন্যান্য পরামর্শের চেয়ে ভাল বা খারাপ নয়; এটা ঠিক অন্যরকম। এটি সংক্ষিপ্ত এবং মিষ্টিও।

@ টসচো প্রস্তাব হিসাবে বর্ণনা ক্ষেত্রটি ব্যবহার না করে আপনি প্রতিটি মেনু আইটেমটিতে আপনার নিজের পাঠ্যটি দিয়ে "শিরোনাম" ক্ষেত্রটি পূরণ করতে পারেন এবং তারপরে এই সিএসএসটি ব্যবহার করুন:

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

এটি যুক্ত করার জন্য jQuery ব্যবহার করা সহজ হবে তবে পাঠ্যটি যথেষ্ট শোভাময় যে CSS উপযুক্ত মনে হয়।


2

আপনি <span>মেনুতে নেভিগেশন লেবেলের পরেও একটি উপাদান লিখতে পারেন এবং এর displayসেটিংস পরিবর্তন করতে নিম্নলিখিত সিএসএস বিধিটি ব্যবহার করতে পারেন (এটি inlineডিফল্টরূপে):

span {display:block}

2
আচ্ছা এটির একটি সহজ এবং সহজ সমাধান তবে আপনি কেন spanএটিকে ব্লক করে রাখেন তবে কেন ব্যবহার করবেন ? এক্সএইচটিএমএল / এইচটিএমএল 4 লিঙ্কগুলির মধ্যে ব্লক উপাদানগুলিকে অনুমতি দেয় না, এইচটিএমএল 5 তবে তাই করে, কেবল ব্যবহার করুন divএবং কোনও সিএসএসের প্রয়োজন নেই!
জেমস মিচ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.