ایجاد و نمایش نمونه کارها با استفاده از کتابخانه mixitupJS در وردپرس

mixitup یک کتابخانه جی کوئری است که فیلتر و مرتب سازی متحرک را ارائه می دهد و برای مدیریت هر محتوای طبقه بندی شده یا سفارشی مانند نمونه کارها، گالری ها و وبلاگ ها عالی است، همچنین می تواند به عنوان یک ابزار قدرتمند برای تعامل با رابط کاربری برنامه و تجسم داده ها عمل کند.

۱. پست تایپ (نوع نوشته) برای نمونه کارها یا گالری ایجاد کنید.

add_action( 'init', 'portfolios' );
function portfolios() {
    register_post_type( 'portfolios',
        array(
            'labels' => array(
                'name' => 'نمونه کار ها',
                'singular_name' => 'نمونه کار'
            ),
            'public' => true,
            'rewrite' => array( 'slug' => 'portfolios' ),
            'menu_icon' => 'dashicons-slides',
            'supports' => array('title', 'thumbnail', 'editor'),
            'taxonomies' => array('category'),
        )
    );
}

۲. فایل های مورد نیاز را در فایل Functions.php فراخوانی کنید.

function OrchidDev_scripts()
{
    wp_enqueue_style('bootstrap-rtl',Orchiddev_URL . '/css/bootstrap.rtl.min.css');
    wp_enqueue_script('jquery_js',Orchiddev_URL . '/js/jquery.min.js',array('jquery'),true);
    wp_enqueue_script('mixitup_min_js',Orchiddev_URL . '/js/mixitup.min.js',array(),true);
}
add_action('wp_enqueue_scripts','OrchidDev_scripts');

کد بالا فایل های بوت استرپ ۵ و جی کوئری ۳.۳.۶ و mixitup فراخوانی می کند.

در فایل header.php در داخل تگ head توابع <?php wp_head() ?> را قرار دهید تا فایل های فراخوانی شده اعمال شود.

۳. کد نمایش نمونه کار همراه با کد توابع وردپرس :

<!-- نمونه کارها -->
<div class="title mt-3 text-center">
    <h1 class="fs-3">نمونه کارها</h1>
</div>

<section class="portfolio mt-4 mb-4">
    <div class="text-center">
        <?php
        $all_categories = get_categories(array(
            'hide_empty' => true
        ));
        ?>
        <?php foreach($all_categories as $category): ?>
            <button type="button" class="btn btn-danger" data-filter=".<?php echo $category->slug; ?>"><?php echo $category->name; ?></button>
        <?php endforeach; ?>
    </div>

    <div class="filter">
        <div class="row mt-4">
            <?php
                $args = array(
                    'post_type' => array('portfolios'),
                );

                $query = new WP_Query($args);

                if ($query->have_posts()){
                    while ($query->have_posts()){
                        $query->the_post();
                        $categories = get_the_category();
                        $slugs = wp_list_pluck($categories, 'slug');
                        $class_names = join(' ', $slugs);
            ?>
            <div class="col-6 col-md-3 mb-3 mix<?php if ($class_names) { echo ' ' . $class_names;} ?>" id="caption">
                        <span class ="text text-center">
                            <i class="fa-solid fa-eye fa-2x"></i>
                            <h4><?php the_title() ?></h4>
                        </span>
                <figure class="imgport">
                    <?php echo the_post_thumbnail('full', ['class' => 'img-fluid']) ?>
                </figure>
            </div>
            <?php   }
                }
            ?>
        </div>
    </div>
</section>
<!-- پایان نمونه کارها -->

۴. فعال سازی کتابخانه mixitupJS :

<script>
    var containerEl = document.querySelector('.filter');
    var mixer = mixitup(containerEl);
</script>

پیش نمایش :