كيفية إضافة الأكورديون إلى موقع الويب الخاص بك على WordPress

نشرت: 2022-09-19

يمكن أن تكون إضافة أكورديون إلى موقع WordPress الخاص بك طريقة رائعة لتنظيم وتقديم المحتوى بطريقة أكثر جاذبية وتفاعلية. هناك عدة طرق مختلفة يمكنك من خلالها إضافة أكورديون إلى موقعك ، اعتمادًا على احتياجاتك وتفضيلاتك. تتمثل إحدى طرق إضافة الأكورديون في استخدام مكون إضافي. هناك عدد من المكونات الإضافية الرائعة المتاحة التي يمكن أن تساعدك في إضافة أكورديون إلى موقع WordPress الخاص بك. بعض من مفضلاتنا تشمل Accordion Pro و Simple Accordion. هناك طريقة أخرى لإضافة الأكورديون وهي استخدام سمة WordPress التي تتضمن وظيفة الأكورديون . بعض الأمثلة الرائعة للموضوعات التي تتضمن الأكورديون هي OptimizePress و Divi. إذا كنت مرتاحًا للعمل مع الكود ، فيمكنك أيضًا إضافة أكورديون إلى موقع WordPress الخاص بك عن طريق إضافة بضعة أسطر من التعليمات البرمجية إلى ملف function.php الخاص بالقالب. بغض النظر عن الطريقة التي تختارها ، يمكن أن تكون إضافة أكورديون إلى موقع WordPress الخاص بك طريقة رائعة لتقديم المحتوى بطريقة أكثر جاذبية وتفاعلية.

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

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

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

كيف يعمل الأكورديون في ووردبريس؟

الائتمان: geekywp.com

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

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

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

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

كيفية تحرير الأكورديون في وورد

الائتمان: herothemes.com

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

عندما تحتاج إلى الوصول بسرعة إلى إجابة محددة ، فإن القائمة القابلة للطي تعد خيارًا ممتازًا. نظرًا لسهولة الاستخدام ، من السهل إضافة وإزالة الأكورديون باستخدام Widgetkit. من الضروري إدخال وتحرير الأكورديونات في WordPress على أساس أكثر انتظامًا. يمكنك الوصول إلى Techno Goober عن طريق الاتصال بالرقم (302) 645-6177 أو مراسلتنا عبر البريد الإلكتروني على [email protected] للبدء ، انتقل إلى Widgetkit وحدد Accordion. يجب أن تكون قادرًا على الوصول إليه من لوحة المفاتيح. في الخطوة 2 ، سيتم وضع الرمز القصير بجوار اسم الأكورديون.

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

ووردبريس مسج الأكورديون

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

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

وورد الأكورديون Css

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

هذه الميزة هي أفضل ميزة لتصميم الويب لأنها تسمح بعرض المحتوى وإخفائه. مربعات الأكورديون ، من المفترض إخفاء نص أو معلومات ، وقد يتم الكشف عنها إذا لزم الأمر. بسبب الاستخدام الواسع لتقنيات CSS3 المتقدمة ، تستخدم معظم الأكورديونات الآن HTML و CSS. أنشأ فريقنا في Slider Revolution هذه المقالة لمساعدتك في التعرف على بعض تصميمات الأكورديون CSS المجانية. هذا هو المحدد الزائف CSS3 الذي يسمح للمستخدمين بربط عنصر HTML أو العنصر المستهدف بعلامة الارتساء. إذا كنت لا تريد تغيير سلوك متصفحك ، فاستخدم: hover style. وبالمثل ، تستخدم طريقة خانة الاختيار نفس طريقة أسلوب زر الاختيار ، ولكن مع نوع إدخال مربع الاختيار.

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

كيفية استخدام Html و Css في WordPress

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

وورد الأكورديون بدون البرنامج المساعد

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

هذا البرنامج المساعد سهل الاستخدام وقوي وقادر على إنشاء الأكورديون والأسئلة الشائعة وعلامات التبويب والمحتوى والأسئلة المتداولة وقواعد المعرفة والأسئلة والإجابات وعلامات تبويب الأسئلة الشائعة لـ WooCommerce والعديد من الأشياء الأخرى. يعد خيار Lazy Load مفيدًا لإخفاء المحتوى عند تحميل الصفحة ، ويمكن تعطيله. أكورديون به عدد غير محدود من المستويات المتداخلة أو المتداخلة. يمكنك إنشاء العديد من صفحات الأكورديون أو فتحها جميعًا عن طريق تقديم وسائط متعددة مثل ما يلي في yourdomain.com/accordion-page/؟active_index=83 و 1 و 2 و 84. يمكنك أيضًا تعيين نص مخصص للتوسيع / ​​الطي زر ولون الخلفية إذا رغبت في ذلك. من خلال تحديد العنوان كخيار تحميل الصفحة النشط والأكورديون كخيار بحث ، يمكنك تمكين البحث في الأكورديون.

الرمز المختصر لـ WordPress Accordion

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

يضيف مكون WordPress الإضافي المسمى Accordion Shortcodes رموزًا قصيرة إلى صفحاتك تتيح لك إضافة وظيفة قائمة منسدلة الأكورديون. تضيف الرموز القصيرة معرفًا فريدًا لكل عنصر من عناصر الأكورديون ، ويتم استخدام معرف العنصر لفتحه افتراضيًا في عنوان URL. قد تتوفر بعض خيارات التصميم المخصصة (على سبيل المثال ، استخدام نموذج CSS أدناه) بالإضافة إلى ورقة الأنماط الرئيسية. يمكنك تضمين الفئة كعنصر في علامة HTML الخاصة بالعنوان باستخدام الفتح الأكورديون أو الرمز المختصر لعنصر الأكورديون مع قيمة فئة من اختيارك. سيتم استخدام غلاف الأكورديون وحاويات المحتوى في التكوين الافتراضي. إذا كنت لا تريد إزاحة التمرير ولكنك لا تزال تريد التمرير ، فيمكنك استخدام scroll = 1. عيّن علامة أكورديون المختصرة = h2 إذا كنت تريد تعيين [علامة أكورديون [/ علامة أكورديون].

يجب تعيين H3 على الإعداد الافتراضي. عند إضافة سمة علامة إلى عنصر أكورديون ، فإنها ستتجاوز الإعداد العام. يكون وضع التوافق متاحًا إذا كان قالبك يتضمن بالفعل رموزًا قصيرة [أكورديون] أو [عنصر أكورديون]. تأكد من تعيين حقلي "AS_TINYMCE" و "إنشاء" في ملف WordPress-config.php الخاص بك. يمكنك تغيير مظهر الأكورديون ما دمت مرتاحًا في تعديل ورقة أنماط السمة الخاصة بك. يستخدم WordPress_footer () في هذا البرنامج المساعد لتحميل ملف JavaScript (jQuery). يمكن إضافة الرموز القصيرة إلى كل عنصر من عناصر الأكورديون.

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