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

در این نوشته می خواهیم نحوه ایجاد اسلایدر برای تصاویر در نوشته های وردپرس را آموزش دهیم و افزونه های نظیر المنتور چنین قابلیتی دارد و اما می خواهیم با کد نویسی این امکان برای پوسته وردپرس را ایجاد کنیم.
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) سازگار نباشد.
نمونه اسلایدر برای تصاویر در نوشته ها:

موفق باشید 🙂