एक प्लगइन के बिना एक कस्टम ट्विटर विजेट बनाओ

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


  • नवीनतम ट्वीट खींचने के लिए आवश्यक HTML और जावास्क्रिप्ट कोड
  • HTML मार्कअप और संबंधित सीएसएस चयनकर्ताओं का अवलोकन
  • कस्टम-स्टाइल ट्विटर विजेट के दो उदाहरण मैंने स्वयं उपयोग किए हैं

बाकी ट्यूटोरियल देखने के लिए आगे पढ़ें …

HTML और जावास्क्रिप्ट

ट्विटर इस कोड को अपनी साइट पर प्रदान करता था, लेकिन किसी कारण से उन्होंने इसे इनके पक्ष में हटा दिया बहुत कम लचीले विजेट. आपको कोड के दो टुकड़े चाहिए होंगे.

सबसे पहले, निम्नलिखित कोड रखें जहाँ आप सूची दिखाना चाहते हैं:

  • ट्विटर फीड लोडिंग

ध्यान दें:

  • ट्विटर फीड लोडिंग
  • ट्विटर द्वारा प्रदान किए गए मूल कोड का हिस्सा नहीं है, लेकिन यह HTML को वैध बनाने के लिए आवश्यक है। फ़ीड लोड होने के दौरान यह एक उपयोगी संदेश भी दे सकता है, क्योंकि यह धीमी गति से कुछ सेकंड ले सकता है.

    दूसरा, आपको जावास्क्रिप्ट की निम्नलिखित पंक्तियों को रखना होगा संभव के रूप में टैग के करीब.

    वर्तमान में मेरे पास Google Analytics कोड के ठीक ऊपर है। आपको जावास्क्रिप्ट की इन पंक्तियों को पेज पर यथासंभव कम रखना चाहिए क्योंकि इस घटना में कि ट्विटर लोड नहीं करता है, उस कोड के नीचे सब कुछ लटका रहेगा (यदि यह पहले से ही नीचे है तो बहुत बड़ी बात नहीं है).

    HTML मार्कअप और सीएसएस चयनकर्ताओं का अवलोकन

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

    • #Witter_update_list – संपूर्ण सूची का चयन करता है
    • #Witter_update_list li – व्यक्तिगत सूची आइटम चुनें
    • #Witter_update_list ली स्पैन – सूची आइटम के “ट्वीट” भाग का चयन करता है, समय से पहले लिंक का नहीं
    • #Witter_update_list li span – सूची आइटम के “ट्वीट” भाग के भीतर लिंक का चयन करता है
    • #Witter_update_list [एक शैली ="फ़ॉन्ट-आकार: 85%;"] – “कुछ समय पहले” लिंक का चयन, कुछ हद तक हैक करने के तरीके में (नीचे नोट देखें).

    ध्यान दें: चूंकि समय से पहले लिंक में एक इनलाइन शैली होती है जो 85% पर फ़ॉन्ट आकार सेट करती है, इसलिए कोड के हैकी टुकड़े के बिना इसे ओवरराइड करना कुछ कठिन हो जाता है। मैंने इसका उपयोग फ़ॉन्ट आकार को शेष सूची के समान करने से पहले किया है:

    #Witter_update_list [एक शैली ="फ़ॉन्ट-आकार: 85%;"] {फ़ॉन्ट-आकार: 1em; महत्वपूर्ण; }

    संभवतः “महत्वपूर्ण” भाग के कारण प्रारंभिक संस्करणों IE में काम नहीं करता है। आप प्रदर्शन का उपयोग भी कर सकते हैं: ब्लॉक; उस लिंक को अगली पंक्ति में ले जाने के लिए.

    लाइव उदाहरण

    एक जीवंत उदाहरण के लिए, पाद लेख देखें थीम लैब. या यदि आप इसे अपने फ़ीड रीडर या अनधिकृत स्क्रैपर साइट पर पढ़ रहे हैं, तो नीचे दिए गए स्क्रीनशॉट को देखें.

    थीम लैब ट्विटर फीड

    यहाँ सूची के लिए मेरे द्वारा उपयोग किया गया कोड है:

    #Witter_update_list {
    फ़ॉन्ट-आकार: 13 पीएक्स;
    लाइन-ऊँचाई: 21 पीएक्स;
    सूची-शैली: कोई नहीं;
    }
    #Witter_update_list ली {
    पृष्ठभूमि: url (‘छवियां / ट्विटर-डिवाइडर.गिफ़’) नीचे बाईं ओर रिपीट-एक्स;
    पैडिंग-बॉटम: 7 पीएक्स;
    मार्जिन-नीचे: 9px;
    }
    #Witter_update_list स्पैन, #Witter_update_list स्पैन {
    रंग: # गुलाब;
    पाठ-सजावट: कोई नहीं;
    }
    #Witter_update_list {
    रंग: # 6f7276;
    }

    • पहली पंक्ति पूरी सूची का चयन करती है। यह फ़ॉन्ट आकार, लाइन ऊंचाई सेट करता है, और यह सुनिश्चित करता है कि कोई बुलेट पॉइंट दिखाई न दें.
    • दूसरी सूची विभक्त के एक प्रकार के रूप में प्रत्येक सूची आइटम के नीचे एक छोटी 2 × 1 छवि दोहराती है। पेडिंग ट्वीटर और डिवाइडर के ऊपरी किनारे के बीच की जगह को सेट करता है। मार्जिन डिवाइडर के अगले किनारे और अगले ट्वीट के बीच की जगह तय करता है.
    • तीसरी पंक्ति लिंक सहित ट्वीट का रंग निर्धारित करती है, और यह सुनिश्चित करती है कि कोई भी रेखा नीचे के लिंक को न दिखाए.
    • अंतिम पंक्ति “समय पहले” लिंक का रंग निर्धारित करती है.

    और बस! अगर मुझे एक चीज़ बदलनी है, तो मैं किसी भी तरह से इन-ट्वीट लिंक को अलग नहीं कर सकता हूं, और शायद लिंक पर होवर प्रभाव भी जोड़ सकता हूं.

    यह किसी भी साइट पर इस्तेमाल किया जा सकता है

    अन्य सभी के विपरीत बिना प्लगइन के XYZ कैसे करें इस ट्यूटोरियल में उपयोग किए गए कोई वास्तविक वर्डप्रेस कोड नहीं है.

    चूंकि यह कोई वर्डप्रेस कोड का उपयोग नहीं करता है, यह इसके तहत दायर नहीं किया गया है वर्डप्रेस ट्यूटोरियल संग्रह। यह किसी भी तरह की साइट पर बहुत अधिक उपयोग किया जा सकता है, यह मानकर कि आप HTML स्रोत और CSS संपादित कर सकते हैं.

    यदि आप इसे वर्डप्रेस के भीतर उपयोग करना चाहते हैं, तो मैं आपकी साइट के फ़ुटवेयर में जावास्क्रिप्ट की दो पंक्तियों को सम्मिलित करने के लिए अपनी थीम फ़ाइलों को मैन्युअल रूप से संपादित करने का सुझाव दूंगा, या यहां तक ​​कि इसे अपने wp_footer () हुक में डाल दूंगा.

    विजेट के लिए के रूप में, आप या तो एक पाठ विजेट के अंदर कोड पेस्ट कर सकते हैं या मैन्युअल रूप से इसे अपने साइडबार (या जहां भी) में कोड कर सकते हैं.

    निष्कर्ष

    आशा है कि आप सभी को ट्यूटोरियल पसंद आया होगा, मुझे आपके विचार टिप्पणियों में सुनना अच्छा लगेगा। यदि आपके पास त्वरित वर्डप्रेस या सीएसएस युक्तियों के लिए कोई अनुरोध है, तो मुझे सूचित करने के लिए स्वतंत्र महसूस करें। यह थीम लैब में भविष्य के ट्यूटोरियल मंगलवार पोस्ट में चित्रित किया जा सकता है!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map