द फ़ील्ड चुनें आपके विजेट के विकल्प पैनल में एक मूल ड्रॉपडाउन डालता है आप विकल्पों के एक निश्चित सेट को परिभाषित करते हैं, उपयोगकर्ता एक चुनता है, और आपका टेम्पलेट पिक पर प्रतिक्रिया करता है: एक अलग लेआउट वर्ग, मार्कअप का एक अलग ब्लॉक, एक अलग सीएसएस मूल्य मास्टर एडॉन्स के अंदर विजेट बिल्डर, चयन नामित वेरिएंट के एक मुट्ठी भर के साथ कुछ भी के लिए वर्कहॉर्स है लेआउट शैलियों, होवर प्रभाव, सॉर्ट आदेश, निर्णय की तरह।
विकल्प मानों का चयन करें के लिए प्राकृतिक ईंधन हैं शर्तों: अन्य नियंत्रण केवल तभी दिखाई दे सकते हैं जब कोई विशिष्ट विकल्प चुना जाता है। समान मान काम करते हैं ट्विग-सिंटैक्स टेम्पलेट इंजन जैसे चेक के साथ {% if layout == "card" %}, इसलिए एक ड्रॉपडाउन पैनल और मार्कअप दोनों को स्विच कर सकता है।
इस डॉक में प्रत्येक पैटर्न को एक विस्तार आकार देता है आपके टेम्पलेट को प्राप्त होने वाला मूल्य विकल्प की कुंजी है, आपके द्वारा चुना गया एक छोटा स्लग, मानव-पठनीय लेबल नहीं है जिसे उपयोगकर्ता देखता है कुंजी कक्षा के नाम और तुलना में जाती है लेबल पैनल में रहते हैं।
चयन फ़ील्ड क्या करता है #
- एक मानक ड्रॉपडाउन प्रदान करता है एलिमेंटर पैनल में, वही मूल चयन नियंत्रण कोर विजेट उपयोग करते हैं।
- एक निश्चित सेट से एक मान रखता है आप कुंजी और लेबल जोड़े के रूप में परिभाषित करते हैं।
- आपके टेम्पलेट को चयनित कुंजी फ़ीड करता है, संशोधक वर्गों के लिए तैयार या
{% if %}ब्लॉकों। - अन्य नियंत्रणों पर स्थितियाँ चलाता है, इसलिए “Boxed” को चुनने से एक बॉर्डर-रंग फ़ील्ड प्रकट हो सकता है जिसे “Minimal” छुपाता है।
- एक उत्तरदायी ध्वज का समर्थन करता है, उपयोगकर्ता को प्रति डिवाइस एक अलग विकल्प चुनने की अनुमति देना।
यदि आप विजेट बनाने में नए हैं, तो शुरुआत करें विजेट बिल्डर अवलोकन पहले।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक मूल्य निर्धारण तालिका विजेट है जिसमें एक “लेआउट स्टाइल” ड्रॉपडाउन है जो बॉक्सिंग, मिनिमल और आउटलाइन वेरिएंट की पेशकश करता है।
एक चयन फ़ील्ड कैसे जोड़ें #
विजेट बिल्डर संपादक में अपना विजेट खोलें और बाईं ओर फ़ील्ड पैनल के माध्यम से देखें। चयन करें अन्य पसंद क्षेत्रों के साथ बैठता है।
इसे नीचे एक अनुभाग में खींचें सामग्री या शैली टैब हमारे जैसा लेआउट स्विचर स्टाइल में है; एक सामग्री से संबंधित विकल्प, एक सॉर्ट ऑर्डर की तरह, सामग्री फिट बैठता है एक बार जब यह भूमि, बाईं ओर क्षेत्र के विकल्प खुलते हैं।
समझाए गए फ़ील्ड विकल्प चुनें #
- लेबलः एलिमेंटर में ड्रॉपडाउन के बगल में दिखाया गया पाठ, उदाहरण के लिए “LAyout Style”।
- नाम: क्षेत्र, अक्षरों, संख्याओं और केवल अंडरस्कोर के लिए विशिष्ट पहचानकर्ता आपका टेम्पलेट इस नाम को संदर्भित करता है, उदाहरण के लिए
layout_style. - विकल्प: स्वयं विकल्प, प्रत्येक एक कुंजी प्लस एक लेबल कुंजी वह है जो आपका टेम्पलेट प्राप्त करता है लेबल वह है जो उपयोगकर्ता पढ़ता है कुंजी को छोटा और सीएसएस-सुरक्षित रखेंः
boxed,minimal,outlined. - डिफ़ॉल्टः विजेट के पहले पेज पर ड्रॉप होने पर चुनी गई कुंजी इसे अपने सबसे अच्छे दिखने वाले संस्करण पर सेट करें।
- उत्तरदायी: डिवाइस आइकन जोड़ता है ताकि पिक प्रति ब्रेकपॉइंट भिन्न हो सके।
- विवरण, लेबल दिखाएँ, विभाजकः मानक प्रदर्शन सेटिंग्स, साथ ही फ़ील्ड दिखाने के लिए नीचे की शर्तें केवल तभी जब किसी अन्य नियंत्रण का एक निश्चित मान हो।
अपने टेम्पलेट से चुनें कनेक्ट करें #
चयन एक सादे टोकन के साथ अपना मान प्रिंट करता है। वह मान हमेशा होता है कुंजी, लेबल कभी नहीं। दो पैटर्न लगभग हर उपयोग को कवर करते हैं।
संशोधक वर्ग। कुंजी को सीधे क्लास विशेषता में प्रिंट करें और अपने सीएसएस टैब को बाकी काम करने देंः
<div class="pricing layout--{{ layout_style }}">
...
</div>“Boxed” रेंडर चुनना layout--boxedू ी है, और एक नियम जैसे .layout--boxed { border: 1px solid #e2e2e2; } लेता है तीन वेरिएंट तीन छोटे सीएसएस ब्लॉक बन जाते हैं एचटीएमएल कभी शाखाएं नहीं।
सशर्त मार्कअप। जब वेरिएंट को अलग-अलग एचटीएमएल की आवश्यकता होती है, न कि केवल अलग-अलग शैलियों की, तो कुंजी के खिलाफ तुलना करेंः
{% if layout_style == 'boxed' %}
<div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
<div class="pricing-outline"> ... </div>
{% else %}
<div class="pricing-plain"> ... </div>
{% endif %}यहां एक बात पर ध्यान दें: तुलना में कुंजी का उपयोग करना चाहिए। {% if layout_style == 'boxed' %} काम करता है, जबकि {% if layout_style == 'Boxed Layout' %} चुपचाप कभी मेल नहीं खाता है, और आपको इसके बारे में कोई चेतावनी नहीं मिलती है यदि कोई सशर्त आग से इनकार करता है, तो इससे पहले कि आप कुछ और संदेह करें, कुंजी वर्तनी की जांच करें।
एलिमेंट में सेलेक्ट कंट्रोल का उपयोग करें #
एलिमेंटर में एक पृष्ठ पर अपने कस्टम विजेट को छोड़ दें यदि पृष्ठ विजेट को सहेजने से पहले ही खुला था, तो पहले संपादक को फिर से लोड करें, क्योंकि एलिमेंटर पुराने नियंत्रण कॉन्फ़िगरेशन पर तब तक रहता है जब तक आप विजेट का चयन नहीं करते हैं और ड्रॉपडाउन आपके द्वारा सेट किए गए लेबल के तहत अपने पैनल में दिखाई देता है, डिफ़ॉल्ट विकल्प पूर्व-चयनित के साथ।
एक अलग विकल्प चुनें और पूर्वावलोकन तुरंत अपडेट हो जाता है संशोधक वर्ग बदलता है, आपका सीएसएस संस्करण किक करता है, और इस क्षेत्र पर वातानुकूलित कोई भी नियंत्रण मैच के लिए दिखाई देता है या गायब हो जाता है।
सामान्य उपयोग के मामले #
- लेआउट वेरिएंट जैसे कि एक विजेट से बॉक्सिंग, न्यूनतम और उल्लिखित कार्ड शैलियाँ।
- होवर और एनीमेशन प्रीसेट जहां प्रत्येक कुंजी अपने स्वयं के संक्रमण के साथ सीएसएस वर्ग में मैप करती है।
- क्रमबद्ध करें और विकल्पों को क्रमबद्ध करें सूची-शैली विजेट के लिए, नवीनतम प्रथम या वर्णानुक्रम में।
- शीर्षक टैग बीनने वाले वह एक सशर्त ब्लॉक के माध्यम से एक h2 को h3 से बदल देता है।
- हालत ड्राइवर वह चयनित कुंजी के आधार पर अन्य फ़ील्ड के पूरे समूह को दिखाता या छुपाता है।
क्षेत्र चुनें के साथ काम करने के लिए युक्तियाँ #
- कुंजी कोड के लिए हैं, लेबल लोगों के लिए हैं। स्लग का उपयोग करें जैसे
boxedकुंजी के रूप में और लेबल के लिए अनुकूल शब्दों को सहेजें। - चाबियाँ सीएसएस-सुरक्षित रखें। लोअरकेस अक्षर, अंक और हाइफ़न या अंडरस्कोर कक्षा के नामों में स्पष्ट रूप से मुद्रित होते हैं।
- कुंजी के विरुद्ध तुलना करें, लेबल कभी नहीं। यह सबसे आम कारण है कि सेलेक्ट कंडीशनल कभी मेल नहीं खाता।
- सशर्त पर संशोधक वर्गों को प्राथमिकता दें जब केवल स्टाइल बदल जाता है टेम्पलेट एक ब्लॉक रहता है और वेरिएंट सीएसएस में रहते हैं।
- शर्तों को चलाने के लिए चयन का उपयोग करें। स्विचर के साथ, यह अन्य फ़ील्ड को प्रकट करने या छिपाने के लिए सामान्य नियंत्रण है।
- एक समझदार डिफ़ॉल्ट सेट करें तो विजेट जानबूझकर उस पल दिखता है जब इसे गिरा दिया जाता है।
अक्सर पूछे जाने वाले प्रश्न #
मास्टर ऐडऑन विजेट बिल्डर में चयन फ़ील्ड क्या है?
चयन फ़ील्ड एक कस्टम एलिमेंटर विजेट में एक मूल ड्रॉपडाउन जोड़ता है आप विकल्पों को कुंजी और लेबल जोड़े के रूप में परिभाषित करते हैं, उपयोगकर्ता पैनल में एक चुनता है, और आपका टेम्पलेट चयनित कुंजी के माध्यम से प्राप्त करता है {{ field_name }} वर्ग नाम, सशर्त, या सीएसएस मूल्यों में उपयोग के लिए।
क्या टेम्पलेट को लेबल या कुंजी मिलती है?
कुंजी। यदि आपका विकल्प है boxed फिर “Boxed लेआउट” लेबल के साथ {{ layout_style }} प्रिंट boxed, और तुलनाएँ पसंद हैं {% if layout_style == 'boxed' %} उस कुंजी का उपयोग करना चाहिए लेबल केवल कभी भी एलिमेंट पैनल में दिखाई देता है।
मैं चयन के आधार पर विजेट का स्वरूप कैसे बदलूं?
उदाहरण के लिए, कुंजी को संशोधक वर्ग में प्रिंट करें class="layout--{{ layout_style }}", और सीएसएस टैब में प्रति संस्करण एक सीएसएस नियम लिखें। संरचनात्मक अंतरों के लिए, HTML को शाखा दें {% if %}, {% elseif %}, और {% else %} इसके बजाय ब्लॉक।
क्या कोई चयन अन्य फ़ील्ड दिखा या छिपा सकता है?
हाँ। प्रत्येक विजेट बिल्डर फ़ील्ड शर्तों का समर्थन करता है, और चयन सामान्य ड्राइवरों में से एक है। बॉर्डर-रंग फ़ील्ड को कंडीशन करें layout_style बराबरी boxed और यह केवल तभी प्रकट होता है जब वह लेआउट सक्रिय होता है।
क्या चयन प्रति डिवाइस बदल सकता है?
हाँ। रिस्पॉन्सिव विकल्प सक्षम करें और नियंत्रण एलिमेंटर में डिवाइस आइकन प्राप्त कर लेता है, ताकि डेस्कटॉप बॉक्सिंग लेआउट चला सके जबकि मोबाइल न्यूनतम पर वापस आ जाए।
सेलेक्ट और सेलेक्ट२ में क्या अंतर है?
चयन सादा मूल ड्रॉपडाउन है: छोटी सूची से एक चयन। चयन2 ड्रॉपडाउन के अंदर खोज जोड़ता है और एक वैकल्पिक एकाधिक मोड जो कुंजियों की एक सरणी लौटाता है लंबी सूचियों या बहु-चयन के लिए, चयन २ के लिए पहुंचें; तीन से छह वेरिएंट के लिए, सादा चयन हल्का है।
लपेटकर #
विजेट बिल्डर चयन फ़ील्ड नामित वेरिएंट को एक-क्लिक विकल्प में बदल देता है कुंजियाँ और लेबल परिभाषित करें, कुंजी को संशोधक वर्ग या ए में प्रिंट करें {% if %} ब्लॉक, और प्रत्येक लेआउट निर्णय एलिमेंटर पैनल में चला जाता है जब सूची लंबी हो जाती है या एक पिक पर्याप्त नहीं होती है, तो कदम उठाएं 2 फ़ील्ड चुनें. बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।
