سلام دوستان امروز. امروز تصمیم به ارسال مقاله ای درباره روش ساخت post type اسلایدر در وردپرس گرفتم. در این مقاله خواهم گفت که چگونه می توانیم post type اسلایدر و شورت کد مربوط به آن را بسازیم.

در مقالات قبلی مدرسه وردپرس، درباره آموزش ساخت post type و آموزش ساخت شورت کد گفته شده است.

بسیار خب شروع می کنیم.

برای ساخت post type اسلایدر ، فایل فانکشن پوسته خود را در حالت ادیت باز کنید. سپس کد زیر را قبل از  ?> داخل آن قرار دهید:

add_theme_support( 'post-thumbnails' );
function slider_register() {  
    $args = array(  
        'label' => __('اسلایدر'),  /////////////// نام post type
        'singular_label' => __('اسلایدر'),  
        'public' => true,   ///////////// حالت عمومی post type
        'show_ui' => true,  /////////////// نمایش Post type
        'capability_type' => 'post',  //////////// نوع post type
        'hierarchical' => false,  
        'rewrite' => true,  
        'supports' => array('title', 'editor', 'thumbnail')   ////////////// امکاناتی که  post type خواهد داشت
       );  
    register_post_type( 'slider' , $args );   ///////////// ساخت post type
}
add_action('init', 'slider_register');
  •  add_theme_support( ‘post-thumbnails’ );: با استفاده از این کد تعیین می کنید که این post type اسلایدر از تصویر شاخص پشتیبانی می کند و مطالب آن دارای تصویر شاخص هستند
  • slider_register نام تابعی است که که توسط آن post type ساخته می شود. این تابع دارای یک آرایه است که داخل آن آرگومان های post type تعریف می شود که داخل کد بالا توضیحاتشان را قرار دادم.

حالا کد زیر به هم اضافه کنید

add_filter("manage_edit-slider_columns", "slider_edit_columns");   
function slider_edit_columns($columns){  
        $columns = array(  
            "cb" => "<input type=\"checkbox\" />",  
            "title" => "slider",  
            "image" => "image",  
        );  
   
        return $columns;  
} 
function slider_thumbnail_url($pid){
    $image_id = get_post_thumbnail_id($pid);  
    $image_url = wp_get_attachment_image_src($image_id,'screen-shot');  
    return  $image_url[0];  
}
 
add_action("manage_posts_custom_column",  "slider_custom_columns"); 

function slider_custom_columns($column){  
        global $post;  
		 $image_id = get_post_thumbnail_id($pid);  
    $image_url = wp_get_attachment_image_src($image_id,'screen-shot');  
        switch ($column)  
        {  
            
            case "image":  
                $custom = get_post_custom();  
                echo '<img src="'.$image_url[0].'" width="50" height="50" />';  
                break;  
        }  
}

کد بالا در واقع ستون های post type اسلایدر را تعیین خواهد کرد.

ستون ها در Post type

حالا فایل را ذخیره کرده و پیشخوان خود را باز کنید. خواهید دید که post type اسلایدر به منو سمت راست پیشخوان اضافه شده است و می توانید اسلاید ها را در آن اضافه کنید.

اما سوال بعدی اینجاست: این اسلایدر کجا نشان داده می شود؟

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

نکته: در این آموزش برای ساخت اسلایدر از فریم ورک Bootstrap استفاده خواهد شد

 

 ساخت شورت کد post type اسلایدر

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

دوباره فایل فانکشن رو در حالت ادیت باز کنید و کد زیر را داخل آن قرار دهید:

///////////////////////////// شورت کد اسلایدر //////////////////////////////
function slider_shortcode($atts,$content = null) {
global $post;
  $posts = new WP_Query($atts);
  query_posts('post_type=slider');  // نام post type که ساخته این را قرار میدیم
  ob_start();?>
<div id="carousel-main-slider" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
<?php 
$slider=0;
if (have_posts()) : while (have_posts()) : the_post(); ?>
 <div class="item <?php if ($slider==0) { echo "active";} else { echo "";} ?>">
           <?php the_post_thumbnail('full');  //////// تصویر شاخص ?>  
   <div class="carousel-caption">
   <h3><?php the_title();   /////// عنوان اسلایدر ?></h3>
    <?php the_content();   ///////// محتوای اسلایدر?>
</div>
</div>
<?php
$slider++;
 endwhile; endif; ?>
  </div>  
  <a class="left carousel-control" href="#carousel-main-slider" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-main-slider" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
<?php
  wp_reset_query();
   return ob_get_clean()
 ; }
add_shortcode('elnaz_slider', 'slider_shortcode');  //// دستور ساخت شورت کد

حالا با فراخوانی شورت کد

[elnaz_slider]

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

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

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

موفق باشید

4 دیدگاه برای “آموزش ساخت post type اسلایدر

  • علیرضا
    - ۲۷ شهریور , ۱۳۹۳

    بسیار عالی

  • حسین مظهری
    - ۱۸ آبان , ۱۳۹۳

    درود

    سایت شما نسبت به سایت های وردپرس دیگه بهتره این نظره منه بقیه شاید میگن بده
    ولی از مطالبتون استفاده کردم بسیار عالی مممنونم ازتون
    لطفا بیشتر از این مطالب بزارید
    ==========
    اگه کمک خواستین در اداره سایت میتونم به شما کمک کنم تو پست گزاشتن
    ========
    با آرزوی موفقیت برای مدرسه وردپرس

    • الناز بیک زاده
      - ۲۰ آبان , ۱۳۹۳

      سلام دوست عزیز. لطف دارید ممنون

  • میثم
    - ۱ دی , ۱۳۹۳

    ممنون به کارم اومد

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

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

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