وبلاگ

چگونه اسلایدر اختصاصی در وردپرس ایجاد کنیم؟

بیشتر سایت های وردپرس از افزونه های اسلایدر استفاده می کند که معروف ترین آن افزونه Slider Revolution است که امکانات خوبی برای ساخت اسلایدرها ارائه می کند. در این نوشته آموزش خواهیم داشت که چگونه یک اسلایدر اختصاصی با استفاده از نوع پست (Post Type) وردپرس بدون افزونه ایجاد کنید.

 

۱.  نوع پست (Post Type) اسلایدر ایجاد می کنیم (کد زیر را در فایل Functions.php قرار دهید) :

 

// برای اسلایدر سایت

add_action( 'init', 'codex_Orchiddev_init' );
function codex_Orchiddev_init() {
    $labels = array(
        'name'               => _x( 'اسلایدر ها', 'post type general name', 'Orchiddev-slider' ),
        'singular_name'      => _x( 'اسلایدر', 'post type singular name', 'Orchiddev-slider' ),
        'menu_name'          => _x( 'اسلایدر ها', 'admin menu', 'Orchiddev-slider' ),
        'name_admin_bar'     => _x( 'اسلایدر', 'add new on admin bar', 'Orchiddev-slider' ),
        'add_new'            => _x( 'افزودن جدید', 'Orchiddev', 'Orchiddev-slider' ),
        'add_new_item'       => __( 'افزودن اسلایدر جدید', 'Orchiddev-slider' ),
        'new_item'           => __( ' اسلایدر جدید', 'Orchiddev-slider' ),
        'edit_item'          => __( 'ویرایش اسلایدر', 'Orchiddev-slider' ),
        'view_item'          => __( 'مشاهده اسلایدر', 'Orchiddev-slider' ),
        'all_items'          => __( 'همه اسلایدر ها', 'Orchiddev-slider' ),
        'search_items'       => __( 'جستجو اسلایدر ها', 'Orchiddev-slider' ),
        'parent_item_colon'  => __( 'مادر اسلایدر ها:', 'Orchiddev-slider' ),
        'not_found'          => __( 'اسلایدری پیدا نشد', 'Orchiddev-slider' ),
        'not_found_in_trash' => __( 'اسلایدری در زباله دان پیدا نشد', 'Orchiddev-slider' )
    );
    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => array( 'slug' => 'Orchiddev' ),
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => false,
        'menu_position'      => null,
        'supports'           => array( 'title', 'editor', 'thumbnail')
    );
 register_post_type( 'Orchiddev', $args );
}

 

۲. تصاویر شاخص وردپرس فعال می کنیم :

 

// فعال سازی تصاویر شاخص وردپرس

if (function_exists('add_theme_support')) {
    add_theme_support( 'post-thumbnails' );
}

 

۳. از اسلایدر زیر استفاده می کنیم:

 

پیوند : https://bootsnipp.com/snippets/4MeVm

 

۴. کد زیر را در صفحه اصلی پوسته قرار دهید:

 

<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
    <?php
        $arg = array(
                'post_type'   => 'Orchiddev',
                'posts_per_page' => 10,
                'order'   => 'ASC'
            );
        $Orchiddev= new WP_Query($arg);
        $j = 0;
        $post_count = wp_count_posts('Orchiddev')->publish;
    ?>
    <div class="carousel-inner">
        <?php while($Orchiddev->have_posts()) : $Orchiddev->the_post(); ?>
            <div class="carousel-item <?php echo $j==0 ? ' active': '';?>">
                <div class="mask flex-center">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-md-7 col-12 order-md-1 order-2">
                                <h4><?php the_title() ?></h4>
                                <p><?php the_content() ?></p>
                            </div>
                                <div class="col-md-5 col-12 order-md-2 order-1 mx-auto">
                            <?php echo the_post_thumbnail('full'); ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php $j++; endWhile; wp_reset_query(); ?>
    </div>
             
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> 
        <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
        <span class="sr-only">قبلی</span> 
    </a> 
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> 
        <span class="carousel-control-next-icon" aria-hidden="true"></span> 
        <span class="sr-only">بعدی</span> 
    </a>		
</div>