سلام دوستان عزیز. در آموزش امروز مدرسه وردپرس، میخواهیم نحوه ” ساخت اسلایدر در وردپرس ” با استفاده از Owl Carousel را توضیح بدهیم.

مقدمه آموزش

آموزش ساخت اسلایدر در وردپرس توسط یکی از کاربران عزیز مدرسه وردپرس درخواست داده شده است. در این آموزش ما نحوه ساخت Post type در وردپرس ، نحوه ساخت دسته بندی جدید و نحوه ساخت شورت کد در وردپرس را آموزش خواهیم داد.

ساخت اسلایدر در وردپرس

اولین قدم برای ساخت اسلایدر در وردپرس ، ساخت post type سفارشی می باشد. برای مطالعه مقاله کامل Post type در وردپرس کلیک کنید. برای افزودن post type اسلایدر،فایل functions.php را باز کنید، به انتهای کدها رفته و کد زیر را قرار دهید:

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

بعد از ذخیره فایل، پنل مدیریت وردپرس خود را Refresh کنید. باید post type به نام “اسلاید ها” به منو سمت راست اضافه شده باشد:

post typeدر وردپرس

ساخت دسته بندی برای post type

قدم بعدی ساخت دسته بندی برای post type اسلاید ها می باشد. پس کد زیر را در ادامه کدهای قبلی قرار دهید:

add_action( 'init', 'create_wpslider_taxonomies', 0 );

function create_wpslider_taxonomies() {
	$labels = array(
		'name'              => _x( 'دسته بندی', 'taxonomy general name', 'wpschool-slider' ),
		'singular_name'     => _x( 'دسته بندی', 'taxonomy singular name', 'wpschool-slider' ),
		'search_items'      => __( 'جستجو دسته بندی', 'wpschool-slider' ),
		'all_items'         => __( 'همه دسته بندی ها', 'wpschool-slider' ),
		'parent_item'       => __( 'دسته بندی مادر', 'wpschool-slider' ),
		'parent_item_colon' => __( 'دسته بندی مادر:', 'wpschool-slider' ),
		'edit_item'         => __( 'ویرایش', 'wpschool-slider' ),
		'update_item'       => __( 'بروزرسانی', 'wpschool-slider' ),
		'add_new_item'      => __( 'افزودن دسته جدید', 'wpschool-slider' ),
		'new_item_name'     => __( 'نام دسته جدید', 'wpschool-slider' ),
		'menu_name'         => __( 'دسته بندی', 'wpschool-slider' ),
	);
	$args = array(
		'hierarchical'      => true,
		'labels'            => $labels,
		'show_ui'           => true,
		'show_admin_column' => true,
		'query_var'         => true,
		'rewrite'           => array( 'slug' => 'wpslider_cat' ),
	);
	register_taxonomy( 'wpslider_cat', array( 'wpslider' ), $args );
}

در کد بالا با استفاده از تابع register_taxonomy و آرگومان هایی که بهش دادیم، یک دسته بندی به Post type اسلاید ها اضافه کردیم. حالا در ادامه یک دسته بندی ایجاد کنید و چند اسلاید جدید ثبت کنید و تصویر شاخص برای هر کدام قرار دهید. من یک دسته بندی به نام test ایجاد کردم و چهار اسلاید بهش اضافه کردم همراه با تصویر شاخص:

فراخوان فایل های مورد نیاز اسلایدر در پوسته

در این مرحله، شورت کد اسلاید ها را مینویسیم. این شورت کد 2 تا ورودی داره: 1: دسته بندی 2: تعداد اسلاید ها. اما قبل از نوشتن شورت کد باید فایل های Owl Carousel را دانلود کنیم. برای دانلود هم می توانید وارد سایت Owl Carousel  شوید و یا این فایل را دانلود کنید.

بعد از دانلود، فایل css و js را در جای مناسبی در پوسته خود قرار دهید. در پوسته 2017 وردپرس، فایل css را در مسیر assets/css و فایل js را در مسیر assets/js قرار دادم. حالا باید این فایل ها را در پوسته خود فراخوان کنیم. برای این کار از تابع wp_enqueue در وردپرس استفاده می کنیم. برای آشنایی بیشتر با این تابع، مقاله ” wp_enqueue در وردپرس ” را مطالعه کنید.

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

function slider_scripts() {
	wp_enqueue_style( 'owl-carousel-css', get_template_directory_uri() . '/assets/css/owl.carousel.min.css', false, '2.3.4');
	wp_enqueue_script( 'owl-carousel-js', get_template_directory_uri() . '/assets/js/owl.carousel.min.js', array(), '2.3.4', true );
}
add_action( 'wp_enqueue_scripts', 'slider_scripts' );

فایل های مورد نیاز ما برای ساخت اسلایدر در وردپرس با استفاده از Owl Carousel هم فراخوان شدند. حالا باید شورت کد را بسازیم.

ساخت شورت کد اسلایدر در وردپرس

برای ساخت شورت کد اسلایدر در وردپرس باید در ادامه کدهای قبلی کد زیر را قرار دهیم:

function wpschool_slider_shortcode_function($atts) {
	extract(shortcode_atts(array(
		"categoryid" => '',
        "count" => ''
	), $atts));
        $args = array(
        'post_type' => 'wpslider', // پست تایپ مد نظر
        'showposts' => $count,
        'tax_query' => array(
            array(
                'taxonomy' => 'wpslider_cat',
                'field'    => 'id',
                'terms'    => $categoryid,
                ),
            ),
        );
    $q = new WP_Query( $args );
	if($q->have_posts()) :
	ob_start(); ?>
	<div class="owl-carousel owl-theme wpschool-slider">
		<?php while ($q->have_posts()): $q->the_post(); ?>
        <div class="item">
            <?php
                $thumb_id = get_post_thumbnail_id();
                $thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true);
            ?>
            <div class="image-box">
                <img src="<?php echo $thumb_url[0];?>" alt="<?php the_title();?>" />
            </div>
            <div class="over-box">
                <a href="<?php the_permalink();?>" title="<?php the_title();?>">
                    <h2 class="title"><?php the_title();?></h2>
                    <span class="desc"><?php echo get_the_content();?></span>
                </a>
            </div>
        </div>
		<?php endwhile; ?>
	</div>
	<?php else : ?>
		<p> اسلایدری ثبت نشده است! </p>
	<?php endif; 
	$output_string = ob_get_contents();
	ob_end_clean();
	return $output_string;
	wp_reset_postdata();
}
add_shortcode('wpschool-slider', 'wpschool_slider_shortcode_function');

در کد بالا ما یک کوئری نوشتیم که مقدار دسته بندی و تعداد اسلاید ها از آرگومان های شورت کد به دست میاد. حالا شورت کد زیر را داخل یک برگه قرار بدید:

[wpschool-slider categoryid="2" count="4"]

حالا قبل از دیدن برگه، کد زیر را به فایل css خود اضافه کنید (برای زیباتر کردن اسلایدر):

.wpschool-slider {
    direction: ltr;
}

.wpschool-slider .item {
    position: relative;
}

.wpschool-slider  img {
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.wpschool-slider .over-box {
    position: absolute;
    bottom: 0px;
    background: #0000009e;
    width: 100%;
    right: 0;
    color: #fff !important;
    text-align: right;
    padding: 10px 20px;
    transform: translateY(300px);
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
}

.wpschool-slider .item:hover .over-box {
    transform: translateY(0px);
}

.wpschool-slider .item:hover img {
    -webkit-filter: grayscale(50%);
    filter: grayscale(50%);   
}

.wpschool-slider .over-box a {
    color: #fff;
    font-family: IRANSansWeb Regular
}

.wpschool-slider .over-box a h2 {
    color: #fff;
    margin: 0;
    font-size: 22px;
}

.wpschool-slider .over-box a span {
    font-size: 13px;
}

.wpschool-slider .owl-nav {
    text-align: center;
    font-size: 35px;
}

و همچنین کد جی کوئری زیر را به یک فایل مناسب اضافه کنید و یا در فایل footer.php بعد از کد <?php the_footer();?> قرار دهید:

<script>
    jQuery('.wpschool-slider').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    navigation : true,
    items : 2,
})
</script>

حالا برگه ای که ایجاد کردید رو باز کنید. باید اسلایدرتون چیزی شبیه به این باشه:

ویدئو آموزش ساخت اسلایدر در وردپرس به زودی تهیه در در آپارات مدرسه وردپرس و همین مقاله منتشر خواهد شد.

نکته: برای تغییر تعداد اسلاید ها و… می توانید مستندات Owl Carousel را مطالعه کنید و یا نمونه اسلاید های Owl Carousel را ببینید.

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

موفق باشید

2 دیدگاه برای “آموزش ساخت اسلایدر در وردپرس

  • gholamreza
    - ۴ اردیبهشت , ۱۳۹۷

    اموزش بسیار عالی بود

  • vv e
    - ۱۲ خرداد , ۱۳۹۷

    سلام وقت بخیر این ابزارک رو بنده خودم ایجاد کردم ممنونم.
    تنها یک موضوع هست که بنده میخوام یک تمپلت html رو به یک پیج وردپرسی تبدیل کنم.
    این اچ تی ام ال که برای ورود به سایت هستش شامل سه فولدره
    js
    css
    images
    و یک اچ تی ام ال
    index.html

    ممنون میشم یک راهنمایی بکنید چطور تبدیل ب php کنم فایل رو پیوست کرد

    فایل html
    http://up.panafile.ir/downloads/up/152793894347671.zip

دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

-- بارگیری کد امنیتی --