यह सभी के साथ होता है।

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

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

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

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

ठीक है, आप कर सकते हैं और मैं आपको दिखाने जा रहा हूं कि कैसे।

आप अपनी थीम में डैशिकॉन का उपयोग कैसे कर सकते हैं नेविगेशन मेनू?

चलिए एक साधारण उदाहरण से शुरू करते हैं। 3.8 संस्करण के बाद से डैशिकॉन पहले से ही वर्डप्रेस में शामिल हैं, लेकिन आपको अभी भी उन्हें अपनी साइट के फ्रंट एंड पर ठीक से प्रदर्शित करने के लिए शामिल करने की आवश्यकता है; वह है, आपकी थीम।

चरण 1: अपनी थीम डैशिकॉन तैयार करें

अपनी थीम डैशिकॉन तैयार करने के लिए सबसे पहले अपनी फंक्शन्स.php फ़ाइल खोलें (उपस्थिति> में पाई जाती है) ;संपादक - डिफ़ॉल्ट रूप से यह आपकी वर्तमान थीम की CSS फ़ाइल खोलेगा। आगे बढ़ें और खोजेंfunctions.php फ़ाइल और इसे संपादक में लोड करने के लिए उस पर क्लिक करें।)

चरण 2: स्क्रिप्ट को कतारबद्ध करें

नीचे तक स्क्रॉल करें और इन पंक्तियों को पेस्ट करें अंत में कोड की संख्या:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

ठीक है! अब आपकी थीम डैशिकॉन का उपयोग करने के लिए तैयार है।

चरण 3: मेनू आइटम में डैशिकॉन जोड़ना

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

चरण 4:

इच्छित आइकन पर क्लिक करें (इस मामले में मैंने होम आइकन का चयन किया है) और फिर कॉपी HTML पर क्लिक करें। यह आपको आवश्यक कोड के साथ एक पॉप-अप विंडो देगा।

चरण 5:

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

आप इसे सभी नेविगेशन मेनू आइटम या केवल घर के लिए कर सकते हैं। मिलान करने वाले आइकन के साथ उपरोक्त चरणों को दोहराएं। यह आसान था ना?

आप पोस्ट मेटा में डैशिकॉन का उपयोग कैसे करते हैं?

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

चूंकि आपने पहले से ही अपनी थीम में डैशिकॉन को कतारबद्ध कर रखा है, अब आपको केवल अपनी Style.css फ़ाइल को खोलना है (या कस्टम CSS संपादक का उपयोग करना है जो हमेशा एक बेहतर विकल्प होता है ताकि आप एक बार आपकी थीम अपडेट होने के बाद परिवर्तनों को खोना नहीं!), मेल खाने वाले चयनकर्ता को ढूंढें और सीएसएस कोड जोड़ें।

मान लें कि आप अपने नाम या अपने लेखक के नाम के सामने एक आइकन जोड़ना चाहते हैं।

चरण 1:

पहले हम वह आइकन चुनेंगे जो हम चाहते हैं।

चरण 2:

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

चरण 3:

अब अपना स्टाइल खोलें।css और इस मामले में संबंधित चयनकर्ता खोजें - .entry-author। डैशिकॉन्स वेबसाइट से आपके द्वारा कॉपी किए गए सीएसएस कोड को :before और फिर पेस्ट करके, लेखक के नाम के सामने एक अच्छा आइकन होगा। आपको यह भी निर्दिष्ट करने की आवश्यकता है कि आप डैशिकॉन्स फ़ॉन्ट का उपयोग कर रहे हैं। संशोधित कोड इस तरह दिखता है:

.entry-author:before { font-family: "dashicons"; content: "\f110"; }

चलिए थोड़ा स्टाइल भी जोड़ते हैं, और अब पूरा कोड इस तरह दिखता है:

.entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

अंतिम परिणाम

तो क्या क्या यह अंत में ऐसा दिखेगा?

कुछ इस तरह:

ऐसे कई तरीके हैं जिनसे आप डैशिकॉन का उपयोग कर सकते हैं - अपनी रचनात्मकता को पकड़ें और देखें कि आप क्या कर सकते हैं।

इन सभी को एक साथ रखकर

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

यहां इसका एक मूल उदाहरण दिया गया है कि क्या है आप उन्हें बनाने के लिए उपयोग कर सकते हैं: