मुखपृष्ठ » वर्डप्रेस » कस्टम सामाजिक शेयरिंग प्रतीक के साथ वर्डप्रेस गति अनुकूलन
कस्टम सामाजिक शेयरिंग प्रतीक के साथ वर्डप्रेस गति अनुकूलन
यह एक आसान काम लग सकता है लेकिन वर्डप्रेस साइट पर अच्छी तरह से व्यवहार करने वाले सामाजिक साझाकरण बटन को जोड़ना परेशानी का कारण हो सकता है। जब मैं अच्छी तरह से व्यवहार करने के लिए कहता हूं तो मेरा मतलब है कि सरल, हल्के, संसाधन के अनुकूल, तेज - अधिकांश सामाजिक साझाकरण प्लगइन्स ऐसे नहीं हैं। वे पागल जैसे संसाधनों को खा जाते हैं, और कोई क्यों सिर्फ कुछ आइकन प्रदर्शित करने के लिए 25-35% तक प्लगइन लोड समय बढ़ाना चाहेगा उनकी साइट पर?
अच्छी खबर यह है कि इस कार्य को पूरा करने के लिए आपको एक प्लगइन की आवश्यकता नहीं है। इस ट्यूटोरियल में, मैं आपको दिखाता हूँ कि आप आसानी से कैसे कर सकते हैं कस्टम सामाजिक साझाकरण बटन जोड़ें अपने वर्डप्रेस साइट पर पदों के अंत के साथ कोड की कुछ पंक्तियाँ.
चरण 1: सामाजिक साझाकरण बटन उत्पन्न करें
हम साझाकरण आइकनों को जनरेट करने के लिए सरल और आसान वेब टूल का उपयोग करेंगे। इस ऐप का मुख्य लाभ यह है कि यह जो बटन उत्पन्न करता है वह फ्रंटएंड पर चलता है, इसलिए वे आपके सर्वर पर बोझ नहीं डालेंगे और आप अपने उपयोगकर्ताओं की गतिविधियों को निजी भी रख सकते हैं.
अपने कस्टम बटन उत्पन्न करने के लिए, यहां जाएं और दबाएं शुरू. 6 अलग बटन शैलियों में से 1 चुनें। क्लिक करें आगामी और टिक करें सामाजिक नेटवर्क आप अपनी साइट में जोड़ना चाहते हैं। जब आप समाप्त कर लेंगे, तो आपको अपनी वेबसाइट की जानकारी भरनी होगी.
इस स्क्रीन पर (नीचे), आपको दो विकल्प मिलेंगे: 'नो जावास्क्रिप्ट' तथा 'JavaScript'. टिकटिक जावास्क्रिप्ट, चूंकि यह ब्राउज़र को गतिशील रूप से URL का पता लगाने में सक्षम करेगा इसलिए आपके आगंतुक प्रत्येक पोस्ट को व्यक्तिगत रूप से साझा कर पाएंगे न कि केवल पेज का URL.
अंत में लाइव पूर्वावलोकन पर एक नज़र डालें, चुने हुए आइकन सेट को डाउनलोड करें, और आपके द्वारा उत्पन्न कोड को पकड़ो.
चरण 2: एक बाल थीम बनाएं
अब आपको अपनी साइट पर जनरेट किए गए आइकन और कोड को जोड़ना होगा। सबसे पहले आपको एक बाल विषय बनाने की आवश्यकता होगी.
आप हमारे ट्यूटोरियल की सहायता से आसानी से WP चाइल्ड थीम बना सकते हैं, या आप इस WP कोडेक्स लेख के चरणों का पालन कर सकते हैं। यदि आपके पास पहले से ही एक है, तो आप चरण 3 पर कूद सकते हैं.
बच्चा विषय उस विषय से संबंधित होता है जिसका आप वर्तमान में उपयोग करते हैं - कुछ उसी तरह से जैसे कोई बच्चा अपने माता-पिता से संबंधित होता है। यह मूल विषय से सब कुछ (शैली और कार्यक्षमता) विरासत में मिला है पर तुम कर सकते हो अतिरिक्त कार्यक्षमता जोड़ें यह करने के लिए.
हमारे मामले में अतिरिक्त कार्यक्षमता कस्टम सामाजिक साझाकरण बटन होगी.
चरण 3: एक कस्टम फ़ंक्शन बनाएं जो आइकन प्रदर्शित करता है
हम चाइल्ड थीम के फंक्शन्स.php फाइल में एक कस्टम फंक्शन जोड़ेंगे.
इस फ़ंक्शन की सहायता से आप कस्टम एक्शन हुक का उपयोग करके अपनी साइट पर जहां भी चाहें सामाजिक चिह्न जोड़ पाएंगे। यदि आपके बच्चे के विषय में फ़ंक्शंस नहीं हैं। अभी तक फ़ाइल नहीं है, तो अपने चाइल्ड थीम के रूट फ़ोल्डर में नाम फ़ंक्शंस के साथ एक खाली टेक्स्ट फ़ाइल बनाएं, और इसके एक्सटेंशन को .php में बदलें.
इस रिक्त फ़ाइल में कोड की निम्न पंक्ति डालें:
आपका कब functions.php फ़ाइल की स्थापना निम्नलिखित कोड स्निपेट को इसमें जोड़ने के लिए की गई है:
/ * * कस्टम सामाजिक साझाकरण आइकन जोड़ता है * / फ़ंक्शन add_social_sharing () ?>
इस घोषणा पत्र को बाँट दो
आखिरकार HTML टिप्पणी की लाइन हटाएं ऊपर कोड स्निपेट से और इसे HTML कोड से बदलें आप सोशल शेयरिंग बटन जेनरेटर के साथ चरण 1 में उत्पन्न हुए.
चरण 4: उपयुक्त टेम्पलेट फ़ाइल को बाल थीम फ़ोल्डर में कॉपी करें
डिफ़ॉल्ट रूप से, एकल पोस्ट को एक टेम्पलेट फ़ाइल द्वारा शासित किया जाता है single.php. कभी-कभी - विशेष रूप से अधिक आधुनिक विषयों में - की संरचना single.php अधिक जटिल है, क्योंकि यह अतिरिक्त टेम्पलेट फ़ाइलों को भी लोड करता है। इस चरण में हमें उपयुक्त टेम्पलेट फ़ाइल खोजने की आवश्यकता है जहां हम बाद में आइकन जोड़ सकते हैं.
सामाजिक बटन के लिए सही स्थान का पता लगाने के लिए हमें उस टेम्पलेट फ़ाइल को खोजने की आवश्यकता है जो फ़ंक्शन में एकल पोस्ट की सामग्री लोड होती है.
के तहत WordPress व्यवस्थापक डैशबोर्ड में विषय संपादक खोलें सूरत> संपादक. ऊपरी दाएं कोने पर आपको एक ड्रॉपडाउन सूची मिलती है, जहां आप अपने मूल विषय का चयन कर सकते हैं। ड्रॉपडाउन के नीचे आप उन सभी टेम्प्लेट फ़ाइलों को देख सकते हैं जिनमें आपके मूल विषय हैं। नीचे स्क्रॉल करें जब तक आप पाते हैं सिंगल पोस्ट टेम्पलेट (single.php कहा जाता है) और इसे खोलें.
यदि मूल विषय का उपयोग करता है get_template_part () में WP फ़ंक्शन single.php फ़ाइल जिसका अर्थ है कि यह एकल पोस्ट की सामग्री को लोड करने के लिए एक अतिरिक्त टेम्पलेट फ़ाइल का उपयोग करता है.
पहले आपको यह पता लगाना होगा कि यह कौन सा है। अतिरिक्त टेम्पलेट फ़ाइल का नाम पहले पैरामीटर है get_template_part () समारोह.
पहला पैरामीटर है 'सामग्री' जिसका अर्थ है कि हम नामक टेम्प्लेट फ़ाइल की तलाश करते हैं content.php. आपको इस फाइल को पेरेंट थीम रूट फोल्डर से चाइल्ड थीम रूट फोल्डर में कॉपी करना होगा ताकि इसे संशोधित किया जा सके.
चरण 5: एक्शन हुक को राइट टेम्प्लेट फ़ाइल में जोड़ें
हमने एक फंक्शन बनाया जिसका नाम है add_social_sharing () चरण 3 में, और हमने इसे एक कस्टम एक्शन हुक के साथ जोड़ा custom_social_share. अब हमें इस हुक को उस स्थान पर जोड़ना होगा जहां हम चाहते हैं कि फ़ंक्शन निष्पादित हो.
यहाँ कोड स्निपेट है जिसे आपको सही जगह पर डालना होगा:
अगला, चलो सही जगह पाते हैं.
एक कोड संपादक में या वर्डप्रेस व्यवस्थापक डैशबोर्ड के थीम संपादक के अंदर चरण 4 में अपने बच्चे के विषय में आपके द्वारा जोड़ी गई टेम्पलेट फ़ाइल खोलें, और इसे देखें सामग्री() समारोह.
जांच करें कि क्या ए wp_link_pages () के ठीक बाद का कार्य सामग्री() समारोह। यदि है, तो उसके बाद का कोड स्निपेट ऊपर आता है; अन्यथा यह इस प्रकार है सामग्री() समारोह.
चरण 6: सीएसएस कोड को बाल थीम में जोड़ें
को खोलो style.css आपके बच्चे के विषय की फाइल या तो आपके कोड संपादक में या WordPress व्यवस्थापक डैशबोर्ड के थीम संपादक में, आपके द्वारा चरण 1 में उत्पन्न सीएसएस कोड को कॉपी करें, इसे फ़ाइल के अंत में पेस्ट करें, और इसे सहेजें.
हम प्रत्येक थीम में सामाजिक साझाकरण आइकन को ठीक से प्रदर्शित करने के लिए CSS फ़ाइल में दो अतिरिक्त लाइनें जोड़ेंगे। निम्नलिखित कोड स्निपेट को कॉपी और पेस्ट करें style.css फ़ाइल:
चरण 7: सोशल मीडिया आइकन सेट को सर्वर पर अपलोड करें
आपके द्वारा चुने गए सोशल मीडिया आइकन को अपने बच्चे के थीम फ़ोल्डर में चरण 1 में अपलोड करें। एफ़टीपी के माध्यम से अपने सर्वर को कनेक्ट करें, नामक एक नया फ़ोल्डर बनाएं इमेजिस अपने चाइल्ड थीम फोल्डर (/ wp-content / themes / your-child-theme / images) की जड़ के अंदर और यहां दिए गए आइकन को अपलोड करें.
हम फ़ोल्डर का नाम देते हैं इमेजिस क्योंकि यह छवि फ़ोल्डर का साधारण नाम है साधारण शेयरिंग बटन जेनरेटर का उपयोग करता है.
चरण 8: चिह्न फ़ाइलों के पथ की जाँच करें
आपके द्वारा चरण 7 में सोशल मीडिया आइकन को अपने सर्वर पर अपलोड करने के बाद, यह सुनिश्चित करने के लिए आइकन फ़ाइलों के पथ की जांच करना महत्वपूर्ण है कि उन्हें लोड किया जाएगा.
एक छवि फ़ाइल का मार्ग सर्वर पर इसके स्थान के बारे में ब्राउज़र को संकेत देता है। चलो अंदर की छवि पथ की जाँच करें functions.php बच्चे विषय की फाइल। फ़ाइल को अपने कोड संपादक में खोलें, और नेविगेट करें add_social_sharing () वह कार्य जहां आपको सरल साझाकरण बटन जेनरेटर के साथ उत्पन्न HTML कोड को जांचना होगा.
HTML कोड में आपको एक एक के साथ टैग src प्रत्येक आइकन के लिए विशेषता। अगर प्रत्येक की जाँच करें src विशेषताएँ उस सटीक स्थान की ओर इशारा करती हैं जहाँ आपका आइकन सेट चरण 7 में अपलोड किया गया था.
सरल शेयरिंग बटन जेनरेटर के सापेक्ष पथ जोड़ता है फ़ाइलें। कभी कभी यदि आप किसी रिश्तेदार पथ का उपयोग करते हैं तो ब्राउज़र छवियों को प्रस्तुत नहीं कर सकता है, तो यह एक अच्छा विचार है इसके बजाय पूर्ण पथ का उपयोग करें. इस तरह से आपके विज़िटर द्वारा उपयोग किया जाने वाला प्रत्येक ब्राउज़र आवश्यक आइकन फ़ाइलों के स्थान के बारे में निश्चित रूप से मृत हो सकता है.
जनरेटर द्वारा जोड़ा गया सापेक्ष छवि पथ कुछ इस तरह दिखता है:
चलो बदलते हैं src निरपेक्ष पथ के लिए प्रत्येक आइकन की विशेषता जिसका अर्थ है कि इसमें फ़ाइल का पूरा URL शामिल होगा.
ऊपर का URL पथ इस तरह दिखाई देगा:
चरण 9: संशोधित फ़ाइलें अपलोड करें और बाल थीम को सक्रिय करें
अपने सर्वर को FTP के माध्यम से कनेक्ट करें और इस ट्यूटोरियल में बनाई गई सभी फाइलें अपलोड करें जिन्हें आपने अभी तक अपलोड नहीं किया है: द functions.php, style.css, और उपयुक्त टेम्पलेट फ़ाइल (इस ट्यूटोरियल में या तो single.php या content.php).
अंत में WP व्यवस्थापक डैशबोर्ड में बच्चे के विषय को सक्रिय करें सूरत> थीम्स मेन्यू.
अब आप अपने सुपर-लाइटवेट, संसाधन-बचत, अनुकूलित सामाजिक साझाकरण आइकन के साथ तैयार हैं। आप ऑनलाइन जा सकते हैं और इसे अपनी साइट पर लाइव देख सकते हैं.
निष्कर्ष
इस ट्यूटोरियल में मैंने आपको दिखाया कि कस्टम सामाजिक साझाकरण बटन को एकल पोस्ट के अंत में कैसे जोड़ा जाए। आपके द्वारा बनाए गए एक्शन हुक की सहायता से आप अपनी वेबसाइट के किसी भी अन्य स्थान पर साझाकरण आइकन जोड़ सकते हैं.
चरण 5 में उपयोग किए गए कोड को उस स्थान पर जोड़ें जहाँ आप बटन प्रदर्शित करना चाहते हैं:
यदि आप आइकन को कहीं और रखना चाहते हैं तो आपको सही टेम्प्लेट फ़ाइल ढूंढनी होगी। सिंगल पेजों को एक टेम्प्लेट फ़ाइल द्वारा शासित किया जाता है page.php, जबकि मीडिया अटैचमेंट जैसे इमेजेस लोड होती हैं attachment.php.
यदि आप अपनी वेबसाइट पर एक अलग स्थान पर सामाजिक साझाकरण बटन प्रदर्शित करना चाहते हैं, तो आप इसे खोजने के लिए वर्डप्रेस टेम्पलेट पदानुक्रम का उपयोग कर सकते हैं.
