कैसे plugins के बिना WordPress में सामाजिक मीडिया माउस को जोड़ने के लिए

बिना प्लगइन के अपने वर्डप्रेस साइट पर सोशल मीडिया आइकन जोड़ना चाहते हैं?

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

यदि आप कोई ऐसा व्यक्ति है जो पृष्ठ गति को गंभीरता से लेता है, तो आपको यह पसंद आएगा।

डैशिकन आधिकारिक वर्डप्रेस आइकन फ़ॉन्ट है। वे प्रत्येक वर्डप्रेस साइट व्यवस्थापक बैकएंड के बाएं साइडबार में दिखाई देते हैं।

हम इन आइकनों का उपयोग बाहरी आइकनों के बजाय करेंगे। यह ब्राउज़र को अतिरिक्त फ़ाइलों का अनुरोध करने से मुक्त करेगा।

बस इन चरणों का पालन करें:

चरण 1

साइडबार या पाद लेख में कस्टम HTML विजेट जोड़ें। आप डैशबोर्ड >>> सूरत >>> विजेट के तहत विजेट का प्रबंधन कर सकते हैं।

चरण 2

इस कोड को कंटेंट बॉक्स में पेस्ट करें


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

href आपके लिए सोशल पेज का लिंक है
aria- लेबल वह पाठ है जो लिंक का वर्णन करता है

तीसरा और सबसे महत्वपूर्ण एक वर्ग है = "डैशिकन्स डैशिकन्स-फेसबुक-एश"

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

इस भाग को उस स्थान से बदलें जिसे आप उपयोग करना चाहते हैं

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

चरण 3।

इस CSS को अपने चाइल्ड थीम Style.css फ़ाइल में या आप Customizer अतिरिक्त CSS विकल्प में जोड़ें

.सोशल-लिंक-कंटेनर {डिस्प्ले: फ्लेक्स; }। सोशल-लिंक-कंटेनर। सोशल-लिंक {पैडिंग: 3 पीएक्स; मार्जिन-राइट: 10px; } .dashicons {font-size: 30px; रंग: #fff; चौड़ाई: 40 पीएक्स; ऊंचाई: 40 पीएक्स; सीमा-त्रिज्या: 50%; प्रदर्शन: फ्लेक्स; औचित्य-सामग्री: केंद्र; संरेखित-आइटम: केंद्र; }

यह उपरोक्त कोड रंग को छोड़कर आइकन की सभी विशेषताओं को जोड़ देगा। माउस को रंग जोड़ने के लिए नीचे दिए गए कोड का उपयोग करें जो केवल तब दिखाई देगा।

.dashicons-facebook-alt {पृष्ठभूमि: # 1877F2; }। डेशिकोन्स-ट्विटर {बैकग्राउंड: # 1DA1F2; }

यदि आप अधिक आइकन जोड़ते हैं, तो आप अपनी कक्षा और उपरोक्त सीएसएस का उपयोग करके प्रत्येक आइकन के लिए एक अलग पृष्ठभूमि का रंग जोड़ सकते हैं।

एक साधारण हॉवर प्रभाव जोड़ना चाहते हैं? अपने सीएसएस में इसे जोड़ें यदि आप एक 'ग्रो इन' होवर प्रभाव दिखाना चाहते हैं

.dashicons: होवर {-वेबकैट-ट्रांसफॉर्म: स्केल (1.2); -ms- परिवर्तन: स्केल (1.2); रूपांतर: स्केल (1.2); }

इतना ही! अब वेबसाइट कैशे को क्लियर करें और अपने विजेट को चेक करें, यह इस तरह प्रदर्शित होगा

यदि आप ठीक से चरणों का पालन करते हैं, तो आप इसे काम कर लेंगे।
यदि नहीं, तो नीचे टिप्पणी करें, और मैं इसे हल करने में आपकी मदद कर सकता हूं।

एक टिप्पणी छोड़ें