पुनरावर्तक

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

पुनरावर्तक दोनों साथी प्रणालियों के साथ जोड़ी बनाता हैः शर्तों पैनल में नियंत्रण दिखाता या छुपाता है, और ट्विग-सिंटैक्स टेम्पलेट इंजन के साथ सामने के छोर पर अपनी पंक्तियों को प्रस्तुत करता है {% for item in my_repeater %} लूप और बिंदीदार टोकन जैसे {{ item.title }}। दोनों गाइड सेटअप और सीमाओं को कवर करते हैं।

पुनरावर्तक आपके HTML में टेम्पलेट लूप के साथ मिलकर काम करता है: a {% for %} ब्लॉक प्रति पंक्ति एक बार अपने मार्कअप प्रिंट करता है तीन आइटम तीन कार्ड प्रस्तुत करते हैं; पैनल में एक चौथा जोड़ें और एक चौथा कार्ड दिखाई देता है, कोई कोड नहीं बदलता है।

पुनरावर्तक फ़ील्ड क्या करता है #

एक पुनरावर्तक क्षेत्र आपके विजेट के विकल्प पैनल में एलिमेंटर के मानक पुनरावर्तक नियंत्रण को प्रस्तुत करता है जब कोई विजेट का चयन करता है, तो वे चार परिचित क्रियाओं के साथ बंधनेवाला पंक्तियों का ढेर देखते हैंः

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

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

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

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
• विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक रेस्तरां है “हस्ताक्षर व्यंजन” अनुभाग जो कार्ड के ३-कॉलम ग्रिड को प्रस्तुत करता है, प्रति पुनरावर्तक पंक्ति में एक कार्ड।

पुनरावर्तक फ़ील्ड कैसे जोड़ें #

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

पुनरावर्तक को इसके अंतर्गत एक अनुभाग में खींचें सामग्री टैब, जहां सामग्री को दोहराना संबंधित है एक बार जब यह भूमि, क्षेत्र के विकल्प बाईं ओर खुलते हैं, और यह वह जगह है जहां वास्तविक सेटअप होता है: उप-क्षेत्रों को परिभाषित करना प्रत्येक पंक्ति ले जाएगा।

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

• लेबलः एलिमेंटर में पंक्तियों के ऊपर दिखाया गया शीर्षक, उदाहरण के लिए “Signature Dishes”।
• नाम: पूरे पुनरावर्तक, अक्षरों, संख्याओं और अंडरस्कोर के लिए विशिष्ट पहचानकर्ता केवल यह नाम है जिसे आपका लूप संदर्भित करता है, उदाहरण के लिए signature_dishes.
• फ़ील्ड: उप-क्षेत्र प्रत्येक पंक्ति में शामिल हैं डिश उदाहरण में प्रति-आइटम सामग्री के प्रति टुकड़े में एक जोड़ें: एक डिश नाम टेक्स्ट फ़ील्ड, एक मूल्य टेक्स्ट फ़ील्ड, एक विवरण टेक्स्टएरिया, और एक टैग शैली चयन।
• शीर्षक क्षेत्र: कौन सा उप-क्षेत्र ढही हुई पंक्ति को लेबल करता है, जिसे इस प्रकार लिखा जाता है {{{ dish_name }}}। पहले उप-क्षेत्र में डिफ़ॉल्ट, जो आमतौर पर आप चाहते हैं।
• डिफ़ॉल्टः विजेट जिन पंक्तियों से शुरू होता है दो या तीन भरे हुए आइटम शिप करें ताकि विजेट पहली बूंद पर जीवित दिखे।
• बटन पाठः ऐड बटन पर लेबल, उदाहरण के लिए सामान्य “Add आइटम” के बजाय “Add डिश”।
• खाली रोकेंः उपयोगकर्ता को अंतिम शेष पंक्ति को हटाने से रोकता है।
• न्यूनतम/अधिकतम आइटम: कितनी कम या कितनी पंक्तियों की अनुमति है, इस पर वैकल्पिक सीमाएँ।

रिपीटर को लूप से अपने HTML से कनेक्ट करें #

यहां वह हिस्सा है जो हर एक-मूल्य क्षेत्र से अलग काम करता हैः पुनरावर्तक के पास कोई मैदान नहीं है {{shortcode}}। इसका मान पंक्तियों की एक सूची है, इसलिए आपका HTML दोहराए जाने वाले मार्कअप को एक में लपेटता है {% for %} ब्लॉक लूप के अंदर, प्रत्येक उप-क्षेत्र लूप चर पर उपलब्ध हैः

<div class="dish-grid">
  {% for dish in signature_dishes %}
  <article class="dish-card">
    <h3>{{ dish.dish_name }}</h3>
    <span class="price">{{ dish.dish_price }}</span>
    <p>{{ dish.dish_desc }}</p>
  </article>
  {% endfor %}
</div>

• signature_dishes पुनरावर्तक का नाम है।
• dish यह एक लूप वैरिएबल है जिसे आप मौके पर ही आविष्कार करते हैं; इसे कुछ भी कहें।
• {{ dish.dish_name }} उस पंक्ति के डिश नाम को प्रिंट करता है प्रत्येक उप-क्षेत्र उसी तरह काम करता हैः {{ dish.<sub_field_name> }}.
• बीच सब कुछ {% for %} और {% endfor %} प्रति पंक्ति एक बार प्रिंट करता है, क्रम में पंक्तियाँ पैनल में बैठती हैं।

लूप के अंदर वैकल्पिक फ़ील्ड #

किसी भी वैकल्पिक चीज़ को a में लपेटें {% if %} ब्लॉक तो खाली फ़ील्ड आवारा मार्कअप को पीछे न छोड़ें डिश उदाहरण में, प्रत्येक कार्ड में एक वैकल्पिक टैग बैज होता हैः

{% if dish.tag_text %}
<span class="tag tag--{{ dish.tag_style }}">{{ dish.tag_text }}</span>
{% endif %}

खाली टैग टेक्स्ट वाली पंक्ति में कोई बैज नहीं होता। द {% if %} ब्लॉक भी तुलनाओं को स्वीकार करता है जैसे {% if dish.tag_style == 'spicy' %} जब आपको मार्कअप की आवश्यकता होती है जो प्रति मान बदलता है।

मीडिया और लिंक उप-क्षेत्र #

एक छवि उप-फ़ील्ड अपना URL सीधे प्रिंट करता है, जैसे कि <img src="{{ dish.photo }}">और एक यूआरएल उप-क्षेत्र उसी तरह अपने पते को उजागर करता है जब आपको उनकी आवश्यकता होती है तो नेस्टेड गुण डॉट नोटेशन के साथ उपलब्ध होते हैं।

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

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

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

क्योंकि लूप हर पंक्ति को प्रिंट करता है, लेआउट सामग्री के साथ बढ़ता है हमारे ३-कॉलम डिश ग्रिड में, पहले तीन कार्ड एक पंक्ति भरते हैं; एक चौथा डिश नीचे एक दूसरी पंक्ति शुरू करता है, स्वचालित रूप से, क्योंकि विजेट का सीएसएस ग्रिड लपेटता है।

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

• कार्ड ग्रिड ine सेवाएँ, सुविधाएँ, मूल्य निर्धारण स्तर, व्यंजन, या टीम के सदस्य, प्रति कार्ड एक पंक्ति।
• मेनू और मूल्य सूची रेस्तरां, सैलून और जिम जहां आइटम साप्ताहिक रूप से बदलते हैं।
• लोगो की दीवारें और ग्राहक सूचियाँ प्रति पंक्ति एक छवि उप-क्षेत्र।
• अक्सर पूछे जाने वाले प्रश्न और अकॉर्डियन अनुभाग प्रति पंक्ति एक प्रश्न पाठ फ़ील्ड और एक उत्तर पाठ क्षेत्र है।
• समयसीमा और प्रक्रिया चरण क्रमबद्ध पंक्तियाँ जिन्हें उपयोगकर्ता क्रम में खींच सकता है।

पुनरावर्तक क्षेत्र के साथ काम करने के लिए युक्तियाँ #

• लूप कनेक्शन है। नहीं है {{repeater_name}} स्वयं प्रिंट करने के लिए शॉर्टकोड; पुनरावर्तक केवल अंदर ही समझ में आता है {% for %}…{% endfor %}.
• वास्तविक डिफ़ॉल्ट भेजें। दो या तीन भरी हुई पंक्तियाँ विजेट को गिराए जाने के क्षण को प्रस्तुत करने योग्य बनाती हैं, और वे प्रत्येक फ़ील्ड की अपेक्षा के उदाहरण के रूप में दोगुनी हो जाती हैं।
• शीर्षक फ़ील्ड सेट करें। “Margherita del Forno” लेबल वाली संक्षिप्त पंक्तियों को “Item” लेबल वाली तीन पंक्तियों की तुलना में प्रबंधित करना कहीं अधिक आसान है।
• वैकल्पिक फ़ील्ड को गार्ड करें {% if %}. खाली स्पैन और खाली रैपर तब तक अदृश्य रहते हैं जब तक वे आपकी दूरी को तोड़ नहीं देते।
• सीएसएस को पंक्ति गणना को संभालने दें। के साथ एक ग्रिड repeat(3, 1fr) अतिरिक्त वस्तुओं को अपने आप नई पंक्तियों में लपेटता है; लूप सिर्फ कार्ड प्रिंट करता है।
• उप-क्षेत्रों का नाम स्पष्ट रूप से बताएं। {{ dish.dish_price }} से बेहतर टेम्पलेट में पढ़ता है {{ dish.field_2 }}, आपके लिए और विजेट विरासत में मिले किसी भी व्यक्ति के लिए।

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

लपेटकर #

विजेट बिल्डर रिपीटर फ़ील्ड वह है जो एक निश्चित लेआउट को जीवित लेआउट में बदल देता है: उप-फ़ील्ड को परिभाषित करें, उन्हें एक में प्रिंट करें {% for %} लूप, और उसके बाद प्रत्येक सामग्री निर्णय एलिमेंटर पैनल में होता है: एक कार्ड जोड़ें, इसे जगह में खींचें, इसे अगले सीज़न में हटा दें इसे इसके साथ जोड़ें टाइपोग्राफी क्षेत्र संपादक-नियंत्रित फ़ॉन्ट के लिए और सीमा क्षेत्र कार्ड स्टाइल के लिए, और एक एकल विजेट पृष्ठ के एक पूरे खंड को कवर करता है बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।