सशर्त वक्तव्य का उपयोग करते हुए वर्डप्रेस मेनू आइटम में एक कस्टम क्लास जोड़ें

सशर्त वक्तव्य का उपयोग करते हुए वर्डप्रेस मेनू आइटम में एक कस्टम क्लास जोड़ें

अधिकांश मामलों में वर्डप्रेस नेविगेशन मेनू स्टाइल करते हुए, आप बस WordPress व्यवस्थापक पैनल से सीएसएस वर्ग जोड़ सकते हैं। हाल ही में एक परियोजना पर काम करते हुए, हम एक परेशानी स्थिति में खुद को मिला। हम केवल एक पोस्ट पृष्ठों पर एक विशिष्ट मेनू आइटम में एक कस्टम वर्ग जोड़ना चाहते थे। थोड़ी देर के लिए देख के बाद, हम कोई समाधान नहीं मिल सका। हमारा अंतिम उपाय चहचहाना पर पूछना था। ओटो (@ ओटो 52) ने यह कहते हुए उत्तर दिया कि यह फ़िल्टर का उपयोग करके संभव है, लेकिन फ़िल्टर के लिए कोई दस्तावेज नहीं है।

थोड़ी देर के लिए कोर में देखने के बाद, हमने समाधान सुलझा लिया आपको क्या करने की ज़रूरत है आपके फ़ंक्शन फ़ाइल में निम्न कोड पेस्ट करें:

// नेविगेशन मेनू आइटम में एक क्लास को छानना
 add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2);
 फ़ंक्शन विशेष_नाव_ वर्ग ($ वर्ग, $ आइटम) {
      अगर (is_single () और& $ item-> शीर्षक == 'ब्लॉग') {
              $ वर्ग [] = 'वर्तमान-मेनू-आइटम';
      }
      $ वर्ग लौटें;
 } 

उपरोक्त कोड केवल यह जांच कर रहा है कि यह एक एकल पोस्ट पृष्ठ है, और मेनू आइटम शीर्षक ब्लॉग है। यदि मानदंड का मिलान किया गया है, तो यह एक क्लास “वर्तमान मेनू आइटम” जोड़ रहा है हमें इस डिज़ाइन के साथ काम करने के लिए कस्टम क्लास को जोड़ना होगा ताकि हम काम कर सकें।

यदि आप पहले से ही नहीं बता सकते हैं, तो मूल रूप से हम जो करना चाहते थे, उस मेनू में ब्लॉग आइटम को हाइलाइट किया गया, जब उपयोगकर्ता एक ही पोस्ट पर था। इससे उन्हें यह देखने की अनुमति मिली कि एकल पोस्ट ब्लॉग का हिस्सा हैं। यह सामान्य रूप से समझ में नहीं आता है, लेकिन जिस डिज़ाइन पर हम काम कर रहे हैं, उसमें यह समझ में आया।

यदि आप इस कोड की तलाश में बेताब थे, तो हम आशा करते हैं कि यह लेख मदद करेगा। आप अन्य $ आइटम वैरिएबल के लिए भी जांच सकते हैं। कुछ उदाहरण हैं: $ item-> आईडी, $ item-> शीर्षक, $ item-> xfn

त्वरित संपादन: चहचहाना पर इस लेख को पोस्ट करने के बाद, हमारे उपयोगकर्ताओं में से एक डीब्राबिन ने बताया कि हम सीएसएस बॉडी क्लासेस के साथ आसानी से इसे पूरा कर सकते थे। उदाहरण के लिए:

.सिन्गल # नॅविगेशन। leftmenublog div {प्रदर्शन: इनलाइन-ब्लॉक! महत्वपूर्ण;} 

असल में हमने जो किया था, हमारे मेनू में एक ऐरो आइकन प्रदर्शित करने के लिए एक अतिरिक्त डिवा जोड़ा गया था। यह तीर केवल तब दिखाया जाएगा जब कक्षा को या तो ऊपर रखा गया हो, या चयनित किया गया था। अन्यथा इसे प्रदर्शित करने के लिए सेट किया गया था: कोई नहीं; शरीर वर्ग का उपयोग करके, हमने केवल विशिष्ट मेनू वर्ग के लिए केवल div तत्व प्रदर्शित किया है।