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

1. پست تایپ (Post Type) مورد نظر برای اسلایدر عکس در نوشته ها ایجاد می کنیم:

add_action('init', 'trait_c');
function trait_c(){
    register_post_type( 'trait',
        array(
            'labels' => array(
                'name' => 'ویژگی ها',
                'singular_name' => 'ویژگی'
            ),
            'rewrite' => array('slug' => 'trait'),
            'public' => true,
            'supports' => array('title', 'editor'),
        )
    );
}

پست تایپ بالا بخش ویژگی ها در در سایدبار وردپرس نمایش میدهد.

2. افزونه CMB2 برای ایجاد زمینه دلخواه تکرار شونده دانلود و نصب کنید : پیوند

3. با کد زیر زمینه دلخواه لینک عکس به اسلایدر را ایجاد می کنیم:

add_action( 'cmb2_init', 'register_metabox' );
function register_metabox() {
    $prefix = '_fabreview_meta_';
    $cmb_review = new_cmb2_box( array(
        'id' => $prefix . 'metabox',
        'title' => __( 'جعبه اسلایدر', 'cmb2' ),
        'object_types' => array( 'trait')
    ));
    $group_field_id = $cmb_review->add_field( array(
        'id' => 'review_criteria',
        'type'  => 'group',
        'description' => '',
        'options'  => array(
        'group_title' => __('عکس {#}', 'cmb'),
        'add_button' => __('افزودن جعبه جدید', 'cmb'),
        'remove_button' => __('حذف جعبه', 'cmb'),
        'sortable'  => true,

        ),
    ));
    $cmb_review->add_group_field( $group_field_id, array(
        'name'  => 'لینک عکس',
        'id'  => 'crit_score',
        'type'  => 'text',
    ));
}

زمینه دلخواه مورد نظر در زیر ویرایشگر پست تایپ نشان میدهد:

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

<div class="col-md-12 py-4">
  <div class="row">
    <?php
    $q = new WP_Query(
      array(
        "posts_per_page" => 10,
        "post_type" => "trait",
        'order' => 'ASC'
      )
    );
    while($q->have_posts()){
      $q->the_post();
      $random = mt_rand(10000,1000000);
    ?>
    <div class="col-md-4 mb-2">
      <article class="attr card" role="article">
        <div class="card-body">
        <div id="carouselExampleControl_<?php echo $random; ?>" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <?php
              $count = 0;
                $entries = get_post_meta( get_the_ID(), 'review_criteria', true ); 
                if ($entries){
                foreach ( (array) $entries as $key => $entry ) {
                  $score  = '';
                  if ( isset( $entry['crit_score'] ))
                    $score = esc_html( $entry['crit_score'] );
                
              ?>
              <div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>">
                <img src="<?php echo $score; ?>" class="d-block w-100 imgs">
              </div>
              <?php
              $count++; 
                  }
                }  
              ?>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControl_<?php echo $random;?>" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControl_<?php echo $random;?>" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
          <h4 class="card-title mt-4 font-weight-bold text-center"><?php the_title() ?></h4>
          <p class="card-text text-right"><?php the_content() ?></p>
        </div>
      </article>
    </div>
    <?php } wp_reset_postdata(); ?>       
  </div>
</div>

نکته : کد آخر با چارچوب بوت استرپ (Bootstrap) نسخه 4.5 استفاده شده است و ممکنه در نسخه های قدیمی بوت استرپ (Bootstrap) سازگار نباشد.

نمونه اسلایدر برای تصاویر در نوشته ها:

موفق باشید 🙂