কাস্টম মেনুতে নির্দিষ্ট লিঙ্কে ক্লাস যুক্ত করুন

Question

আমি জানি আপনি কাস্টম মেনু বিকল্পগুলিতে কোনও শ্রেণি যুক্ত করতে পারেন, তবে এটি এ এর ​​আগে এলআইতে যুক্ত করে the

পরিবর্তে আউটপুট হচ্ছে

<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 @ ওয়াইরফেল ... @ পিকার্ড 102 সিএসএসের সুনির্দিষ্টতার দিকে একবার নজর দিন। এটি আপনাকে CSS এর মাধ্যমে এইচটিএমএল উপাদানগুলি কীভাবে সঠিকভাবে লক্ষ্যবস্তু করা যায় তাও ব্যাখ্যা করবে।

— কায়সার

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 কোডটি প্রতিস্থাপন করুন এবং তারপরে থিমের ফাংশন.এফপিতে কোড যুক্ত করুন।

প্রথমে নিম্নলিখিতটির সাথে ডিফল্ট 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())
     );

এরপরে, ফাংশন.এফপিতে নিম্নলিখিত কোডটি যুক্ত করুন। এটি করে আপনি মেনু লিঙ্কগুলিতে আসলে একটি শ্রেণি যুক্ত করতে পারেন:

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';
        }

        }
}

কোডের শেষের দিকে কয়েকটি লাইন that আইটেম_আউটপুট দিয়ে শুরু হয়। বিশেষত, আপনি এই টুকরোটি দেখতে চান:

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

কারণ এই লাইনটি এইচটিএমএল লিঙ্কের শুরুতে আউটপুট নির্ধারণ করে। আপনি যদি এটির মতো কিছুতে পরিবর্তন করেন:

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

তারপরে মেনুতে আপনার সমস্ত লিঙ্কগুলিতে ক্লাস = "অ্যাবসি" যুক্ত হবে।

---

এটি বলেছে, এটি প্রতিটি লিঙ্কের জন্য একটি কাস্টম ক্লাসের অনুমতি দেয় না (বা কমপক্ষে আমি কীভাবে এটি কোড করব তা জানি না)। এটি আমার জন্য একটি বিষয়।

যারা জিজ্ঞাসা করছেন তাদের জন্য আপনি কেন এটি করতে চান? আমি আমার মেনু লিঙ্কগুলিতে ওপেন লাইটবক্সগুলি (কালারবক্স, আরও নির্দিষ্ট করে রাখতে) চাই এবং তাদের এটি করার জন্য লিঙ্কগুলিতে ক্লাস প্রয়োজন। উদাহরণ স্বরূপ:

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

প্রথম লিঙ্কের জন্য "লাইটবক্স 1", দ্বিতীয় লিঙ্কের জন্য "লাইটবক্স 2" এবং এর মতো আরও কিছু ক্লাসগুলি গতিশীলভাবে উত্পন্ন করার কোনও উপায় আছে কি?

Comments

@ রেনম্যান আপনার উত্তর আমাকে কিছুটা সাহায্য করেছে এবং আপনি একটি ভাল প্রশ্ন করেছেন। আমি নিশ্চিত যে আপনি একটি ভাল সমাধান খুঁজে পেয়েছেন, তবে যাদের সমাধান নেই তাদের জন্য, আমি এখানে সলিউশনের একটি পরিবর্তিত সংস্করণ ব্যবহার করেছি: wpbeginner.com/wp-themes/…

— এনডাব্লু টেক

Answer 3

মীমাংসিত !!!! একটি অভিনব বাক্সে ইনলাইন এইচটিএমএলতে মেনু আইটেমটির লিঙ্কটি তৈরি করার জন্য আমার এটি বের করার দরকার ছিল। নীচের কোডটি আপনার থিমের ফাংশন.পিপিতে আটকান:

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

তারপরে ... ডাব্লুপি ড্যাশবোর্ডের মেনু ট্যাবে, একটি কাস্টম লিঙ্ক তৈরি করুন, এটি আপনার মেনুতে যুক্ত করুন। স্ক্রিন অপশন বলছে শীর্ষে, আপনার "লিঙ্ক রিলেশনশিপ (এক্সএফএন)" চেক হয়েছে কিনা তা নিশ্চিত করুন। এটি আপনার কাস্টম মেনু আইটেমটিতে সেই ক্ষেত্রটি যুক্ত করবে। ফিল্ডে "অভিনব বাক্স" টাইপ করুন (উদ্ধৃতি ব্যতীত) এবং আপনার মেনুটি সংরক্ষণ করুন।

ফাংশনটি নেভিগেশন মেনুতে কলটি সন্ধান করে, তারপরে আপনার যেখানেই রয়েছে সেখানে সন্ধান করে rel="fancybox"এবং এটি একটি দ্বারা প্রতিস্থাপন করে rel="fancybox" class="fancybox"। আপনার মেনু আইটেমগুলিতে আপনার যে ক্লাসটি যুক্ত করতে হবে তা দিয়ে আপনি ফ্যান্সিবক্স প্রতিস্থাপন করতে পারেন। কাজ ও সম্পন্ন!

Comments

দুর্দান্ত পোস্ট !! কেবল একটি বিষয় লক্ষণীয়। কেউ এএ শিরোনাম যুক্ত করলে কোডটি কাজ করবে না। আমি একই ইস্যুতে দৌড়েছি ... সুতরাং আমি উভয় প্রতিস্থাপনের মানগুলির শুরু থেকে একটি ট্যাগ সরিয়েছি। আমাকে এই জাতীয় কিছু রেখে ... প্রিগ_রেপস রিটার্ন করুন ('/ rel = "fancybox" /', 'class = "fancybox" ", $ ulclass, -1); কোড দুর্দান্ত কাজ করে!

Answer 4

বর্তমান উত্তরগুলি চিনতে পারে বলে মনে হয় না যে প্রশ্নটি কীভাবে aউপাদানকে কোনও উপাদানকে যুক্ত করতে হবে এবং liউপাদান নয়, বা খুব জটিল। nav_menu_link_attributesফিল্টারটি ব্যবহার করে এখানে একটি সহজ পদ্ধতির উপায় যা আপনাকে এর স্লাগের উপর ভিত্তি করে একটি নির্দিষ্ট মেনু এবং তার আইডির ভিত্তিতে সেই মেনুতে একটি নির্দিষ্ট পৃষ্ঠার লিঙ্ককে লক্ষ্য করতে দেয়। আপনার অবস্থা তৈরির আরও উপায় পাওয়ার জন্য আপনি 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)ক্ষেত্র দেখতে পাবেন ।