الجلاد

يضيف حقل Switcher مفتاح تشغيل/إيقاف إلى عنصر واجهة مستخدم مخصص تقوم بإنشائه باستخدام الإضافات الرئيسية منشئ القطعة. إنها الطريقة القياسية لجعل جزء من عنصر واجهة المستخدم اختياريًا: شارة، وأيقونة، وتخطيط مضغوط. يقوم المحررون بقلب مفتاح التبديل في Elementor ويتفاعل القالب الخاص بك.

يعد Switcher أحد الحقول التي يمكنك استخدامها في Widget Builder للإصدار المجاني. يتضمن البرنامج الإضافي المجاني أداة إنشاء عناصر واجهة المستخدم محدودة، وتأتي المجموعة الكاملة من الحقول معها ماستر أدونز برو.

ما يفعله حقل المحول #

• يضيف تبديل تشغيل/إيقاف تشغيل Elementor إلى لوحة عنصر واجهة المستخدم الخاص بك.
• يحفظ قيمة الإرجاع (yes افتراضيًا) عند التشغيل، وقيمة فارغة عند إيقاف التشغيل.
• يعمل مع {% if %} في القالب الخاص بك، تظهر العلامات فقط عند تشغيل التبديل.
• يمكن إخفاء وإظهار الحقول الأخرى في اللوحة من خلال الشروط، مما يبقي اللوحة قصيرة حتى يتم استخدام الخيار.

جديد على البناء؟ اقرأ نظرة عامة على منشئ القطعة أولاً، ثم عد باستخدام عنصر واجهة المستخدم مفتوحًا.

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية للعنصر مثبتة ونشطة. ال دليل التثبيت إعداد الأغطية.
• أداة مفتوحة في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Promo Card” مع محولين: show_badge، الذي يكشف عن شريط وحقل نص شارة، و compact_mode، مما يشد البطاقة.

كيفية إضافة حقل الجلاد #

1. اذهب الى الإضافات الرئيسية > منشئ القطعة وافتح القطعة الخاصة بك.
2. أضف قسمًا في علامة التبويب التي ينتمي إليها الخيار. خيار المحتوى مثل إظهار الشارة يناسب محتوى علامة تبويب.
3. يكتب switch في مربع البحث الميداني على اليسار.
4. يجر الجلاد في القسم. انقر فوق القلم الرصاص الموجود في الحقل لفتح إعداداته.

شرح خيارات حقل المحول #

• ملصق: النص الموجود بجوار التبديل في Elementor، على سبيل المثال “Show Badge”.
• اسم: المعرف الفريد للحقل واسم الرمز المميز الخاص به. استخدم الحروف والأرقام والتسطير فقط، على سبيل المثال show_badge.
• وصف: تلميح يظهر أسفل التبديل في Elementor.
• التسمية على و التسمية معطلة: الكلمات القصيرة داخل التبديل. يعرض العنصر Label On أثناء تشغيل التبديل ويتم إيقاف تشغيل Label أثناء إيقاف تشغيله، لذا فإن “Compact” و“Normal” يقرأان بشكل أفضل من نعم ولا لخيار التخطيط.
• قيمة الإرجاع: القيمة التي يحملها الحقل أثناء التشغيل. اتركه عند yes ما لم يكن هناك شيء ما في التعليمات البرمجية الخاصة بك يحتاج إلى سلسلة مختلفة.
• القيمة الافتراضية: القائمة المنسدلة التي تحتوي على نعم ولا. نعم تعني أن عنصر واجهة المستخدم المضاف حديثًا يبدأ بتشغيل التبديل.

شيئان يستحقان المعرفة حول هذه اللوحة. يتم تبديل نص المساعدة ضمن Label On وLabel Off، ويبدأ سطر Label Off بحرف T إضافي طائش. لا يزال كلا التسميتين يعملان بالطريقة التي تتوقعها: Label On هي الكلمة التي تظهر أثناء تشغيل التبديل.

احتفظ بقيمة الإرجاع والقيمة الافتراضية في الخطوة #

يتم حفظ القائمة المنسدلة للقيمة الافتراضية دائمًا yes لنعم، كل ما كتبته في قيمة الإرجاع. هذا المزيج غير ناجح. في اختباراتنا، حقل بقيمة الإرجاع enabled والقيمة الافتراضية نعم خرجت على هذا النحو:

• أظهر التبديل في Elementor إيقاف التشغيل.
• وكانت القيمة المحفوظة لا تزال yesلذا {% if %} تعامل مع الحقل كما هو وتم تقديم العلامات.
• لم تتفق اللوحة والصفحة مرة أخرى إلا بعد أن قام المحرر بالنقر فوق التبديل مرة واحدة، مما أدى إلى تعيين القيمة على enabled.

لذا قم بتغيير قيمة الإرجاع فقط عندما تخطط أيضًا لبدء تشغيل الحقل (تم تعيين القيمة الافتراضية على لا). بالنسبة لكل شيء آخر، اترك قيمة الإرجاع عند yes.

استخدم التبديل في القالب الخاص بك #

يكون المحول فارغًا عند إيقاف تشغيله، وتكون القيمة الفارغة خاطئة في محرك القالب، لذا {% if %} هو كل ما تحتاجه. تستخدم بطاقة HTML الترويجية محولًا واحدًا للترميز وواحدًا للفئة الدراسية

<div class="promo{% if compact_mode %} promo--compact{% endif %}">
  {% if show_badge %}
  <span class="promo-badge">{{ badge_text }}</span>
  {% endif %}
  <p class="promo-title">{{ promo_title }}</p>
  <p class="promo-text">{{ promo_text }}</p>
  <a class="promo-button" href="#">Claim the offer</a>
</div>

مع الشارة، الكل span لقد اختفى من الصفحة، وليس مخفيًا فقط. تقوم الفئة المدمجة بتبديل بعض القواعد في لوحة CSS

.promo--compact { padding: 18px 22px; }
.promo--compact .promo-title { font-size: 20px; }
.promo--compact .promo-text { display: none; }

يمكنك مقارنة القيمة أيضًا، كما في {% if show_badge == 'yes' %}، ولكن قارنها بقيمة الإرجاع، وليس نص التسمية. {% if show_badge == 'Yes' %} لا يتطابق أبدا. السهل {% if show_badge %} النموذج يتجنب المشكلة.

اترك محدد مربع فارغ لهذا الحقل. قيمة التبديل ليست قيمة CSS، لذا فإن التصميم ينتمي إلى لوحة CSS خلف فئة مثل تلك المذكورة أعلاه.

إخفاء الحقول الأخرى حتى يتم تشغيل التبديل #

هذا هو النصف الثاني من الغرض من المحول. في الحقل الذي تريد إخفاءه، افتح إعداداته، قم بالتمرير إليه شروط وانقر أضف الشرط. بالنسبة لحقل نص الشارة:

• اسم التحكم: show_badge، اسم المحول.
• المساواة: متساوي.
• قيمة التحكم: yes، قيمة إرجاع المحول.

يظهر نص الشارة الآن في Elementor فقط أثناء تشغيل Show Badge. يرى شروط للمشغلين الآخرين.

استخدم عنصر التحكم Switcher في Elementor #

أضف عنصر واجهة المستخدم إلى الصفحة، أو أعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل. يوجد التبديل أسفل التسمية الخاصة بك مع وجود كلمة Label On أو Label Off بداخلها. انقر عليه وتحديثات المعاينة على الفور، وأي حقل به شرط يظهر أو يختفي في نفس الوقت.

فيما يلي البطاقة النهائية في الواجهة الأمامية مع الشارة، مع الوضع المدمج أيضًا، ومع إيقاف تشغيل كلا المحولين

حالات الاستخدام الشائعة #

• شارات وأشرطة وأيقونات اختيارية.
• متغير تخطيط مدمج أو كثيف.
• إظهار أو إخفاء زر ثانوي أو ملاحظة تذييل أو مقسم.
• مفتاح رئيسي يكشف عن مجموعة من الحقول ذات الصلة في اللوحة.

نصائح للعمل مع حقل المحول #

• اترك قيمة الإرجاع عند yes. فهو يحافظ على التبديل والإعداد الافتراضي وشروطك في الخطوة.
• قم بتسمية الحقل بعد ما يظهر، مثل show_badge أو compact_mode. يقرأ الاسم مثل السؤال في {% if %}.
• اكتب التسمية قيد التشغيل والتسمية معطلة لهذا الخيارليس فقط نعم ولا، عندما يكون للدولتين أسماء.
• إقرانها مع الشروط لذا فإن الحقول التي يحتاجها الخيار تظهر فقط عند تشغيله.
• أكثر من دولتين؟ استخدم حدد الحقل منسدلة أو اختر الحقل لأزرار الأيقونات.

الأسئلة المتداولة #

إلتحاق بالركب #

أضف محولًا، وأعطه اسمًا وتسميات واضحة، واترك قيمة الإرجاع عند yes، ولف الجزء الاختياري من الترميز الخاص بك {% if %}. أضف شرطًا إلى الحقول التي يحتاجها الخيار وتبقى اللوحة قصيرة حتى يقوم المحرر بتشغيلها. للحصول على ثلاث حالات أو أكثر، راجع يختار و يختار الحقول، والتحقق التسعير لما تتضمنه كل خطة.