Wp_nav_menu () পূর্বপুরুষ ক্লাস ডাব্লু / নেভ স্ট্রাকচারের বাচ্চারা হাইলাইট করছেন?


30

( মডারেটর দ্রষ্টব্য: নেভিগেশন স্ট্রাকচারে শিশু ছাড়াই মূলত শিরোনাম ছিল "wp_nav_menu পূর্বপুরুষ")

wp_nav_menuআমার শিরোনামে একটি রয়েছে যা এর তিনটি পৃষ্ঠা ছিল। আমি যখন এই পৃষ্ঠাগুলির একটিতে থাকি, liমেনুতে সেই পৃষ্ঠাটি ধারণ করে ক্লাস হয় .current_page_item। এই তিনটি পৃষ্ঠাতে টেমপ্লেট রয়েছে এবং এই টেম্পলেটগুলিতে একটি নির্দিষ্ট সামগ্রীর ধরণের সমস্ত পোস্ট পেতে কাস্টম ক্যোরি থাকে। বাস্তবে, এই শীর্ষ স্তরের পৃষ্ঠার অনুভূত "শিশু" আসলে শিশু নয়, তারা কেবলমাত্র একটি টেমপ্লেট ব্যবহার করে top শীর্ষ স্তরের পৃষ্ঠার সাথে টেমপ্লেট ব্যবহার করে যুক্ত করেছি।

আমি শীর্ষ স্তরের মেনু আইটেমগুলিতে 'current-ancestor'ক্লাস পেতে চাইব যখন ব্যবহারকারী কোনও নির্দিষ্ট পোস্ট ধরণের একটি একক পৃষ্ঠা ব্রাউজ করে আবার টেমপ্লেট ফাইলে একটি কাস্টম প্রশ্নের সাথে সেই পৃষ্ঠাটির সাথে যুক্ত হয়।

আশা করি এটি উপলব্ধি করে - যদি না হয় তবে আমাকে জানতে দিন আমি আপনাকে কোথায় হারিয়েছি! যে কোনও সাহায্যের খুব প্রশংসা করি।

- নির্দিষ্টকরণের জন্য সম্পাদিত: উদাহরণস্বরূপ, আমার কাছে ওয়ার্কশপস নামে একটি স্ট্যাটিক পৃষ্ঠা রয়েছে যা একটি টেম্পলেট ব্যবহার করছে। এর স্লাগ হ'ল ওয়ার্কশপ । টেমপ্লেটের একটি কাস্টম get_posts ফাংশন রয়েছে এবং এর মধ্যে লুপ রয়েছে, যা ওয়ার্কশপ নামক একটি কাস্টম সামগ্রীর ধরণের সমস্ত পোস্টকে টান এবং প্রদর্শন করে । আমি যদি এই ওয়ার্কশপের শিরোনামের কোনওটিতে ক্লিক করি তবে আমাকে সেই টুকরো টুকরো সামগ্রীর সম্পূর্ণ সামগ্রীতে নিয়ে যাওয়া হয়েছে। কাস্টম পোস্ট ধরণের পারমালিঙ্ক কাঠামোটি ওয়ার্কশপ / পোস্ট নেমে সেট করা আছেযাতে ব্যবহারকারী এটি দেখেন, এই টুকরো টুকরোগুলি ওয়ার্কশপ পৃষ্ঠাগুলির বাচ্চারা, যখন বাস্তবে এগুলি সমস্ত একটি সামগ্রীর ধরণের তবে পৃষ্ঠার সাথে সম্পর্কিত নয়। 'ওয়ার্কশপ' টাইপের সামগ্রী ব্রাউজ করার সময় 'ওয়ার্কশপস' মেনু আইটেমটি হাইলাইট করে আমি কার্যকরভাবে মেনুতে বন্ধ করতে হবে এটি সেই ফাঁক।

আবার, আশা করি যে এটি উপলব্ধি করে, আমি মনে করি আমি এক অনুচ্ছেদে 20 বারের বেশি 'ওয়ার্কশপ' বলেছি!


@ গ্যাভিন - আপনি কী সম্পাদনা করার চেষ্টা করছেন তার আরও কয়েকটি নির্দিষ্ট বিবরণ অন্তর্ভুক্ত করতে পারেন? আমরা যদি এটি বিমূর্তে চেষ্টা করার চেষ্টা করি তার চেয়ে কংক্রিটের সাথে উত্তর লেখা আরও সহজ। এছাড়াও আপনি যদি আপনার সম্পর্কিত ইউআরএল কাঠামো ব্যাখ্যা করতে পারেন তবে এটি সহায়ক হবে।
মাইকস্কিঙ্কেল

1
@ গ্যাভিন - এটি সাহায্য করে। সুতরাং আপনার শীর্ষ স্তরের মেনু বিকল্পটি "ওয়ার্কশপস"ওয়ার্কশপের একটি তালিকা সহ একটি রাস্তা /workshops/এবং যখন কোনও ব্যবহারকারী কোনও কর্মশালার পৃষ্ঠায় থাকে (যেমন /workshops/example-workshop/) আপনি কি "ওয়ার্কশপস" মেনু আইটেমটি শ্রেণি current_page_itemনির্ধারিত করতে চান, সঠিক?
মাইকচিন্কেল

wp_nav_menu () বর্তমান-মেনু-পূর্বপুরুষ শ্রেণিকে প্রকাশ করেছে
ড্যানিয়েল স্যাচ

উত্তর:


29

একটি সহজ সমাধান আছে। প্রতিটি পোস্টের জন্য পৃষ্ঠাগুলি তৈরি করতে ভুলে যাবেন যাতে আপনি নাভ আইটেমগুলি রাখতে পারেন, কারণ আপনি যেমন শিখে গেছেন, ডাব্লুপি'র কাছে স্বীকৃতি দেওয়ার কোনও উপায় নেই যে আপনি যে কাস্টমগুলি ব্রাউজ করছেন সেগুলি সেই পৃষ্ঠার সাথে সম্পর্কিত।

পরিবর্তে, চেহারা-> মেনুতে একটি কাস্টম লিঙ্ক তৈরি করুন। কেবলমাত্র ইউআরএল রাখুন যা আপনার কাস্টম প্রকারটি ফিরে আসবে এবং এটিকে একটি লেবেল দেবে, তারপরে "মেনুতে যুক্ত করুন" টিপুন।

http://example.com/workshops/

বা অ-চমত্কার-পারমিলিক্স:

http://example.com/?post_type=workshops

এটি কেবলমাত্র একটি এনএভি বাটন তৈরি করবে যা কাস্টম পোস্টের ধরণের সাথে সমস্ত পোস্ট প্রদর্শন করে এবং যখন আপনি সেই এনএভি আইটেমটি ক্লিক করেছেন তখন বর্তমান-মেনু-আইটেম শ্রেণিটি যুক্ত করবে - তবে এটি এখনও কোনও এনএভি ক্লাস যুক্ত করবে না এটি ছাড়া অন্য ইউআরএল

তারপরে, এটি তৈরি হয়ে গেলে, নতুন আইটেমটির কনফিগারেশনে যান এবং "শিরোনাম বৈশিষ্ট্য" ক্ষেত্রে কাস্টম পোস্ট টাইপের স্লাগ প্রবেশ করুন (আপনি বর্ণনার ক্ষেত্রটিও ব্যবহার করতে পারেন, তবে এটি অ্যাডমিন স্ক্রিন অপশনে লুকিয়ে রয়েছে গতানুগতিক).

এখন, আপনাকে nav_menu_css_classফিল্টারটি হুক করতে হবে (যা প্রতিটি এনএভি আইটেমের জন্য বহিস্কার হয়ে যায়) এবং যাচাই করা সামগ্রীটি আপনার কাস্টম এনএভি আইটেমটিতে নির্দেশিত পোস্ট ধরণের কিনা তা পরীক্ষা করতে হবে:

add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2 );
function current_type_nav_class($classes, $item) {
    $post_type = get_query_var('post_type');
    if ($item->attr_title != '' && $item->attr_title == $post_type) {
        array_push($classes, 'current-menu-item');
    };
    return $classes;
}

এই ক্ষেত্রে, আমরা যাচাই করতে যাচ্ছি যে শিরোনাম বৈশিষ্ট্য ক্ষেত্রের সামগ্রীগুলি খালি নেই এবং যদি তারা বর্তমান পোস্ট_প্রকারের সাথে অনুসন্ধান করা হয় তবে অনুসন্ধান করা হবে। যদি তা হয় তবে আমরা বর্তমান-মেনু-আইটেম শ্রেণিটিকে তার শ্রেণির অ্যারেতে যুক্ত করব, তারপরে পরিবর্তিত অ্যারেটি ফিরিয়ে দেব।

আপনি কেবল এনএভি আইটেমের শিরোনামের সাথে মেলে এটি পরিবর্তন করতে পারেন, তবে যদি কোনও কারণে আপনি পোস্টের ধরণের প্লেন স্লাগের চেয়ে ন্যাভ আইটেমটি আলাদাভাবে শিরোনাম করতে চান, শিরোনাম গুণাবলী বা বিবরণ ক্ষেত্রটি আপনাকে সেই নমনীয়তা দেয়।

এখন যে কোনও সময় আপনি কোনও ন্যাভ মেনু আইটেমের সাথে মেলে এমন কোনও পোস্ট ধরণের একক আইটেম (বা সম্ভবত এমনকি সংরক্ষণাগার তালিকাগুলিও) দেখছেন, সেই আইটেমটি সিএসএস বর্গের বর্তমান-মেনু-আইটেম দেওয়া হবে যাতে আপনার হাইলাইটিংয়ের কাজ হবে।

কোনও পৃষ্ঠা বা পৃষ্ঠার টেম্পলেটগুলির প্রয়োজন নেই ;-) ইউআরএল কোয়েরি সঠিক পোস্টগুলি আনার ক্ষেত্রে যত্ন নেয়। আপনার লুপ টেমপ্লেট ক্যোয়ারী আউটপুট প্রদর্শন করার যত্ন নেয়। এই ফাংশনটি কী দেখানো হচ্ছে তা স্বীকৃতি এবং সিএসএস ক্লাস যুক্ত করার যত্ন নিয়েছে।

বোনাস

এমনকি wp_update_nav_menu_itemআপনার সমস্ত পোস্টের জন্য মেনু আইটেমগুলি স্বয়ংক্রিয়ভাবে উত্পন্ন করে ব্যবহার করে আপনি প্রক্রিয়াটি স্বয়ংক্রিয় করতে পারেন । এই উদাহরণস্বরূপ, আপনাকে প্রথমে $menu_idন্যাভ মেনুটি পুনরুদ্ধার করতে হবে যা আপনি এই আইটেমটি যুক্ত করতে চান।

$types = get_post_types( array( 'exclude_from_search' => false, '_builtin' => false  ), 'objects' );
foreach ($types as $type) {
    wp_update_nav_menu_item( $menu_id, 0, array(
        'menu-item-type' => 'custom',
        'menu-item-title' => $type->labels->name,
        'menu-item-url' => get_bloginfo('url') . '/?post_type=' . $type->rewrite['slug'],
        'menu-item-attr-title' => $type->rewrite['slug'],
        'menu-item-status' => 'publish'
        )
    );
}

এটা জিনিস! আমি কেবলমাত্র পৃষ্ঠাগুলি ব্যবহার করছি কারণ এই পৃষ্ঠাগুলির জন্য বিন্যাসগুলি জটিল এবং কেবলমাত্র পৃষ্ঠাগুলিকে তালিকার বাইরে রাখবে না, তবে পৃষ্ঠার আইডি চেক করতে আপনি যে ফিল্টার সরবরাহ করেছেন তা আমি এখনও ব্যবহার করতে পারি। এই থিমটির প্রকৃতি হ'ল থিম বিকল্পগুলি আপনাকে পৃষ্ঠাগুলির সাথে মেলে দেয় ('হোম' এই পৃষ্ঠাটি, 'প্রায়' এই পৃষ্ঠাটি ইত্যাদি)), যাতে এটি পুরোপুরি কার্যকর হয়। (অবিশ্বাস্যভাবে বিস্তারিত) সহায়তার জন্য আপনাকে ধন্যবাদ!
গাভিন

আমার current_page_parentনেভিগেশন আইটেমটি থেকে আমার ব্লগটি সরিয়ে ফেলতে হয়েছিল - তবে অন্যথায় এটি কার্যকর হয়েছিল। thx
পিকেইক

এটি আমার জন্য কাজ করছে না, যেহেতু $item->attr_titleটিআইআলটি টানছে, এবং আমি শিরোনাম বড় বড় অক্ষরে লিখেছি। সুতরাং আমি বৈশিষ্ট্যটি পরিবর্তন করেছি $item->post_nameএবং এখন এটি আমার পক্ষে ভাল কাজ করে।
honk31

আমি আমার থিমটির জন্য কোডটি কাজ করার চেষ্টা করেছি, তবে এটি কার্যকর হতে পারে না। আমি কাস্টম পোস্টের ধরণে থাকাকালীন মেনুতে আমার পিতামাতার আইটেমটিতে কোনও শ্রেণি প্রয়োগ করা হবে না portfolio। আমি উপরের কোড ব্যবহার করেছি। কি সমস্যা হতে পারে?
ক্যাস্পার

4

পরিবর্তে ব্যবহার

; post_type = get_query_var ('পোস্ট_ টাইপ');

আপনি চেষ্টা করতে পারেন:

$ post_type = get_post_type ();

সমকাল হিসাবে পোস্টের ধরণটি ক্যোয়ারী ভেরিতে সেট করা নেই। এটি "পোস্ট" এর ডিফল্ট পোস্ট_ টাইপের ক্ষেত্রে, তাই যদি আপনি কোনও তালিকা পৃষ্ঠা থেকে তালিকাভুক্ত একটি পোস্ট হাইলাইট করতে চান তবে আপনার এটি ব্যবহার করতে হবে। get_very_var () কেবলমাত্র প্রকার নয় এমন পোস্টের জন্য খালি স্ট্রিং দেয় returns

add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2 );
function current_type_nav_class($classes, $item) {
    $post_type = get_post_type();
    if ($item->attr_title != '' && $item->attr_title == $post_type) {
        array_push($classes, 'current-menu-item');
    };
    return $classes;
}

2

@ সুম্যাটিক - এটি দুর্দান্ত! আমি আপনার কোডটি কিছুটা সংশোধন করেছি যাতে এটি নির্দিষ্ট সারণির জন্যও কাজ করে (যা আমি কেবল সম্পর্কিত পোস্ট_ টাইপের জন্য ব্যবহার করছি)। ধারণাটি হ'ল মেনু আইটেমের শিরোনাম বৈশিষ্ট্যটি পোস্ট_ টাইপের নাম এবং শ্রমশৃঙ্খলার নাম দুটি আধা-কোলন দ্বারা পৃথক করে এবং পরে ফাংশনে বিস্ফোরিত করা যায়।

add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2 );
function current_type_nav_class($classes, $item) {

    # get Query Vars
    $post_type = get_query_var('post_type');  
    $taxonomy = get_query_var('taxonomy');

    # get and parse Title attribute of Menu item
    $title = $item->attr_title; // menu item Title attribute, as post_type;taxonomy
    $title_array = explode(";", $title);
    $title_posttype = $title_array[0];
    $title_taxonomy = $title_array[1];

    # add class if needed
    if ($title != '' && ($title_posttype == $post_type || $title_taxonomy == $taxonomy)) {
        array_push($classes, 'current-menu-item');
    };
    return $classes;
}

2

আপনি যদি wp_list_pages নিয়ে কাজ করতে চান তবে আমার সমাধান এখানে।

আপনার ফাংশন.এফপি এ এটি যোগ করুন

add_filter('page_css_class', 'my_page_css_class', 10, 2);
function my_page_css_class($css_class, $page){
    $post_type = get_post_type();
    if($post_type != "page"){
        $parent_page = get_option('page_for_custom_post_type-'.$post_type);
        if($page->ID == $parent_page)
            $css_class[] = 'current_page_parent';
    }
    return $css_class;
}

এখন শুধু wp_options সারণিতে একটি সঙ্গে একটি নতুন সারি যোগ OPTION_NAME এর page_for_custom_post_type-XXXX এবং option_value সঙ্গে পৃষ্ঠা-আইডি তোমার দর্শন লগ করা সংযুক্ত করতে চান।

সম্ভবত আপনি সনাক্ত করেছেন যে ইতিমধ্যে পেজ_ফোর্ড_পোস্ট নামে একটি বিকল্প রয়েছে । আপনার যদি কেবল 1 টি কাস্টম পোস্ট টাইপ থাকে আপনি আপনার পৃষ্ঠাটি ড্রপডাউনে /wp-admin/options-reading.php এ সেট করতে পারেন এবং নেভিগেশন সঠিকভাবে বর্তমান_পৃষ্ঠাটি সেট করবে।

আমি মনে করি ওয়ার্ডপ্রেস কোর নিবন্ধিত প্রতিটি পোস্টের জন্য ড্রপডাউন সহ এই বিভাগটি প্রসারিত করা উচিত।


2

আমি পৃষ্ঠাগুলির সাথে লেগে থাকার এবং পৃষ্ঠার টেমপ্লেটের নামটি এনএভি আইটেমের শ্রেণি হিসাবে ব্যবহার করার সিদ্ধান্ত নিয়েছি। এটি আমাকে শিরোনামের বৈশিষ্ট্যটিকে বিশৃঙ্খলা এড়াতে অনুমতি দেয় যা আমি অন্যান্য কয়েকটি সমাধান সম্পর্কে পছন্দ করি না।

add_filter('nav_menu_css_class', 'mbudm_add_page_type_to_menu', 10, 2 );
//If a menu item is a page then add the template name to it as a css class 
function mbudm_add_page_type_to_menu($classes, $item) {
    if($item->object == 'page'){
        $template_name = get_post_meta( $item->object_id, '_wp_page_template', true );
        $new_class =str_replace(".php","",$template_name);
        array_push($classes, $new_class);
        return $classes;
    }   
}

আমি হেড.এফপিতে বডি ক্লাস যুক্ত করেছি

<body <?php body_class(); ?>>

অবশেষে এই সমাধানটি আপনার এনএভি মেনু আইটেমগুলিতে নির্বাচিত / সক্রিয় রাষ্ট্র প্রয়োগ করতে কিছু অতিরিক্ত সিএসএস প্রয়োজন। এই পৃষ্ঠার বাচ্চাদের হিসাবে পৃষ্ঠার সম্পর্কিত ট্যাক্সনমি সংরক্ষণাগারগুলি এবং কাস্টম পোস্টের প্রকারগুলি দেখানোর জন্য আমি এটি ব্যবহার করি:

/* selected states - include sub pages for anything related to products */
#nav-main li.current-menu-item a,
body.single-mbudm_product #nav-main li.lp_products a,
body.tax-mbudm_product_category #nav-main li.lp_products a,
#nav-main li.current_page_parent a{color:#c00;}

এটি আমাকে নিম্নলিখিত ত্রুটিটি দিয়েছে: Warning: join() [function.join]: Invalid arguments passed in /home/path/to/wp-includes/nav-menu-template.php on line 76 এখানে কী ঘটেছিল কোনও ধারণা?
জেফ কে।

ওহ আমার মনে হয় আমি কি ঘটছে তা দেখছি। কারণ আপনি যদি বিবৃতিতে ক্লাস ফিরিয়ে দেন returning কেবল return $classesবাইরে চলে যাওয়া এবং তারপরে ifউপরের ত্রুটিটি সমাধান করা যায় বলে মনে হচ্ছে।
জেফ কে।

1

@ সুম্যাটিক - দুর্দান্ত কোড! আমি নিজেকে বদলে ফেললাম। আমি এর উদ্দেশ্যযুক্ত উদ্দেশ্যে শিরোনাম বৈশিষ্ট্যটি রাখতে চেয়েছিলাম, সুতরাং পরিবর্তে আমি লিঙ্ক রিলেশনশিপ (এক্সএফএন) উন্নত মেনু বৈশিষ্ট্যগুলিতে কাস্টম পোস্ট ধরণের স্লাগ স্থাপন করেছি যা আপনি স্ক্রিন বিকল্পগুলিতে সক্ষম করতে পারবেন। আমি সংশোধন করেছি

if ($item->attr_title != '' && $item->attr_title == $post_type) {

এবং এটিতে পরিবর্তন

if ($item->xfn != '' && $item->xfn == $post_type) {

0

সুন্দর কাজ সোম্যাটিক।

দুর্ভাগ্যক্রমে, আপনি কীভাবে কোনও পৃষ্ঠাতে আপনার কাস্টম পোস্টের ধরণের তালিকা তৈরি করতে পারেন তা আমি পেতে চাই না। আমি যদি একটি পেজ-পোর্টফোলিও.পিএফ ব্যবহার না করে এটি একটি পৃষ্ঠায় যুক্ত না করি তবে আমার কাছে সমস্ত কিছুই 404 পৃষ্ঠা।

আমি যদি গ্যাভিনের মতো কাজ করি, তবে ব্লগ পৃষ্ঠা থেকে এটি "বর্তমান_পৃষ্ঠা_পিতা" মুছে ফেলার জন্য আপনি কিছুটা ফাংশন সংশোধন করেছি।

add_filter('nav_menu_css_class', 'current_type_nav_class', 10, 2);
function current_type_nav_class($css_class, $item) {
$post_type = get_query_var('post_type');

if (get_post_type()=='portfolio') {
    $current_value = "current_page_parent"; 
    $css_class = array_filter($css_class, function ($element) use ($current_value) { return ($element != $current_value); } );
}

if ($item->attr_title != '' && $item->attr_title == $post_type) {       
    array_push($css_class, 'current_page_parent');
};
return $css_class;

}

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.