فیلتر مطالب براساس دسته بندی AJAX

سلام دوستان عزیز. مقاله امروز مدرسه وردپرس درباره نحوه ساخت ” فیلتر مطالب براساس دسته بندی AJAX ” در وردپرس می باشد.

مقدمه:

با استفاده از ajax می توانیم بدون نیاز به refresh شدن صفحه داده هایی از دیتابیس دریافت کنیم در کسری از ثانیه. امروز در بسیاری از وبسایت ها عملکرد ajax را میبینم و می توان گفت که ajax در بسیار از وبسایت ها استفاده میشود. در فرم های ورود و عضویت، خرید محصولات، فیلتر مطالب و ….

فیلتر مطالب براساس دسته بندی AJAX

برای ساخت فیلتر مطالب براساس دسته بندی AJAX در ابتدا می بایست یک ابزارک دسته بندی سفارشی بسازیم. پس برای ساخت ابزارک دسته بندی کد زیر را به فایل functions.php اضافه می کنیم:

class wps_categories_widget extends WP_Widget {

    function wps_categories_widget() {
        $widget_ops = array( 'classname' => 'widget_categories', 'description' => __( "ابزارک دسته بندی ها مدرسه وردپرس" ) );
        $this->WP_Widget('my_categories', __('دسته بندی ها - مدرسه وردپرس'), $widget_ops); // نام و توضیحات ابزارک
    }

    function widget( $args, $instance ) {
        extract( $args );
        // مقادیر پیشفرض برای فیلد ها
        $title = apply_filters('widget_title', empty( $instance['title'] ) ? __( 'دسته بندی ها' ) : $instance['title']);
        $c = $instance['count'] ? '1' : '0';
        $h = $instance['hierarchical'] ? '1' : '0';

        echo $before_widget;
        if ( $title )
            echo $before_title . $title . $after_title;

        $cat_args = array('orderby' => 'name', 'show_count' => $c, 'hierarchical' => $h);
    ?>
        <ul class="wps-category-list">
<?php
        $args = array(
          'orderby' => 'name',
          'order' => 'ASC',
          );
    $categories = get_categories($args);
      foreach($categories as $category) { 
        echo '<li><a id="'.$category->term_id.'" href="' . get_category_link( $category->term_id ) . '" ' . '>' . $category->name.'</a></li>';
        } 
?>
        </ul>
<?php
        

        echo $after_widget;
    }
    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['count'] = $new_instance['count'] ? 1 : 0;
        $instance['hierarchical'] = $new_instance['hierarchical'] ? 1 : 0;

        return $instance;
    }
    function form( $instance ) {
        //Defaults
        $instance = wp_parse_args( (array) $instance, array( 'title' => '') );
        $title = esc_attr( $instance['title'] );
        $count = isset($instance['count']) ? (bool) $instance['count'] :false;
        $hierarchical = isset( $instance['hierarchical'] ) ? (bool) $instance['hierarchical'] : false;
?>
        <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e( 'Title:' ); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></p>

        <input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>"<?php checked( $count ); ?> />
        <label for="<?php echo $this->get_field_id('count'); ?>"><?php _e( 'Show post counts' ); ?></label><br />

        <input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id('hierarchical'); ?>" name="<?php echo $this->get_field_name('hierarchical'); ?>"<?php checked( $hierarchical ); ?> />
        <label for="<?php echo $this->get_field_id('hierarchical'); ?>"><?php _e( 'Show hierarchy' ); ?></label>
<?php
    }
}
add_action('widgets_init', create_function('', "register_widget('wps_categories_widget');"));

فایل را ذخیره کنید و به بخش ابزارک ها بروید. باید یک ابزارک جدید به نام “دسته بندی ها – مدرسه وردپرس” اضافه شده باشد.

ساخت ابزارک دسته بندی ها

حالا ابزارک را داخل یکی از سایدبار ها قرار دهید و سپس صفحه نخست وبسایت خود را باز کنید. باید لیست دسته بندی ها را در داخل سایدبار داشته باشید.

لیست دسته بندی ها

اگر بر روی یکی از دسته بندی ها کلیک کنید، صفحه رفرش شده و مطالب اون دسته بندی نمایش داده میشه اما هدف ما نمایش مطالب دسته بندی بدونه رفرش شدن صفحه هست.

کد jQuery فیلتر مطالب

حالا قدم بعدی ما نوشتن اسکریپت ajax هستش و با استفاده از اون id دسته بندی رو به سرور بفرستیم و مطالب رو براساس id دسته بندی فیلتر کنیم و نمایش بدیم.

کد زیر را در فایل مناسب قرار بدید. ( من کد رو داخل footer.php قرار دادم)

<script>
    jQuery('.wps-category-list li a').click(function(e){
        e.preventDefault();
        var catid = jQuery(this).attr("id");
        jQuery.ajax({
            type: 'POST',
            url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
            data: {
            'action': 'filter_category', 
            'catid': catid,
            },
            success: function(response){
                var resp = JSON.parse(response);
                if(resp.message == false){
                    jQuery('.site-main').empty();
                    jQuery('.site-main').append(resp.output);
            }
                else {
                    jQuery('.site-main').empty();
                    jQuery('.site-main').append("<div style='text-align:center; color:red;'>"+resp.message+"</div>");
                }
            },
            error: function(response){
                jQuery('.site-main').empty();
                jQuery('.site-main').append("<div style='text-align:center; color:red;'>خطایی در هنگام ارتباط با سرور به وجود آمده است. لطفا دوباره امتحان کنید!</div>");
            }
        });
    });
</script>

حالا با استفاده از کد preventdefault اگر بر روی تگ a کلیک بشه اتفاقی نمی افته. با کد بالا ما id دسته ای که روش کلیک میشه رو میگیریم و به سرور پاس میدیم با اکشن filter_category ، بعد سرور میگرده دنبال تابعی که اکشن filter_category رو داره و کارهای داخل تابع رو پردازش میکنه و نتیجه رو برمیگردونه. پس قدم بعدی ما ساخت تابع برای اکشن filter_category هستش.

ساخت تابع فیلتر مطالب

مجدد فایل functions.php را باز کنید و کد زیر را داخلش قرار دهید:

add_action( 'wp_ajax_filter_category', 'filter_category' );
add_action( 'wp_ajax_nopriv_filter_category', 'filter_category' );
function filter_category() {
    if( ! isset( $_POST ) || empty( $_POST )) {
        header( 'HTTP/1.1 400 Empty POST Values' );
        echo 'Could Not Verify POST Values.';
        exit;
    }
    $catid   = $_POST['catid'];
    if(!$catid == 0 || !empty($catid)) {
        $args = array(
            'post_type' => 'post',
            'tax_query' => array(
            array(
                'taxonomy' => 'category',
                'field'    => 'id',
                'terms'    => $catid,
            ),
            ),
        );
        $query = new WP_Query( $args );
        if ($query->have_posts()) {
            while ($query->have_posts()) {
                $query->the_post();
                $pid = get_the_ID();
                $timelink = twentyseventeen_time_link();
                $link = get_the_permalink();
                $thumb_id = get_post_thumbnail_id();
                $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true);
                $title = get_the_title();
                $content = get_the_content( sprintf(
                __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
                get_the_title()
                ) );
                if(!empty($thumb_url[0])) {
                   $img = "<img src='$thumb_url[0]' />";
                }
                else {
                   $img =="";
                }
                $out .= "<article id='post-$pid'>";
                $out .= "<header class='entry-header'><h2 class='entry-title'><a href='$link' rel='bookmark'>$title</a></h2> <br/> $timelink</header>";
                $out .= "<div class='post-thumbnail'><a href='$link'>$img</a></div>";
                $out .= "<div class='entry-content'>$content</div></article>";
            }
            $msg = false;
        }
        else {
            $msg = "مطلبی در این دسته بندی وجود ندارد";
        }
    }
    else {
        $msg = "کد دسته بندی صحیح نیست!";
    }
    $resp = array('message' => $msg , 'output' => $out);
    echo json_encode($resp);
    wp_die();
}

کد زیر جهت اجرای این تابع برای کاربران لاگین شده سایت هست:

add_action( 'wp_ajax_filter_category', 'filter_category' );

کد زیر هم برای کاربرانی که لاگین نشده اند:

add_action( 'wp_ajax_nopriv_filter_category', 'filter_category' );

ما هر دو کد بالا رو جهت دسترسی همه کاربران (کاربران عضو و کاربران غیر عضو ) به تابع قرار دادیم. در ادامه تابع ما ID دسته بندی رو دریافت کردیم و با استفاده از کوئری وردپرس مطالب براساس اون ID رو فیلتر کردیم.

آموزش امروز مدرسه وردپرس درباره ” فیلتر مطالب براساس دسته بندی AJAX ” به پایان رسید. امیدوارم لذت برده باشید

موفق باشید

همچنین بخوانید:

آموزش ساخت ابزارک سفارشی در وردپرس

ساخت ناحیه ابزارک در وردپرس

ساخت ابزارک نمایش مطالب براساس دسته بندی

ساخت پاپ آپ ثبت نام ajax

لاگین ajax در وردپرس