wp_nav_menu (), <li> ক্লাস কীভাবে পরিবর্তন করবেন?

Question

আমি আমার ওয়েবসাইটের জন্য একটি মেনু তৈরি করছি। স্থির এইরকম দেখাচ্ছে:

<nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

আমি <ul>স্বয়ংক্রিয় <div>ট্যাগ থেকে মুক্তি পেতে কীভাবে ট্যাগটি কাস্টমাইজ করতে পারি তা বুঝতে সক্ষম হয়েছি । তবে এখন, আমি সিএসএসের মাধ্যমে নির্দিষ্ট আচরণ নিয়ন্ত্রণের <li>জন্য আলাদা classনাম নির্ধারণ করতে সক্ষম হতে ট্যাগটি কাস্টমাইজ করতে চাই । আমি যখন wp_nav_menu()আউটপুটটি ব্যবহার করি তা নিম্নরূপ:

    <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

আমি ট্যাগগুলির idমধ্যে থেকে মুক্তি পেতে চাই এবং আমি যে পৃষ্ঠায় লিঙ্ক করতে চাই তার নামটি প্রতিবিম্বিত <li>করতে এটি পরিবর্তন করতে classচাই। মূলত আমি এই পোস্টে কোড 1 ম স্নিপেট হিসাবে একই জিনিস আউটপুট করতে চাই।

আমি এটি করার কারণটি হ'ল আমি কাস্টম চিত্রগুলি ব্যবহার করি যা আমার সিএসএসের দ্বারা সরল পাঠ্যের সাথে জড়িত ro

এটা কি সম্ভব? এই সমস্যাটি কাটিয়ে উঠতে আমার কী কৌশল ব্যবহার করা উচিত?

Comments

এখানে আপনি <<

— রমিজ সুমরো

Answer 1

একটি কাস্টম ওয়াকার ব্যবহার করুন, আপনার যা প্রয়োজন হবে না এমন কিছু মুছে ফেলুন এবং আপনার ক্লাস যুক্ত করুন। ক্লিন মার্কআপ সহ একটি তালিকা পেতে আমি এখানে একটি ওয়াকার ব্যবহার করছি: টি 5_নাভ_মেনু_ওয়ালার_সিম্পল ।

আপনার ফিল্টার করতে পারে 'nav_menu_css_class'বা 'wp_nav_menu_items'। তবে একজন ওয়াকার শ্রেণি আমার মতে বোঝা এবং নিয়ন্ত্রণ করা সহজ।

Comments

ধন্যবাদ তোসকো, আমি কেবল খুঁজে পেয়েছি যে ওয়ার্ডপ্রেসের নতুন সংস্করণে (৩.৩) আমরা প্রতিটি মেনু আইটেমের সাথে কাস্টম ক্লাস ফার যোগ করতে পারি যার মধ্যে আমার সমস্যাটি সমাধান করা যায়। আপনি আমাকে প্রস্তাবিত স্ক্রিপ্টটি চেষ্টা করেছি (T5_Nav_Menu_Walker_Simple) যা থেকে সমস্ত কিছু কেটে ফেলা হয় <li>, আমরা কী উপাদানগুলিকে রাখতে চাই তা নিয়ন্ত্রণ করতে পারি?

— খ্রিস্টান

@ ক্রিশ্চিয়ান আপনি ওয়াকারকে আপনার প্রয়োজন অনুসারে পরিবর্তন করতে পারেন এটি কেবলমাত্র একটি প্রাথমিক উদাহরণ। কোন তথ্য উপলব্ধ তা দেখতে, print_r( $item, TRUE )প্রতিটিটিতে একটি যুক্ত করুন li। তারপরে কী করবেন তা সিদ্ধান্ত নিন। :)

— ফুসিয়া

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

— ডি ডান

Answer 2

উপস্থিতিতে যান> মেনুগুলি - আপনি যে মেনুটি চান তা নির্বাচন করুন - উপরের ডানদিকে "স্ক্রীন বিকল্পগুলি" এ যান, "সিএসএস ক্লাস" নির্বাচন করুন - প্রতিটি মেনু আইটেমে একটি শ্রেণি যুক্ত করুন ..

Answer 3

<li>ক্লাসটি সেট করা nav-link, বুটস্ট্র্যাপ ৪.৩ এর যেমন প্রয়োজন:

function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

আপনি idযে অ্যারেতে বৈশিষ্ট্যটি আনসেট করতে পারেন ।

Answer 4

শেষের পোস্টারটি উল্লিখিত হিসাবে, আপনি পর্দার বিকল্পগুলিতে টিকযুক্ত সিএসএস ক্লাসের সাথে > মেনুগুলির মাধ্যমে নিজের ক্লাস যুক্ত করতে পারেন । ওয়াকারে, আপনি সেখানে যা প্রবেশ করেন তার মাধ্যমে আপনি প্রবেশ করতে পারবেন:

$item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

আমি এমনকি এটি মেনুতে পূর্ব-নামযুক্ত চিত্রগুলি যুক্ত করতে ব্যবহার করেছি - কিছুটা ফ্লেকি, তবে এটি কার্যকর হয়।

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">