कोड

कोड फ़ील्ड एक छोटे कोड संपादक को एक कस्टम विजेट में रखता है जिसे आप मास्टर ऐडऑन के साथ बनाते हैं विजेट बिल्डरसंपादकों ने एक स्निपेट पेस्ट किया, जैसे बैज एचटीएमएल एक भुगतान प्रदाता हाथ से बाहर, और क्षेत्र इसे लाइन नंबर और सिंटैक्स हाइलाइटिंग के साथ पठनीय रखता है यह मार्कअप के लिए क्षेत्र है जिसे गद्य के रूप में टाइप करने के बजाय चिपकाया जाना है।

कोड एक प्रो क्षेत्र है मुफ्त प्लगइन में एक सीमित विजेट बिल्डर शामिल है, और फ़ील्ड का पूरा सेट आता है मास्टर एडॉन्स प्रो.

कोड फ़ील्ड क्या करता है #

• एलिमेंटर में आपके विजेट के पैनल में एक कोड संपादक जोड़ता है, लाइन नंबर और हाइलाइटिंग के साथ।
• HTML और CSS से लेकर JSON, SVG और PHP तक, आपके द्वारा चुनी गई भाषा में हाइलाइट्स।
• जो कुछ भी चिपकाया गया था उसे पाठ के रूप में सहेजता है।
• जैसे टोकन के माध्यम से इसे प्रिंट करता है {{ badge_markup }}, वर्डप्रेस के अपने पोस्ट कंटेंट फ़िल्टर से साफ किया गया ताकि HTML रेंडर और स्क्रिप्ट टैग को हटा दिया जा सके।
• है ए raw दुर्लभ मामले के लिए फ़िल्टर करें जहां एक स्निपेट को अछूता बाहर जाना पड़ता है।

बिल्डर के लिए नया? पढ़ें विजेट बिल्डर अवलोकन सबसे पहले, फिर एक विजेट खुला के साथ वापस आओ।

इससे पहले कि आप शुरू करें #

• एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
• एलिमेंटर और मास्टर एडॉन्स प्रो के लिए मास्टर एडॉन्स, दोनों सक्रिय हैं स्थापना गाइड सेटअप को कवर करता है।
• विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण एक “ट्रस्ट बैजसेम्ब विजेट है: शीर्षक के लिए एक टेक्स्ट फ़ील्ड और एक कोड फ़ील्ड नामित badge_markup वह प्रदाता का बैज HTML लेता है।

कोड फ़ील्ड कैसे जोड़ें #

1. को जा मास्टर ऐडऑन > विजेट बिल्डर और अपना विजेट खोलें।
2. पर एक अनुभाग जोड़ें सामग्री टैब, उदाहरण के लिए “Badges”।
3. प्रकार code बाईं ओर फ़ील्ड खोज बॉक्स में।
4. खींचना कोड अनुभाग में इसकी सेटिंग्स खोलने के लिए मैदान पर पेंसिल पर क्लिक करें।

कोड फ़ील्ड विकल्पों की व्याख्या की गई #

• लेबलः एलिमेंटर में संपादक के ऊपर का पाठ, उदाहरण के लिए “बैज मार्कुपैग्मा।
• नाम: क्षेत्र की विशिष्ट आईडी और इसके टोकन का नाम उदाहरण के लिए, केवल अक्षरों, संख्याओं और अंडरस्कोर का उपयोग करें badge_markup.
• विवरण: एलिमेंटर में संपादक के तहत दिखाया गया एक संकेत इसका उपयोग यह कहने के लिए करें कि क्षेत्र क्या अपेक्षा करता है, जैसे कि “अपने भुगतान या समीक्षा प्रदाता द्वारा आपको दिए गए एचटीएमएल को पेस्ट करें।”
• भाषा: हाइलाइटिंग मोड सूची में एचटीएमएल, सीएसएस, एसएएसएस, एससीएसएस, जावास्क्रिप्ट, जेएसओएन, लेस, मार्कडाउन, पीएचपी, पायथन, मायएसक्यूएल, एसक्यूएल, एसवीजी, टेक्स्ट, ट्विग और टाइपस्क्रिप्ट है एचटीएमएल डिफ़ॉल्ट है।

भाषा केवल हाइलाइटिंग को बदलती है यह सीमित नहीं करता है कि एक संपादक क्या पेस्ट कर सकता है, और यह मूल्य मुद्रित करने के तरीके को नहीं बदलता है।

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

सामान्य सेटिंग्स के अंतर्गत आप यह भी पाएंगे लेबल दिखाएँ, विभाजक और शर्तोंिक, जो अन्य क्षेत्रों के समान ही काम करते हैं छोड़ चयनकर्ता खाली: चिपकाया गया स्निपेट सीएसएस मान नहीं है।

अपने टेम्पलेट में कोड प्रिंट करें #

टोकन को वहां रखें जहां स्निपेट को उतरना चाहिए, और इसे गार्ड करें ताकि एक खाली क्षेत्र पीछे कोई आवरण न छोड़ेः

<div class="tb">
  <p class="tb-heading">{{ tb_heading }}</p>
  {% if badge_markup %}
  <div class="tb-badges">{{ badge_markup }}</div>
  {% endif %}
</div>

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

टोकन क्या स्ट्रिप्स #

मूल्य उसी फ़िल्टर के माध्यम से जाता है जो वर्डप्रेस पोस्ट सामग्री के लिए उपयोग करता है पोस्ट में अनुमत टैग चिपकाया के रूप में बाहर आते हैंः div, span, a, img और बाकी स्क्रिप्ट टैग और आईफ्रेम हटा दिए जाते हैं।

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

कच्चा फिल्टर #

जोड़ना raw टोकन प्रिंट करने के लिए वास्तव में क्या चिपकाया गया था, स्क्रिप्ट और आईफ्रेम शामिल हैंः

{{ badge_markup|raw }}

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

टेम्पलेट इंजन भी स्वीकार करता है trim, upper और lower एक टोकन पर, जो कभी-कभी सादे पाठ के एक छोटे से अंश के लिए उपयोगी होते हैं।

एलिमेंटर में कोड नियंत्रण का उपयोग करें #

विजेट को किसी पृष्ठ पर जोड़ें, या यदि पृष्ठ पहले से ही खुला था तो संपादक को पुनः लोड करें फ़ील्ड आपके लेबल के नीचे एक डार्क एडिटर ब्लॉक के रूप में दिखाई देता है, साइड में लाइन नंबर के साथ स्निपेट चिपकाएं और जैसे ही आप क्लिक करें पूर्वावलोकन अपडेट करें।

संपादक एक छोटी खिड़की है, इसलिए इसके अंदर एक लंबा स्निपेट स्क्रॉल है चिपकाने के लिए ठीक है, पढ़ने के लिए कम; स्निपेट कहीं रूमियर लिखें यदि आप इसे हाथ से संपादित करने की योजना बनाते हैं।

यहां सामने के छोर पर तैयार विजेट है, जो तीन चिपकाया बैज ब्लॉक से बनाया गया हैः

सामान्य उपयोग के मामले #

• भुगतान, समीक्षा और ट्रस्ट बैज जो प्रदाता HTML के रूप में सौंपते हैं।
• स्कीमा या संरचित डेटा ब्लॉक एक संपादक को प्रति पृष्ठ पेस्ट करने की आवश्यकता होती है।
• मार्कअप के रूप में चिपकाए गए छोटे एसवीजी आइकन या लोगो।
• आपके विजेट की स्क्रिप्ट में एक छोटा सीएसएस या जेएसओएन स्निपेट पढ़ा जाता है।

कोड फ़ील्ड के साथ काम करने के लिए युक्तियाँ #

• विवरण में क्या पेस्ट करें कहें। संपादक एक खाली संपादक से यह नहीं बता सकते कि क्षेत्र क्या अपेक्षा करता है।
• टोकन को गार्ड करें {% if %}. एक अप्रयुक्त फ़ील्ड अन्यथा पृष्ठ पर एक खाली रैपर छोड़ देगा।
• एक बार वास्तविक प्रदाता स्निपेट का परीक्षण करें। इस तरह आप पता लगाते हैं कि कौन से हिस्से फ़िल्टर से बचे हैं।
• रखना raw विश्वसनीय संपादकों के लिए ही। सादा टोकन क्लाइंट साइटों के लिए सुरक्षित डिफ़ॉल्ट है।
• मार्कअप के बजाय स्वरूपित पाठ? का उपयोग करें WYSIWYG फ़ील्ड इसलिए संपादकों को कोड के बजाय एक दृश्य संपादक मिलता है।

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

एक कोड फ़ील्ड को सामग्री अनुभाग में छोड़ें, भाषा चुनें, एक विवरण लिखें जिसमें लिखा हो कि क्या पेस्ट करना है, और टोकन को एक के अंदर प्रिंट करें {% if %} गार्ड क्लाइंट साइटों के लिए सादा टोकन रखें और के लिए पहुंचें raw केवल विश्वसनीय संपादकों के साथ मार्कअप के बजाय समृद्ध पाठ के लिए, देखें WYSIWYG फ़ील्ड, और जाँच करें मूल्य निर्धारण प्रत्येक योजना में क्या शामिल है।