वर्डप्रेस नेविगेशन मेनू को कैसे स्टाइल करें (अपडेट किया गया)

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

हम दो अलग-अलग तरीके दिखाएंगे। पहली विधि शुरुआती लोगों के लिए अभिप्रेत है क्योंकि यह एक प्लगइन का उपयोग करती है और इसके लिए किसी कोड ज्ञान की आवश्यकता नहीं होती है। दूसरी विधि इंटरमीडिएट DIYers के लिए है जो प्लगइन के बजाय सीएसएस कोड का उपयोग करना पसंद करते हैं।

विधि 1: एक प्लगइन का उपयोग करके वर्डप्रेस नेविगेशन मेनू को स्टाइल करना

आपकी वर्डप्रेस थीम नेविगेशन मेनू को स्टाइल करने के लिए CSS का उपयोग करती है। कई नए लोग थीम फ़ाइलों को संपादित करने या स्वयं सीएसएस कोड लिखने में सहज नहीं होते हैं। यह तब होता है जब एक वर्डप्रेस स्टाइलिंग प्लगइन काम आता है। यह आपको थीम फ़ाइलों को संशोधित करने या कोड लिखने से बचाता है। आपको सबसे पहले CSS Hero प्लगइन को इंस्टॉल और एक्टिवेट करना होगा। अधिक विवरण के लिए, वर्डप्रेस प्लगइन कैसे स्थापित करें, इस बारे में हमारी चरण-दर-चरण मार्गदर्शिका देखें। CSS हीरो एक प्रीमियम वर्डप्रेस प्लगइन है जो आपको कोड की एक भी लाइन लिखे बिना अपनी खुद की वर्डप्रेस थीम डिजाइन करने की अनुमति देता है (कोई HTML या CSS आवश्यक नहीं)। अधिक जानकारी के लिए हमारी सीएसएस हीरो समीक्षा देखें। MundoCMS उपयोगकर्ता इस CSS हीरो कूपन का उपयोग अपनी खरीद पर 34% छूट प्राप्त करने के लिए कर सकते हैं। सक्रियण पर, आपको अपनी सीएसएस हीरो लाइसेंस कुंजी प्राप्त करने के लिए पुनर्निर्देशित किया जाएगा। बस ऑन-स्क्रीन निर्देशों का पालन करें और आपको कुछ ही क्लिक में आपकी साइट पर ले जाया जाएगा। इसके बाद, आपको वर्डप्रेस एडमिन टूलबार पर सीएसएस हीरो बटन पर क्लिक करना होगा।

CSS Hero WYSIWYG (जो आप देखते हैं वही आपको मिलता है) संपादक प्रदान करता है। स्क्रीन पर दिखाई देने वाले फ्लोटिंग सीएसएस हीरो टूलबार के साथ अपनी वेबसाइट पर जाने के लिए बटन पर क्लिक करें।

संपादन शुरू करने के लिए आपको सबसे ऊपर नीले आइकन पर क्लिक करना होगा। नीले आइकन पर क्लिक करने के बाद, नेविगेशन मेनू पर अपना माउस घुमाएं और सीएसएस हीरो इसके चारों ओर सीमाओं को प्रदर्शित करके इसे हाइलाइट करेगा। जब आप हाइलाइट किए गए नेविगेशन मेनू पर क्लिक करते हैं, तो यह आपको वे आइटम दिखाएगा जिन्हें आप बदल सकते हैं।

ऊपर दिए गए स्क्रीनशॉट में, यह हमें शीर्ष नेविगेशन मेनू कंटेनर दिखाता है। मान लीजिए हम अपने नेविगेशन मेनू की पृष्ठभूमि का रंग बदलना चाहते हैं। इस मामले में, हम शीर्ष नेविगेशन का चयन करेंगे जो हमारे पूरे मेनू को प्रभावित करता है। सीएसएस हीरो अब आपको अलग-अलग गुण दिखाएगा जिन्हें आप बदल सकते हैं जैसे टेक्स्ट, बैकग्राउंड, बॉर्डर, मार्जिन, पैडिंग आदि।

आप किसी भी संपत्ति पर क्लिक कर सकते हैं जिसे आप संपादित करना चाहते हैं। CSS Hero आपको एक सरल इंटरफ़ेस दिखाएगा जहाँ आप अपने परिवर्तन कर सकते हैं।

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

एक बार जब आप अपने परिवर्तनों से खुश हो जाते हैं, तो अपने परिवर्तनों को सहेजने के लिए CSS हीरो टूलबार पर सहेजें बटन पर क्लिक करें। इस पद्धति का उपयोग करने की सबसे अच्छी बात यह है कि आप अपने द्वारा किए गए परिवर्तनों को आसानी से पूर्ववत कर सकते हैं। CSS Hero आपके सभी परिवर्तनों का पूरा इतिहास रखता है, और आप उन परिवर्तनों के बीच आगे-पीछे जा सकते हैं।

विधि 2 - वर्डप्रेस नेविगेशन मेनू की मैनुअल स्टाइलिंग

इस पद्धति के लिए आपको कस्टम सीएसएस को मैन्युअल रूप से जोड़ने की आवश्यकता है और यह मध्यवर्ती उपयोगकर्ताओं के लिए अभिप्रेत है। वर्डप्रेस नेविगेशन मेनू एक अनियंत्रित सूची (बुलेट सूची) में प्रदर्शित होते हैं। आमतौर पर, यदि आप डिफ़ॉल्ट वर्डप्रेस मेनू टैग का उपयोग करते हैं, तो यह एक संबद्ध सीएसएस वर्ग के बिना एक सूची प्रदर्शित करेगा।

आपकी अनियंत्रित सूची में वर्ग का नाम "मेनू" होगा और प्रत्येक सूची आइटम का अपना सीएसएस वर्ग होगा। यह काम कर सकता है यदि आपके पास केवल एक मेनू स्थान है। हालाँकि, अधिकांश थीम में कई स्थान होते हैं जहाँ आप नेविगेशन मेनू प्रदर्शित कर सकते हैं। केवल डिफ़ॉल्ट CSS वर्ग का उपयोग करने से अन्य स्थानों में मेनू के साथ विरोध हो सकता है। इसलिए आपको CSS क्लास और मेनू के स्थान को भी परिभाषित करना होगा। संभावना है कि आपकी वर्डप्रेस थीम पहले से ही इस तरह के कोड का उपयोग करके नेविगेशन मेनू जोड़कर ऐसा कर रही है:

'प्राथमिक', 'मेनू_क्लास' = 'प्राथमिक-मेनू',)); ? यह कोड वर्डप्रेस को बताता है कि यह वह जगह है जहां थीम मुख्य मेनू प्रदर्शित करती है। यह नेविगेशन मेनू में एक CSS क्लास मुख्य मेनू भी जोड़ता है। अब आप इस CSS संरचना का उपयोग करके अपने नेविगेशन मेनू को स्टाइल कर सकते हैं। // रैपर क्लास #हेडर .प्राइमरी-मेनू {} // रैपर क्लास फर्स्ट अनऑर्डर्ड लिस्ट #header .primary-menu li {} // प्रत्येक nav एलिमेंट एंकर #header .primary-menu li में {} // अनियंत्रित सूची है यदि #header ड्रॉपडाउन हैं। प्राइमरी-मेनू ली उल {} // प्रत्येक ड्रॉपडाउन नेवी आइटम #header .primary-menu li li {} // प्रत्येक ड्रॉपडाउन नेवी आइटम एंकर #header .primary-menu li li a {} आपको # हेडर को इसके साथ बदलना होगा आपके नेविगेशन मेनू द्वारा उपयोग किया जाने वाला वर्ग कंटेनर सीएसएस। यह संरचना आपके नेविगेशन मेनू के रूप को पूरी तरह से बदलने में आपकी सहायता करेगी। हालांकि, वर्डप्रेस द्वारा उत्पन्न अन्य सीएसएस कक्षाएं हैं जो स्वचालित रूप से प्रत्येक मेनू और मेनू आइटम में जोड़ दी जाती हैं। ये कक्षाएं आपको अपने नेविगेशन मेनू को और अधिक अनुकूलित करने की अनुमति देती हैं। // वर्तमान पृष्ठ के लिए कक्षा .current_page_item {} // वर्तमान श्रेणी के लिए कक्षा .current-cat {} // किसी अन्य वर्तमान मेनू आइटम के लिए कक्षा .current-menu-item {} // किसी श्रेणी के लिए कक्षा .मेनू – आइटम- टाइप-टैक्सोनॉमी {} // आइटम प्रकारों के लिए क्लास .मेनू-आइटम-टाइप-पोस्ट_टाइप {} // सभी कस्टम लिंक के लिए क्लास .मेनू-आइटम-टाइप-कस्टम {} // पोस्ट-टाइप लिंक होम के लिए क्लास। मेनू-आइटम - होम {} वर्डप्रेस आपको अलग-अलग मेनू आइटम में अपनी खुद की कस्टम सीएसएस कक्षाओं को जोड़ने की अनुमति देता है। आप इस सुविधा का उपयोग मेनू आइटम को स्टाइल करने के लिए कर सकते हैं, जैसे कि अपने मेनू के साथ छवि आइकन जोड़ना या मेनू आइटम को हाइलाइट करने के लिए बस रंग बदलना। के लिए जाओ सूरत »मेनू अपने WordPress व्यवस्थापक में पृष्ठ और स्क्रीन विकल्प बटन पर क्लिक करें।

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

अब आप अपने कस्टम CSS को जोड़ने के लिए इस CSS क्लास को अपनी स्टाइल शीट में उपयोग कर सकते हैं। यह केवल आपके द्वारा जोड़े गए CSS वर्ग के साथ मेनू आइटम को प्रभावित करेगा।

वर्डप्रेस नेविगेशन मेनू शैलियाँ के उदाहरण

विभिन्न वर्डप्रेस थीम नेविगेशन मेनू बनाने के लिए विभिन्न स्टाइलिंग विकल्पों, सीएसएस कक्षाओं और यहां तक ​​कि जावास्क्रिप्ट का उपयोग कर सकते हैं। यह आपको इन शैलियों को बदलने और अपनी आवश्यकताओं के अनुरूप अपने नेविगेशन मेनू को अनुकूलित करने के लिए कई विकल्प देता है। आपके वेब ब्राउज़र का निरीक्षण उपकरण यह निर्धारित करने में आपका सबसे अच्छा दोस्त होगा कि कौन सी सीएसएस कक्षाओं को संशोधित करना है। यदि आपने पहले कभी इसका उपयोग नहीं किया है, तो वर्डप्रेस थीम को कस्टमाइज़ करने के लिए निरीक्षण टूल का उपयोग करने के तरीके के बारे में हमारी मार्गदर्शिका देखें। मूल रूप से, आपको बस अपने कर्सर को उस तत्व पर इंगित करना है जिसे आप बदलना चाहते हैं, राइट-क्लिक करें, और फिर ब्राउज़र मेनू से निरीक्षण उपकरण का चयन करें।

इसके साथ ही, आइए वर्डप्रेस नेविगेशन मेनू शैलियों के कुछ वास्तविक उदाहरण देखें।

1. वर्डप्रेस नेविगेशन मेनू में फ़ॉन्ट रंग कैसे बदलें

यह कस्टम सीएसएस का उदाहरण है जिसे आप नेविगेशन मेनू के फ़ॉन्ट रंग को बदलने के लिए अपनी थीम में जोड़ सकते हैं। # टॉप-मेनू li.menu-item a {रंग: #ff0000; } इस उदाहरण में, # शीर्ष मेनू अनियंत्रित सूची को निर्दिष्ट आईडी है जो हमारे नेविगेशन मेनू को प्रदर्शित करता है। अपनी थीम द्वारा उपयोग की गई आईडी का पता लगाने के लिए आपको निरीक्षण उपकरण का उपयोग करना होगा।

2. नेविगेशन मेन्यू बार का बैकग्राउंड कलर कैसे बदलें

सबसे पहले आपको उस सीएसएस आईडी या वर्ग को ढूंढना होगा जिसका उपयोग आपकी थीम कंटेनर के चारों ओर नेविगेशन मेनू के लिए करती है।

उसके बाद, आप नेविगेशन मेनू बार की पृष्ठभूमि का रंग बदलने के लिए निम्नलिखित कस्टम सीएसएस का उपयोग कर सकते हैं। .नेविगेशन-टॉप {पृष्ठभूमि-रंग: #000; } यह हमारी डेमो साइट पर ऐसा दिखता था।

3. सिंगल मेन्यू आइटम का बैकग्राउंड कलर कैसे बदलें

आपने देखा होगा कि कई वेबसाइटें अपने नेविगेशन मेनू में सबसे महत्वपूर्ण लिंक के लिए एक अलग पृष्ठभूमि रंग का उपयोग करती हैं। यह लिंक एक लॉगिन, पंजीकरण, संपर्क या खरीद बटन हो सकता है। इसे एक अलग रंग देकर, यह लिंक को और अधिक दृश्यमान बनाता है। ऐसा करने के लिए, हम मेनू आइटम में एक कस्टम सीएसएस वर्ग जोड़ने जा रहे हैं जिसे हम एक अलग पृष्ठभूमि रंग के साथ हाइलाइट करना चाहते हैं। के लिए जाओ सूरत »मेनू और स्क्रीन के ऊपरी दाएं कोने में स्क्रीन विकल्प बटन पर क्लिक करें। यह एक ड्रॉपडाउन मेनू खोलेगा जहाँ आपको “CSS Classes” विकल्प के बगल में स्थित बॉक्स को चेक करना होगा।

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

अब आप इस सीएसएस वर्ग का उपयोग इस विशेष मेनू आइटम को अलग तरह से स्टाइल करने के लिए कर सकते हैं। हमसे संपर्क करें {पृष्ठभूमि-रंग: #ff0099; सीमा-त्रिज्या: 5px; } यह हमारी परीक्षण साइट पर ऐसा दिखता है।

4. WordPress नेविगेशन मेनू में होवर प्रभाव जोड़ें

अपने मेनू आइटम को होवर पर रंग बदलना चाहते हैं? यह विशेष CSS ट्रिक आपके नेविगेशन मेनू को अधिक इंटरैक्टिव बनाती है। बस निम्नलिखित कस्टम सीएसएस को अपनी थीम में जोड़ें। # शीर्ष-मेनू li.menu-item a: होवर {पृष्ठभूमि-रंग: #fff; रंग: #666; सीमा-त्रिज्या: 5px; } ...

मूल रूप से 2021-02-24 08:55:37 पोस्ट किया गया।