أفضل 4 طرق لطي النص في WordPress

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

يمكن إضافة المحتوى القابل للطي بتبديل أو عن طريق إنشاء قوائم أكورديون. تأتي بعض سمات WP مع رموز مختصرة مخصصة لحقن قوائم الأكورديون في أي مكان على موقعك.

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



ستعمل أيضًا على خطط WordPress.com المجانية أيضًا ، فقط دون أي تصميم.

كيفية طي النص في ووردبريس

استخدم الإضافات 'Accordion' أو المكونات الإضافية للرموز القصيرة مع وظيفة 'accordion' أو 'toggle' لطي النص في WordPress. يمكن لخطط WordPress.com المجانية أن تجعل المحتوى قابلاً للطي عن طريق إضافة

HTML داخل محرر النصوص. في المواقع ذاتية الاستضافة ، يمكن ترميز السمات لاستخدام خطافات WordPress لتحميل jQuery UI Accordion.

الفرق بين التبديل والأكورديون على WordPress

ميزات الأكورديون والتبديل هما طريقتان تعملان على طي النص في WordPress.

الفرق بين نص التبديل والأكورديون هو ...

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

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

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

أعتقد أنه من هذا الطريق…

إذا كنت تريد معرفة 'ما هو سعر التسليم؟' ، فما الذي تفضله ...

أ) أشرطة عناوين مفردة مع أسئلة محددة في علامات العناوين؟

أو

ب) التمرير خلال 80 سؤالاً وإجابة حتى تجد السؤال الذي تريده؟

تجعل عناصر الأكورديون المحتوى الخاص بك أكثر قابلية للقراءة.

4 طرق لطي النص في WordPress

1. استخدم كتلة الأكورديون في محرر جوتنبرج

بالنسبة لأولئك الذين يستخدمون محرر 'block' أو Gutenberg الجديد على موقع WordPress المستضاف ذاتيًا ، يمكن إضافة مكونات أكورديون الإضافية من الشريط الجانبي لمحرر الكتلة.

إنها نفس العملية مثل الطريقة القديمة لإضافة المكونات الإضافية لتوسيع وظائف موقعك. أكثر ملاءمة لأنك لم تعد بحاجة إلى الانتقال إلى قائمة المكونات الإضافية لإضافة مكون إضافي جديد.

قم بتحميل محرر الكتلة الخاص بك ، انقر فوق رمز + لإضافة كتلة جديدة ، ثم ابحث عن 'أكورديون'.

لا توجد كتل أكورديون مثبتة مسبقًا. تحتاج إلى إضافة مكون إضافي لكتلة الأكورديون.

بالنسبة للاختبار الذي أجريناه ، كان المكون الإضافي المضاف ' الأكورديون 'بواسطة' WPDeveloper '.

تمت إضافة القدرة على إضافة ملحقات من لوحة معلومات محرر كتلة WP في الإصدار 5.6 من WordPress.

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

بدلاً من ذلك ، قم بتحديث إصدار WordPress الخاص بك إلى أحدث إصدار متوفر.

تتمثل ميزة استخدام الكتل الجديدة لمحتوى نمط الأكورديون في أن استعلامات JavaScript المطلوبة لتمكينها تعمل فقط عند تحميل الكتلة.

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

لتضمين الصور في أقسام المحتوى الموسع ، انقر على النقاط الرأسية الثلاث ، وحدد 'تحرير بتنسيق HTML' وأضف شفرة مصدر الصورة باستخدام سلسلة HTML التالية

<img src="http://yoursite.com/wp-content/uploads/2021/09/your-image-title.jpg" alt="give it an alternative title" width="###" height="###">

يظهر عنوان URL للصورة في مكتبة الوسائط الخاصة بك.

2. أضف قسم أكورديون مع HTML فقط (مطلوب في خطط WordPress.com المجانية)

في خطط WordPress.com المجانية ، هناك عائق.

لا يمكنك تشغيل استعلامات JavaScript ، وأنت لا يمكن تثبيت مكونات WordPress الإضافية أيضاً. لا يزال بإمكانك طي النص داخل محرر النصوص.

افتح صفحتك أو انشر في وضع التحرير واستخدم محرر 'النص'. ليس المحرر المرئي.

الرمز المراد إضافته هو

<details>
<summary>Question 1</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>

(كرر عدة مرات حسب الحاجة)

الجانب الإيجابي لهذا هو أنه يمكنك إضافته بدون أي مكونات إضافية ويعمل على حسابات WordPress.com المجانية أيضًا.

نظرًا لأنه HTML عادي ، تكون النتيجة نصًا عاديًا.

لتضمين عناصر التصميم في الأكورديون أو عناصر التبديل ، استخدم مكونًا إضافيًا أو رمزًا ثابتًا لقالب السمة الخاص بك.

تعد المكونات الإضافية أبسط ، لذا إذا كنت ضعيفًا في تعديل التعليمات البرمجية ، فانتقل إلى مكون إضافي. يحتوي المكون الإضافي Ultimate Shortcodes على أيقونات متعددة.

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

3. استخدم الإضافات لطي النص في محرر WordPress الكلاسيكي

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

من أبسط المكونات الإضافية ...

الأكورديون بواسطة PickPlugins

يرتبط هذا المكون الإضافي بمكتبة Font Awesome. أضف رمز HTML code لأي عنصر من Font Awesome لتجاوز الأسهم الافتراضية.

بمجرد التثبيت ، تتم إضافة قائمة جديدة إلى الشريط الجانبي للمسؤول. انقر فوق 'إضافة جديد' لإنشاء أكبر عدد تريده من قوائم الأكورديون.

يمكن عرض النص المطوي في أي مكان على موقعك يقبل HTML.

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

يتم ضبط عرض المحتوى تلقائيًا بحيث لا يكون هناك عبث مع CSS مطلوب لإصلاح أحجام العرض لشاشات مختلفة.

ضمن قائمة الأكورديون ، يمكنك استخدام HTML وإدراج الصور.

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

بمعنى آخر ، يمنحك استخدامًا أفضل لعقارات الأداة على مواقع WordPress الإلكترونية.

... كل ذلك مع تجنب ازدحام منطقة عنصر واجهة المستخدم للشريط الجانبي.

4. أضف jQuery UI Accordion إلى سمات WordPress

هذه العملية معقدة إلى حد ما لأن WordPress لا يسمح بتشغيل JavaScript داخل ملف الرأس.

بدلاً من ذلك ، يتم تسجيل نصوص JS بالفعل افتراضيًا في تثبيت WordPress. كل ما عليك فعله هو 'ربط' بهم.

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

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

يستخدم مطورو ثيمات WP الخطافات في WordPress Codex للربط بالعديد من المكتبات المجمعة مسبقًا.

وظيفة 'jQuery UI Accordion' هي الوظيفة التي يتم تشغيلها لإنشاء نص قابل للطي في WP.

البرامج النصية والملفات لطي النص على WordPress

أولاً ، قم بإنشاء ملف JavaScript.

استخدم محرر نص عادي مثل Notepad والصقه في ما يلي

//jQuery-ui-accordion
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});

احفظ الملف باسم 'accordion.js'.

ما يفعله هذا الرمز ...

آخر سطر من التعليمات البرمجية هو جعل جميع العناصر قابلة للطي.

يعني تعيين الحالة 'النشطة' على 'خطأ' أنه يتعين على المستخدم النقر لتحميل قسم المحتوى. سيؤدي تعيين هذا على 'true' إلى تحميل العنصر الأول مسبقًا في قسم الأكورديون.

الجزء الأخير من 'heightStyle': يعني 'المحتوى' عدم وجود تعيين أقصى ارتفاع. سيؤدي تعيينه على 'محتوى' إلى تحميل كل المحتوى داخل عنصر div دون الحاجة إلى التمرير لأسفل أو عبر.

في الكود أعلاه ، يشير #accordion إلى 'معرف div' و. accordion مخصص لـ 'فئة div'. مع هذه المضافة ، عندما تضع

<div ID="accordion"> and <div class="accordion">

... في محرر النصوص الخاص بك ، سيتم تشغيل jQuery.

  • [#] هو معرّف
  • [. ] فئة

كيفية إضافة ملفات JavaScript مخصصة إلى سمات WP

انتقل إلى cPanel ، وافتح السمة التي تريد تشغيل البرنامج النصي عليها ، ثم ابحث عن المجلد المسمى 'JS'. هذا هو مكان وضع أي ملفات JavaScript.

سيكون لبعض السمات المجلد الموجود في جذر ملفات السمات مسار الملف: WP Content> Themes> Your Theme> JS.

قد يستخدم الآخرون مجلدًا فرعيًا مثل مجلد 'الأصول' داخل مجلد السمة. سيتبع ذلك مسار الملف: WP Content> Themes> Your Theme> Assets> JS.

المجلد لجميع ملفات JavaScript هو JS. إذا كان المظهر الخاص بك لا يحتوي على واحد ، فقم بإنشاء واحد.

افتح مجلد JS لموضوعك ، وانقر على 'تحميل ملف' وقم بإسقاط ملف 'accordion.js'.

قم بتحرير الوظائف.php لتحميل JavaScript

هذا الجزء هو لإخبار WordPress بتحميل ملف JavaScript. في معظم الأنظمة الأساسية الأخرى ، يتم ذلك في ملف الرأس. أثناء تشغيل WordPress على PHP ، لا يمكن تحميل JavaScript باستخدام علامة