شفرة

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

مثل كل حقل Widget Builder، يدعم حقل التعليمات البرمجية شروط لرؤية اللوحة، ويتم طباعة الرمز المميز الخاص بها من خلال محرك قالب بناء جملة الغصين مع السماح بـ HTML الآمن بالمرور تلقائيًا. راجع كلا الدليلين للإعداد والقيود.

يمر الإخراج عبر عملية تعقيم WordPress. تتم طباعة القيمة باستخدام رمز مميز عادي، ويمر وقت التشغيل بها wp_kses_post، ينطبق نفس عامل التصفية WordPress على محتوى النشر. علامات HTML الآمنة باقية؛ <script> يتم تجريد العلامات. هذا الإعداد الافتراضي يحمي الموقع من كل ما يتم لصقه في الحقل.

ماذا يفعل حقل الكود #

• يعرض محرر تعليمات برمجية Ace في لوحة Elementor الخاصة بعنصر واجهة المستخدم، مع تمييز بناء الجملة للغة التي تختارها.
• يخزن الكود الملصق كسلسلة.
• يطبع تلك السلسلة من خلال {{ your_field_name }}، معقم مع wp_kses_post لذلك تتم إزالة عروض HTML والبرامج النصية المسموح بها.
• العروض أ |raw فتحة هروب المرشح التي تتجاوز التعقيم لسيناريوهات الإدارة الموثوقة.
• يضبط ارتفاعه المرئي من خلال خيار الصفوف، بحيث تحصل المقتطفات الطويلة على مساحة في اللوحة.

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

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة شارة الثقة حيث تم تسمية حقل التعليمات البرمجية badge_markup يقبل شارة HTML التي يوزعها موفرو الدفع والمراجعة.

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

اسحب شفرة الحقل من لوحة الحقول إلى قسم أسفل محتوى علامة التبويب. تفتح خيارات الحقل على اليسار لحظة هبوطه.

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

• ملصق: النص الموضح أعلاه المحرر في Elementor، على سبيل المثال “Badge Markup”.
• اسم: المعرف الفريد الذي تشير إليه قوالبك. الحروف والأرقام والتسطير فقط، على سبيل المثال badge_markup.
• الافتراضي: رمز البداية الذي تأتي به الأداة، مفيد كمثال مملوء لما يتوقعه الحقل.
• لغة: وضع تمييز بناء الجملة، وHTML، وCSS، وJavaScript، والأوضاع الشائعة الأخرى. يؤثر هذا على التمييز فقط، وليس على ما يمكن كتابته.
• الصفوف: الارتفاع المرئي للمحرر في اللوحة.

قم بتوصيل حقل التعليمات البرمجية بالرمز المميز الخاص به #

حقل التعليمات البرمجية هو حقل رمز مميز. اطبعه حيث يجب أن تصل العلامات الملصقة إلى لوحة HTML

<div class="tb-badges">
  {{ badge_markup }}
</div>

عند الإخراج، تمر القيمة wp_kses_post. من الناحية العملية، هذا يعني العلامات التي يسمح بها WordPress في محتوى النشر، <div>, <a>, <img>, <span>والباقي، يتم تقديمه كما هو مُلصق، بينما <script> يتم تجريد العلامات وسمات معالج الأحداث. بالنسبة للشارة أو مقتطف المخطط المبني من العلامات العادية، فإن السلوك الافتراضي هو بالضبط ما تريده.

ضع في اعتبارك أن kses يقوم بتجريد العلامات بصمت. إذا أصبح المقتطف الملصق نصف فارغ على الصفحة، فلن يخطئ أي شيء؛ قام عامل التصفية بإزالة علامة غير مسموح بها واحتفظ بالباقي. مقتطفات موفر الاختبار على صفحة التدريج مرة واحدة قبل تسليم الأداة إلى العميل، حتى تعرف الأجزاء التي بقيت على قيد الحياة.

عندما يحتاج المقتطف حقًا إلى البقاء على قيد الحياة دون أن يمسه أحد، فإن |raw مرشح يتجاوز التعقيم:

{{ badge_markup|raw }}

احترس: |raw المخرجات مهما تم لصقها، بما في ذلك البرامج النصية. لا تصل إليه إلا عندما يكون كل من يمكنه تحرير عنصر واجهة المستخدم موثوقًا به بالفعل باستخدام HTML غير مفلتر، والمستخدمين على مستوى المسؤول بشكل فعال، ولا يمكن أبدًا الوصول إلى عناصر واجهة المستخدم التي يمكن للمحررين أو العملاء ذوي الامتيازات المنخفضة لمسها. الرمز المميز الافتراضي هو الاختيار الصحيح لكل عنصر واجهة مستخدم تقوم بشحنه تقريبًا.

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

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

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

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

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

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

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

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

• ثق بالتعقيم الافتراضي. wp_kses_post يحافظ على العلامات العادية سليمة ويزيل الأجزاء الخطرة بهدوء. معظم مقتطفات “my مكسورة، ويتم تجريد تقارير” <script> العلامة تقوم بعملها.
• احتياطي |raw لعناصر واجهة المستخدم للمسؤول فقط. يقوم بتعطيل شبكة الأمان لهذا الرمز المميز بالكامل.
• اضبط اللغة لتتناسب مع المحتوى. التمييز هو أداة مساعدة للتدقيق اللغوي؛ يجعل وضع HTML علامة الإغلاق المفقودة مرئية في لمحة.
• شحن مقتطف افتراضي. يوضح المثال المعلق للمحررين بالضبط شكل التعليمات البرمجية الذي ينتمي إلى الحقل.
• لف الرمز المميز {% if %} عندما يكون المقتطف اختياريًا، فإن الحقل الفارغ لا يعرض أي حاوية فارغة.
• استخدم WYSIWYG للنثر. إذا كان المحررون سيكتبون نصًا بدلاً من لصق العلامات، فإن حقل ويسيويغ هو السيطرة الأكثر ودية.

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

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

يقوم حقل رمز منشئ عناصر واجهة المستخدم بتحويل “paste المقتطف الخاص بك هنا” إلى سير عمل مناسب: محرر مميز في اللوحة، ورمز مميز واحد في القالب، وتعقيم على مستوى WordPress بين اللصق والصفحة. استخدمه للترميز، احتفظ به |raw للحالة النادرة الموثوقة، والوصول إلى حقل ويسيويغ عندما يكون المحتوى نثريًا بدلاً من الكود. اكتشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.