إنشاء أكورديون Bootstrap عبر functions.php في ووردبريس

في عالم تطوير المواقع على ووردبريس، يُعتبر استخدام عناصر واجهة المستخدم القابلة للتوسيع جزءًا أساسيًا من تصميم الصفحات الحديثة. من بين تلك العناصر المميزة يبرز الأكورديون أو ما يعرف بـ Bootstrap Accordion، والذي يوفر طريقة جذابة لتنظيم المعلومات. يُعطي الأكورديون للزائرين تجربة مستخدم مرنة ومرتبة، مما يسمح لهم بالتفاعل مع محتوى الصفحة بطريقة سلسة. في هذا المقال، سنستعرض كيفية دمج الأكورديون في ووردبريس من خلال ملف functions.php.

مقدمة عن Bootstrap Accordion في functions.php

عندما نستخدم Bootstrap Accordion in wordpress functions.php، نساعد في تعزيز التفاعل مع المحتوى الخاص بنا. فمن خلال الأكورديون، يمكن للمستخدمين عرض أو إخفاء المعلومات حسب تفضيلاتهم، مما يجعل تجربة التصفح أكثر سلاسة.

الإعدادات الأساسية للأكورديون

للبدء، يجب عليك التأكد من تحميل مكتبات Bootstrap CSS وJavaScript في ملف functions.php الخاص بموضوع ووردبريس. استخدم دالة wp_enqueue لتسهيل ذلك. بدايةً، ستحتاج إلى إدراج ملف CSS وJavaScript الخاصين بـ Bootstrap بالطريقة التالية:

function hello_elementor_child_scripts_styles() {
    wp_enqueue_style('bootstrap-cdn-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css');
    wp_enqueue_script('bootstrap-cdn-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'hello_elementor_child_scripts_styles', 20);

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

إنشاء اختصار للأكورديون

الخطوة التالية تركز على إنشاء اختصار (shortcode) يعرض المحتوى داخل الأكورديون. هنا، سنقوم بإعادة تسمية الدالة وتعبئة المحتوى داخل الأكورديون باستخدام دالة ob_start() التي تلتقط المحتوى داخل كود PHP. استخدم الكود التالي:

function program_post_list_acc($atts) {
    ob_start();
    $post = get_the_post_thumbnail($atts['id'], 'medium');
    echo $post;
    $post_program = get_post($atts['id']);
    $tit = apply_filters('the_title', $post_program->post_title);
    echo '<h4>' . $tit . '</h4>';
    $categories = get_the_terms($atts['id'], 'YOUR_TAXONOMY');
    if ($categories) {
        foreach ($categories as $category) {
            echo '<p>' . esc_html($category->name) . '</p>';
        }
    }
    $output = Elementor\Plugin::instance()->frontend->get_builder_content($atts['id']);
    echo '<div class="panel-collapse collapse">' . $output . '</div>';
    return ob_get_clean();
}
add_shortcode('program_post_list_accordian', 'program_post_list_acc');

تفعيل الأكورديون

بعد إعداد كل شيء، يمكنك إدراج الاختصار الجديد داخل أي منشور أو صفحة ببساطة باستخدام [program_post_list_accordian id="YOUR_POST_ID"]. ستظهر المحتويات بتنسيق الأكورديون، مما يسهل على الزائرين التفاعل مع المحتوى.

تحسين تجربة المستخدم

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

خاتمة

استخدام Bootstrap Accordion in wordpress functions.php هو خطوة هامة في تحسين واجهة المستخدم. سواء كنت تبني موقعاً تعليمياً، أو مدونة، أو أي نوع آخر من المواقع، فإن دمج الأكورديون سيساعدك في تنظيم المحتوى بشكل فعال. استخدم الخطوات المذكورة أعلاه وأضف لمسة من الجاذبية والاحترافية لموقعك.