شفرة

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

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

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

• يضيف محرر التعليمات البرمجية إلى لوحة عنصر واجهة المستخدم الخاص بك في Elementor، مع أرقام الأسطر والتمييز.
• أبرز الميزات في اللغة التي تختارها، من HTML وCSS إلى JSON وSVG وPHP.
• يحفظ كل ما تم لصقه كنص.
• يطبعه من خلال رمز مثل {{ badge_markup }}تم تنظيفه باستخدام مرشح محتوى المنشور الخاص بـ WordPress بحيث يسمح بإسقاط عروض HTML وعلامات البرنامج النصي.
• لديه raw قم بتصفية الحالة النادرة التي يجب أن يخرج فيها المقتطف دون أن يمسها أحد.

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية لـ Elementor وMaster Addons Pro، وكلاهما نشط. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Trust Badges”: حقل نص للعنوان وحقل رمز مسمى badge_markup وهذا يأخذ شارة الموفر HTML.

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

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

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

• ملصق: النص الموجود أعلى المحرر في Elementor، على سبيل المثال “Badge Markup”.
• اسم: المعرف الفريد للحقل واسم الرمز المميز الخاص به. استخدم الحروف والأرقام والتسطير فقط، على سبيل المثال badge_markup.
• وصف: تلميح يظهر أسفل المحرر في Elementor. استخدمه لقول ما يتوقعه الحقل، مثل “Paste the HTML الذي يقدمه لك مزود الدفع أو المراجعة.”
• لغة: وضع التمييز. تحتوي القائمة على HTML، وCSS، وSASS، وSCSS، وJavaScript، وJSON، وLESS، وMarkdown، وPHP، وPython، وMySQL، وSQL، وSVG، وText، وTwig، وTypescript. HTML هو الافتراضي.

تغييرات اللغة تسليط الضوء فقط. فهو لا يحد مما يمكن للمحرر لصقه، ولا يغير كيفية طباعة القيمة.

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

ضمن الإعدادات العامة ستجد أيضًا إظهار التسمية, فاصل و شروط، والتي تعمل بنفس الطريقة كما في المجالات الأخرى. يترك محدد فارغ: المقتطف الملصق ليس قيمة CSS.

اطبع الكود في القالب الخاص بك #

ضع الرمز حيث يجب أن يهبط المقتطف، واحرسه حتى لا يترك الحقل الفارغ أي غلاف خلفه

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

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

ما شرائط الرمز المميز #

تمر القيمة عبر نفس عامل التصفية الذي يستخدمه WordPress لمحتوى المنشور. العلامات المسموح بها في المشاركات تظهر كما تم لصقها: div, span, a, img والباقي. تتم إزالة علامات البرنامج النصي وإطارات iframe.

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

الفلتر الخام #

إضافة raw يطبع الرمز المميز ما تم لصقه بالضبط، وتتضمن البرامج النصية وإطارات iframe ما يلي

{{ badge_markup|raw }}

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

يقبل محرك القالب أيضًا trim, upper و lower على رمز مميز، والذي يكون مفيدًا أحيانًا لمقتطف قصير من النص العادي.

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

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

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

إليك القطعة النهائية في الواجهة الأمامية، المبنية من ثلاث كتل شارة ملصقة

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

• شارات الدفع والمراجعة والثقة التي يوزعها مقدمو الخدمة بتنسيق HTML.
• المخطط أو كتل البيانات المنظمة التي يحتاج المحرر إلى لصقها في كل صفحة.
• أيقونات أو شعارات SVG صغيرة تم لصقها كعلامات.
• يقرأ البرنامج النصي القصير لـ CSS أو JSON الخاص بعنصر واجهة المستخدم الخاص بك.

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

• قل ما يجب لصقه في الوصف. لا يمكن للمحررين معرفة ما يتوقعه الحقل من محرر فارغ.
• حراسة الرمز مع {% if %}. وإلا فإن الحقل غير المستخدم سيترك غلافًا فارغًا على الصفحة.
• اختبر مقتطف مزود حقيقي مرة واحدة. هذه هي الطريقة التي يمكنك من خلالها معرفة الأجزاء التي نجت من الفلتر.
• يحفظ raw للمحررين الموثوقين فقط. الرمز المميز هو الإعداد الافتراضي الآمن لمواقع العملاء.
• نص منسق بدلا من الترميز؟ استخدم حقل ويسيويغ لذلك يحصل المحررون على محرر مرئي بدلاً من التعليمات البرمجية.

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

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

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