كيفية إضافة أكورديون في ووردبريس: 3 طرق للاستكشاف

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

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

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

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

الطريقة الأولى: إضافة قوائم منسدلة باستخدام إضافة برمجية للتكامل السريع

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

الخطوة 1: اختر إضافة الأكورديون

الخطوة الأولى الحاسمة في عملية إضافة الأكورديون إلى ووردبريس هي اختيار الإضافة المناسبة لموقعك. يوفر دليل إضافات ووردبريس خيارات عديدة، لكل منها ميزاتها الفريدة وإمكانيات تخصيصها. من بين الخيارات الشائعة بين مستخدمي ووردبريس: Accordion من PickPlugins، و Easy Accordion من ShapedPlugin LLC، و Essential Blocks لمستخدمي محرر غوتنبرغ.

عند اختيار إضافة، ضع في اعتبارك ما يلي:

• التوافق مع إصدار ووردبريس
• تقييمات وآراء المستخدمين
• خيارات التخصيص
• سهولة الاستخدام
• منتظم تحديثات ودعم

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

الخطوة الثانية: تثبيت وتفعيل الإضافة

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

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

اطلع أيضًا على: أفضل إضافات النسخ الاحتياطي لـ WordPress 

الخطوة 3: إنشاء قائمة منسدلة جديدة

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

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

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

الخطوة الرابعة: إضافة العناوين والمحتوى

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

أما بالنسبة للمحتوى نفسه، فلديك المرونة لتضمين عناصر مختلفة مثل:

• نص
• صور
• القوائم
• الوسائط المضمنة (مقاطع الفيديو، الصوت، إلخ)

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

الخطوة 5: تخصيص المظهر

تُقدّم معظم إضافات الأكورديون مجموعةً من خيارات التخصيص لضمان توافق ميزتك الجديدة تمامًا مع تصميم موقعك الإلكتروني. تُعدّ هذه الخطوة أساسية لخلق مظهرٍ متناسق يُعزّز جماليات موقعك بدلًا من أن يُشوّهها.

تشمل خيارات التخصيص الشائعة ما يلي:

• أنظمة ألوان للخلفيات والنصوص والحدود
• أنماط وأحجام الخطوط
• اختيار أيقونة لمؤشرات التوسيع/الطي
• رسوم متحركة لأقسام الافتتاح والختام

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

الخطوة 6: المعاينة والحفظ

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

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

اقرأ أيضاً: أفضل قوالب تصميم واجهة المستخدم للتجارة الإلكترونية ومواقع نموذجية

الطريقة الثانية: إنشاء قائمة منسدلة مخصصة على موقع ووردبريس الخاص بك باستخدام HTML وCSS وجافا سكريبت

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

الخطوة 1: الوصول إلى محرر HTML

أولاً، عليك الوصول إلى محرر HTML في ووردبريس. إليك الطريقة:

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

تُعد هذه الخطوة أساسية لأنها تتيح لك إضافة رمز مخصص إلى صفحتك.

الخطوة الثانية: إدراج بنية HTML

والآن، دعونا نضيف البنية الأساسية للأكورديون الخاص بك في ووردبريس باستخدام لغة HTML:

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

إليك مثال بسيط لما قد يبدو عليه كود HTML الخاص بك:

<div class=”accordion” style=";text-align:right;direction:rtl">

  <div class=”accordion-item” style=";text-align:right;direction:rtl">

    <h3 class=”accordion-title” style=";text-align:right;direction:rtl">القسم 1</h3>

    <div class=”accordion-content” style=";text-align:right;direction:rtl">

      <p style=";text-align:right;direction:rtl">يُكتب محتوى القسم 1 هنا.</p>

    </div>

  </div>

  <div class=”accordion-item” style=";text-align:right;direction:rtl">

    <h3 class=”accordion-title” style=";text-align:right;direction:rtl">القسم 2</h3>

    <div class=”accordion-content” style=";text-align:right;direction:rtl">

      <p style=";text-align:right;direction:rtl">يُكتب محتوى القسم الثاني هنا.</p>

    </div>

  </div>

</div>

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

المزيد قادم: العناصر الأساسية لتصميم ووردبريس مخصص

الخطوة 3: إضافة CSS للتنسيق

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

1. ووردبريس في ملف CSS الخاص بقالب ووردبريس أو في CSS مخصص أضف أنماطًا لعناصر الأكورديون في
2. قم بتصميم الحاوية الرئيسية والعناوين ومناطق المحتوى.
3. أضف انتقالات لجعل عملية الفتح والإغلاق سلسة.

إليك مثال أساسي على CSS:

.accordion {

  العرض: 100%؛

  أقصى عرض: 600 بكسل؛

  margin: 0 auto;

}

.accordion-title {

  لون الخلفية: #f4f4f4؛

  الحشو: 10 بكسل؛

  المؤشر: مؤشر؛

}

.accordion-content {

  العرض: لا شيء؛

  الحشو: 10 بكسل؛

}

.accordion-content.active {

  العرض: كتلة؛

}

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

الخطوة الرابعة: إضافة جافا سكريبت للوظائف

تُشغّل لغة جافا سكريبت قائمة الأكورديون. فهي تتحكم بما يحدث عند النقر على عنوان. إليك كيفية إضافتها:

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

إليك مثال بسيط بلغة جافا سكريبت:

document.addEventListener('DOMContentLoaded', function() {

  const titles = document.querySelectorAll('.accordion-title');

  titles.forEach(title => {

    title.addEventListener('click', () => {

      const content = title.nextElementSibling;

      content.classList.toggle('active');

    });

  });

});

يُضيف هذا الكود حدث نقر إلى كل عنوان. عند النقر، يتم إظهار المحتوى أو إخفاؤه.

قراءات ذات صلة: مواقع إلكترونية سهلة الوصول للجميع: حلول تصميم مواقع إلكترونية متوافقة مع قانون الأمريكيين ذوي الإعاقة

الخطوة 5: تخصيص المظهر والسلوك

الآن فرصتك لتجعل الأكورديون ملكك حقاً:

1. موقعك الإلكتروني ألوان وأسلوب
2. قم بتغيير كود جافا سكريبت إذا كنت تريد سلوكًا مختلفًا، مثل السماح بفتح أقسام متعددة في وقت واحد.
3. أضف أيقونات أو رسوم متحركة أو لمسات خاصة أخرى لجعل الأكورديون الخاص بك مميزًا.

تتيح لك هذه الخطوة ضبط كل شيء بدقة حتى يصبح مناسبًا تمامًا لموقعك.

الخطوة السادسة: المعاينة والنشر

لقد شارفت على الانتهاء! إليك الخطوة الأخيرة:

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

أصبح تصميم الأكورديون المخصص الخاص بك متاحًا الآن على موقع ووردبريس الخاص بك!

الطريقة الثالثة: استخدام محرر الكتل المدمج

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

الخطوة 1: الوصول إلى محرر الكتل

أولاً وقبل كل شيء، عليك الوصول إلى محرر الكتل:

1. قم بتسجيل الدخول إلى لوحة تحكم ووردبريس.
2. أنشئ صفحة أو منشورًا جديدًا، أو افتح منشورًا موجودًا تريد تعديله.
3. تأكد من استخدامك لمحرر الكتل، وليس المحرر الكلاسيكي.

يُعد محرر الكتل هو الخيار الافتراضي في الإصدارات الأحدث من ووردبريس. وهو يبدو كلوحة بيضاء يمكنك من خلالها إضافة أنواع مختلفة من كتل المحتوى.

الخطوة الثانية: ابحث عن كتلة الأكورديون

والآن، دعونا نجد كتلة الأكورديون:

1. في المحرر، ابحث عن أيقونة "+". عادةً ما تكون في أعلى اليسار أو داخل منطقة المحتوى.
2. انقر على هذا الرمز لفتح مكتبة الكتل.
3. في شريط البحث الذي يظهر، اكتب "أكورديون".

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

الخطوة 3: إدراج كتلة الأكورديون

هل وجدتَ قسم الأكورديون؟ رائع! لنضفه إلى صفحتك:

1. انقر على قسم الأكورديون في نتائج البحث.
2. سيظهر المربع في منطقة التحرير الخاصة بك.

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

الخطوة الرابعة: أضف المحتوى إلى الأكورديون الخاص بك

حان الوقت لملء الأكورديون الخاص بك بمحتوى شيق:

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

تذكر أن الأكورديونات رائعة لتنظيم المعلومات ذات الصلة. يجب أن يغطي كل قسم موضوعًا أو سؤالًا محددًا.

المزيد حول جماليات تصميم المواقع الإلكترونية: إتقان التصميم البسيط: تحسين جماليات ووظائف موقعك الإلكتروني

الخطوة 5: تخصيص المظهر

اجعل تصميم الأكورديون الخاص بك متناسقًا مع نمط موقعك الإلكتروني:

1. انقر على مربع الأكورديون في ووردبريس لتحديده.
2. ابحث عن شريط جانبي أو قائمة منبثقة تحتوي على خيارات للتصميم.
3. قد تتمكن من التغيير:
   • ألوان خلفية للأكورديون بأكمله أو لأقسام فردية
   • ألوان النصوص للعناوين والمحتوى
   • ألوان وأنماط الحدود
   • أنماط وأحجام الخطوط
4. تتيح لك بعض برامج تحرير الكتل أيضًا اختيار أيقونات لمؤشرات الفتح/الإغلاق.

تختلف خيارات التخصيص باختلاف إصدار ووردبريس والقالب المستخدم. جرّب الإعدادات المختلفة للحصول على المظهر الذي تريده.

الخطوة السادسة: المعاينة والنشر

لقد شارفت على الانتهاء! دعنا نتأكد من أن كل شيء يبدو جيداً:

1. انقر على المعاينة في محرر ووردبريس الخاص بك.
2. سيؤدي هذا إلى فتح علامة تبويب جديدة تعرض كيف ستبدو صفحتك عند عرضها مباشرة.
3. اختبر الأكورديون الخاص بك:

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

4. إذا كنت بحاجة إلى إجراء تغييرات، فارجع إلى المحرر وقم بالتعديل.
5. هل أنت راضٍ عن الشكل؟ اضغط على النشر أو التحديث !

أصبح قسم الأكورديون الخاص بك متاحًا الآن على موقع ووردبريس الخاص بك. يمكن للزوار استخدامه لاستكشاف محتواك بطريقة تفاعلية.

موارد مفيدة: أفضل وكالات تصميم مواقع الويب ذات العلامات التجارية الخاصة: أفضل الخيارات

خاتمة

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