यो सबैलाई हुन्छ।

तपाईंले आफूलाई मनपर्ने विषयवस्तु फेला पार्नुहुन्छ, तपाईंले यसलाई स्थापना गर्नुहुन्छ र केही महिना आफ्नो साइटको लुकको आनन्द लिन खर्च गर्नुहुन्छ। तर, केहि महिना पछि, विषयवस्तु बासी महसुस गर्न थाल्छ। थोरै बोरिंग।

एउटै समस्या हो, तपाईं केहि नयाँ खोजीमा केही घण्टा बिताउन चाहनुहुन्न। यदि तपाइँको विषयवस्तुमा अलिकति मसला थप्ने तरिका मात्र थियो भने, यसलाई फरक बनाउनको लागि अलिकति चमक।

निराशामा हात माथि उठाउनु अघि, म तपाइँलाई तपाइँको मसला बनाउनको लागि सजिलो तरिका देखाउछु। धेरै प्रयास बिना विषयवस्तु, र अनावश्यक छविहरू थप नगरी जुन तपाईंको साइटलाई सुस्त बनाउन सक्छ।

Dashicons प्रविष्ट गर्नुहोस्। Dashicons फन्ट आइकनहरू हुन् जुन WordPress 3.8 मा प्रस्तुत गरिएको थियो। तपाईंले आफ्नो ड्यासबोर्डमा लग इन गर्दा देख्नुहुने ती उत्कृष्ट र सुन्दर आइकनहरू हुन्। यदि तपाइँ तिनीहरूलाई तपाइँको विषयवस्तुमा पनि थप्न सक्नुहुन्छ भने यो राम्रो हुनेछैन?

ठीक छ, तपाइँ गर्न सक्नुहुन्छ र म तपाइँलाई कसरी देखाउन जाँदैछु।

तपाईँले कसरी Dashicons प्रयोग गर्न सक्नुहुन्छ? नेभिगेसन मेनु?

एक साधारण उदाहरणबाट सुरु गरौं। Dashicons संस्करण 3.8 देखि पहिले नै WordPress मा समावेश गरिएको छ तर तपाईंले अझै पनि तिनीहरूलाई आफ्नो साइटको अगाडिको छेउमा राम्रोसँग प्रदर्शन गर्नको लागि समावेश गर्न आवश्यक छ; त्यो हो, तपाईंको विषयवस्तु।

चरण 1: तपाईंको थिम Dashicons तयार पार्नुहोस्

तपाईंको थिम Dashicons तयार बनाउनको लागि पहिले आफ्नो functions.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' ); }

ठीक छ! अब तपाईंको विषयवस्तु Dashicons प्रयोग गर्न तयार छ।

चरण 3: मेनु वस्तुहरूमा Dashicons थप्दै

तपाईंको गृह लिङ्कको लागि Dashicon थपौं। Dashicons वेबसाइटमा जानुहोस् र तपाईंलाई मनपर्ने आइकन चयन गर्नुहोस्।

अपडेट गर्नुहोस्: Dashicons मूल रूपमा GitHub.io मा उपलब्ध थिए, तर तिनीहरू WordPress.org मा उपलब्ध गराइएका छन्।

चरण 4:

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

चरण 5:

आफ्नो WordPress ड्यासबोर्डमा फर्कनुहोस्, उपस्थिति > मा क्लिक गर्नुहोस्। ; मेनु र कोड टाँस्नुहोस् जहाँ यसले नेभिगेसन लेबल भन्छ।

यदि तपाईं अझै पनि शब्द देखाउन चाहनुहुन्छ भने, बन्द div कोष्ठक पछि टाइप गर्नुहोस्।

मा क्लिक गर्नुहोस्। बचत गर्नुहोस् र आफ्नो गृह पृष्ठ लोड गर्नुहोस्। तपाईंको गृह लिङ्कले अब राम्रो, कुरकुरा Dashicon प्रदर्शन गर्नुपर्छ।

तपाईं यो सबै नेभिगेसन मेनु वस्तुहरू वा घरको लागि मात्र गर्न सक्नुहुन्छ। मिल्दो आइकनहरूसँग माथिका चरणहरू दोहोर्याउनुहोस्। त्यो सजिलो थियो, सही?

तपाईले पोस्ट मेटामा Dashicons कसरी प्रयोग गर्नुहुन्छ?

तपाईँ एक कदम अगाडि जान सक्नुहुन्छ र आफ्नो पोस्ट मेटामा Dashicons थप्न सक्नुहुन्छ, वा अन्य शब्दहरूमा लेखकको अगाडि Dashicons थप्न सक्नुहुन्छ। नाम, मिति, वर्ग वा ट्याग; मा निर्भर गर्दछतपाईँको विषयवस्तु र यसले देखाउने जानकारी।

तपाईँले आफ्नो विषयवस्तुमा Dashicons लाई पङ्क्तिबद्ध गरिसक्नुभएको हुनाले, तपाईँले अब आफ्नो style.css फाइल खोल्नु हो (वा अनुकूलन CSS सम्पादक प्रयोग गर्नुहोस् जुन सधैं राम्रो विकल्प हो। तपाईंको विषयवस्तु अपडेट भएपछि परिवर्तनहरू नगुमाउनुहोस्!), मिल्दो चयनकर्ता फेला पार्नुहोस् र CSS कोड थप्नुहोस्।

मानौं तपाईं आफ्नो नाम वा आफ्नो लेखकको नामको अगाडि एउटा आइकन थप्न चाहनुहुन्छ।

चरण 1:

त्यसपछि यसमा क्लिक गर्नुहोस्, र यस पटक CSS प्रतिलिपि गर्नुहोस् चयन गर्नुहोस्। फेरि, यसले तपाईंलाई टाँस्न आवश्यक कोड सहितको पप-अप विन्डो दिनेछ।

चरण 3:

अब आफ्नो style.css खोल्नुहोस्। र सम्बन्धित चयनकर्ता फेला पार्नुहोस्, यस अवस्थामा - .entry-author। थपेर: पहिले र त्यसपछि तपाईंले Dashicons वेबसाइटबाट प्रतिलिपि गर्नुभएको CSS कोड टाँस्दै, लेखकको नामको अगाडि एउटा राम्रो आइकन हुनेछ। तपाईंले Dashicons फन्ट प्रयोग गरिरहनुभएको छ भनेर पनि निर्दिष्ट गर्न आवश्यक छ। परिमार्जित कोड यस्तो देखिन्छ:

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

अन्तिम परिणाम

त्यसो भए के के यो अन्तमा जस्तो देखिनेछ?

केही यस्तो छ:

तपाईले Dashicons प्रयोग गर्न सक्ने धेरै तरिकाहरू छन् – आफ्नो रचनात्मकतालाई समात्न दिनुहोस् र तपाईले के गर्न सक्नुहुन्छ हेर्नुहोस्।

यो सबैलाई सँगै राखेर

माथिका उदाहरणहरू बाहेक, तपाईंले आफ्नो ब्याकइन्डमा विभिन्न निर्दिष्ट गर्न Dashicons प्रयोग गर्न सक्नुहुन्छ।विभिन्न पोष्ट प्रकारहरूका लागि आइकनहरू, वा तपाईंले तिनीहरूलाई आफ्नो पोस्ट शीर्षक, विजेट शीर्षकहरूमा प्रयोग गर्न सक्नुहुन्छ, वा यदि तपाईं अनुकूल ल्यान्डिङ पृष्ठ सिर्जना गर्दै हुनुहुन्छ भने तपाईंले आफ्नो साइटका विभिन्न पृष्ठहरू बीच फरक गर्न सक्नुहुन्छ।

यहाँ केको आधारभूत उदाहरण छ। तपाईंले तिनीहरूलाई सिर्जना गर्न प्रयोग गर्न सक्नुहुन्छ: