WYSIWYG

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

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

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

• يضيف محرر النصوص المنسق إلى لوحة عناصر واجهة المستخدم الخاصة بك في Elementor، مع علامات التبويب Visual وCode وزر إضافة وسائط.
• يحفظ ما يكتبه المحررون بتنسيق HTML.
• يطبعه من خلال رمز مثل {{ member_bio }}، تمت تصفيته بالطريقة التي يقوم بها WordPress بتصفية المحتوى المنشور.
• يحافظ على التنسيق: يتم عرض الفقرات والخط العريض والمائل والروابط والقوائم والعناوين.
• يأخذ قيمة افتراضية، والتي يمكن أن تتضمن علامات، لذلك تعرض الأداة الجديدة مثالًا عمليًا.

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

قبل أن تبدأ #

• WordPress مع تثبيت Elementor ونشطه.
• الإضافات الرئيسية للعنصر مثبتة ونشطة. ال دليل التثبيت إعداد الأغطية.
• عنصر واجهة مستخدم مفتوح في Widget Builder. المثال الموجود في هذا الدليل هو عنصر واجهة مستخدم “Team Member”: حقول نصية للاسم والدور، وحقل WYSIWYG مسمى member_bio للسيرة الذاتية.

كيفية إضافة حقل WYSIWYG #

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

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

• ملصق: النص الموجود أعلى المحرر في Elementor، على سبيل المثال “Bio”. يبدأ الحقل المسمى “Content”.
• اسم: المعرف الفريد للحقل واسم الرمز المميز الخاص به. استخدم الحروف والأرقام والتسطير فقط، على سبيل المثال member_bio.
• وصف: تلميح يظهر أسفل المحرر في Elementor. استخدمه لتعيين التوقعات، مثل “جملتين أو ثلاث جمل. غامق، الروابط والقوائم جيدة.”
• القيمة الافتراضية: محتوى البداية. هذا مربع نص عادي، لذا اكتب HTML بنفسك، على سبيل المثال فقرة تحتوي على strong العلامة والرابط.

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

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

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

اطبع المحتوى في القالب الخاص بك #

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

<article class="tm">
  <p class="tm-name">{{ member_name }}</p>
  <p class="tm-role">{{ member_role }}</p>
  {% if member_bio %}
  <div class="tm-bio">{{ member_bio }}</div>
  {% endif %}
</article>

قم بتصميم المنطقة من لوحة CSS من خلال استهداف العلامات التي يكتبها المحرر:

.tm-bio p { margin: 0 0 .75em; line-height: 1.6; }
.tm-bio p:last-child { margin-bottom: 0; }
.tm-bio a { color: #4338ca; }
.tm-bio ul { margin: 0 0 .75em 1.1em; }

لا تضيف raw إلى رمز WYSIWYG. يعرض الرمز المميز التنسيق بالفعل، و raw يزيل فقط مرشح الأمان.

ما يحتفظ به الفلتر ويسقط #

تمر القيمة عبر نفس عامل التصفية الذي يستخدمه WordPress لمحتوى المنشور. في اختباراتنا، العناوين، الفقرات، strong, emوالقوائم والروابط وحتى مضمنة style جاءت السمات دون تغيير. آن iframe تمت إزالته، وتمت إزالة علامة البرنامج النصي دون تشغيل.

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

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

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

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

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

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

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

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

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

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

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

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