Today I have a little time, I will guide you write slider TGDD. The following is just a basic guide, so the code is not optimized. You can edit your own way.
First, I created a CPT for the Slider
I wrote in the file function.php, create a new Post Type
function hdev_create_post_type_slide_tgdd() {
$labels = array(
'name' => 'Slide TGDD',
'singular_name' => 'Slide TGDD',
'add_new' => 'Add New Slide',
'all_items' => 'All Slide',
'add_new_item' => 'Add New Slide',
'edit_item' => 'Edit Item',
'new_item' => 'New Slide',
'view_item' => 'View Slide',
'search_items' => 'Search Slide',
'not_found' => 'Not Found',
'not_found_in_trash' => 'Not found in Trash',
'parent_item_colon' => 'Parent Slide'
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'publicly_queryable' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'hdev-slider'),
'capability_type' => 'post',
'hierarchical' => false,
'menu_icon' => 'dashicons-video-alt3',
'supports' => array('title'),
'menu_position' => 5,
'exclude_from_search' => false
);
register_post_type( 'hdev-slide', $args );
}
add_action( 'init', 'hdev_create_post_type_slide_tgdd' );
Next, I create a metabox for CPT on
function add_metabox_slide()
{
add_meta_box(
'post_slide',
'Slide TGDD',
'hdev_content_slide_options',
'hdev-slide',
'normal',
'core'
);
}
add_action( 'admin_init', 'add_metabox_slide' );Create reptables content for metabox, I found on stackoverflow, and improved. But it is important to first add the following code:
$hdev_rep_fields = array('hdev-slide');
add_action( 'admin_enqueue_scripts', 'hdev_add_media_upload' );
function hdev_add_media_upload() {
global $post;
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
wp_enqueue_media(array( 'post' => $post->ID, ));
}then the code:
function hdev_content_slide_options() {
global $post;
$slide_data = get_post_meta( $post->ID, 'slide_data', true );
wp_nonce_field( plugin_basename( __FILE__ ), 'noncename_hdev' ); ?>
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="95%"></th>
<th width="5%"></th>
</tr>
</thead>
<tbody>
<?php
if ( isset( $slide_data['image_url'] ) ) :
for( $i = 0; $i < count( $slide_data['image_url'] ); $i++ ) { ?>
<tr>
<td>
<div class="field_row">
<div class="field_left">
<div class="image_wrap">
<img src="<?php esc_html_e( $slide_data['image_url'][$i] ); ?>" />
</div>
<input class="button" type="button" value="Hình slide" onclick="add_image(this)" />
</div>
<div class="field_right">
<div class="form_field">
<input type="hidden"
class="meta_image_url"
name="slide[image_url][]"
value="<?php esc_html_e( $slide_data['image_url'][$i] ); ?>"
/>
<input type="hidden"
class="meta_image_id"
name="slide[image_id][]"
value="<?php esc_html_e( $slide_data['image_id'][$i] ); ?>"
/>
</div>
<div class="form_field">
<textarea
class="meta_image_desc"
name="slide[image_desc][]"
rows="3"
placeholder = "Tiêu đề hoặc mô tả">
<?php esc_html_e( $slide_data['image_desc'][$i] ); ?>
</textarea>
</div>
</div>
</div>
</td>
<td><a class="button remove-row" href="#">-</a></td>
</tr>
<?php } // endif
else : ?>
<tr>
<td>
<div class="field_row">
<div class="field_left">
<div class="image_wrap"></div>
<input class="button" type="button" value="Hình slide" onclick="add_image(this)" />
</div>
<div class="field_right">
<div class="form_field">
<input type="hidden" class="meta_image_url" value="" name="slide[image_url][]" />
<input type="hidden" class="meta_image_id" value="" name="slide[image_id][]" />
</div>
<div class="form_field">
<textarea class="meta_image_desc" name="slide[image_desc][]" rows="3" placeholder = "Tiêu đề hoặc mô tả"></textarea>
</div>
</div>
</div>
</td>
<td><a class="button remove-row" href="#">-</a></td>
</tr>
<?php endif; ?>
<!-- Empty -->
<tr class="empty-row screen-reader-text">
<td>
<div class="field_row">
<div class="field_left">
<div class="image_wrap"></div>
<input class="button" type="button" value="Hình slide" onclick="add_image(this)" />
</div>
<div class="field_right">
<div class="form_field">
<input type="hidden" class="meta_image_url" value="" name="slide[image_url][]" />
<input type="hidden" class="meta_image_id" value="" name="slide[image_id][]" />
</div>
<div class="form_field">
<textarea class="meta_image_desc" name="slide[image_desc][]" rows="3" placeholder = "Tiêu đề hoặc mô tả"></textarea>
</div>
</div>
</div>
</td>
<td><a class="button remove-row" href="#">-</a></td>
</tr>
</tbody>
</table>
<!-- Button Add New Rep -->
<a id="add-row-slide" class="button">Thêm slide (+)</a>
<?php }And save mata box:
add_action( 'save_post', 'hdev_update_slide' );
function hdev_update_slide( $post_id )
{
// Doing revision, exit earlier **can be removed**
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
// Verify authenticity
if ( !wp_verify_nonce( $_POST['noncename_hdev'], plugin_basename( __FILE__ ) ) ) return;
global $rep_fields;
if ( !in_array( get_post_type( $post_id), $rep_fields ) ) return;
if ( $_POST['slide'] ) {
// Build array for saving post meta
$slide_data = array();
for ($i = 0; $i < count( $_POST['slide']['image_url'] ); $i++ )
{
if ( '' != $_POST['slide']['image_url'][ $i ] )
{
$slide_data['image_url'][] = $_POST['slide']['image_url'][ $i ];
$slide_data['image_id'][] = $_POST['slide']['image_id'][ $i ];
$slide_data['image_desc'][] = $_POST['slide']['image_desc'][ $i ];
}
}
if ( $slide_data ) update_post_meta( $post_id, 'slide_data', $slide_data );
else delete_post_meta( $post_id, 'slide_data' );
} else {
delete_post_meta( $post_id, 'slide_data' );
}
}and script code:
add_action( 'admin_head-post.php', 'hdev_add_scripts' );
add_action( 'admin_head-post-new.php', 'hdev_add_scripts' );
function hdev_add_scripts() { ?>
<style type="text/css">
.field_left {
float:left;
width: 25%;
padding-right: 20px;
box-sizing:border-box;
}
.field_right {
float:right;
width: 75%;
}
.image_wrap img {
max-width: 100%;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('a#add-row-slide').click(function(){
var row = jQuery('.empty-row.screen-reader-text').clone(true);
row.removeClass('empty-row screen-reader-text');
row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
return false;
});
$('.remove-row').on('click', function() {
$(this).parents('tr').remove();
return false;
});
});
function add_image(obj) {
var parent=jQuery(obj).parent().parent('div.field_row');
var inputField = jQuery(parent).find("input.meta_image_url");
var inputFieldID = jQuery(parent).find("input.meta_image_id");
var fileFrame = wp.media.frames.file_frame = wp.media({multiple: false});
fileFrame.on('select', function() {
var selection = fileFrame.state().get('selection').first().toJSON();
inputField.val(selection.url);
inputFieldID.val(selection.id);
jQuery(parent)
.find("div.image_wrap")
.html('<img src="'+selection.url+'" />');
});
fileFrame.open();
};
function remove_field(obj) {
var parent=jQuery(obj).parent().parent();
parent.remove();
}
function add_field_row() {
var row = jQuery('#master-row').html();
jQuery(row).appendTo('#field_wrap');
}
</script>
<?php }Finally, display the font-end
I use the Flatsome theme, should take advantage of its Flickity Slider library, if you use other add, please embed the Flickity library. I added the following code to display (note I use shortcode)
function hdev_shortcode_slide( $atts ) {
ob_start();
global $post;
extract( shortcode_atts( array (
'type' => 'hdev-slide',
'p' => '',
), $atts ) );
$options = array(
'post_type' => $type,
'p' => $p
);
$hdev_query = new WP_Query($options);
while ( $hdev_query->have_posts() ) : $hdev_query->the_post();
if ( '' != get_post_meta( get_the_ID(), 'slide_data', true ) ) { $slide = get_post_meta( get_the_ID(), 'slide_data', true ); }
echo '<div class="slide">';
echo '<div class="carousel carousel-main" data-flickity="{"cellAlign": "center", "wrapAround": true, "autoPlay": 6000, "pauseAutoPlayOnHover" : true, "prevNextButtons": true, "pageDots": false, "rightToLeft": false }">';
if ( isset( $slide['image_id'] ) ) :
for( $i = 0; $i < count( $slide['image_id'] ); $i++ ) {
if ( '' != $slide['image_id'][$i] ) {
$getImg = wp_get_attachment_image( $slide['image_id'][$i], 'slide_large' );
echo '
<div class="carousel-cell">
<a href="#"><img alt="a1" src="'.$getImg.'</a>
</div>
';
}
}
echo '</div>';
echo '
<div class="carousel carousel-nav" data-flickity="{ "asNavFor": ".carousel-main", "contain": true, "pageDots": false, "prevNextButtons": false }">
';
for( $i = 0; $i < count( $slide['image_id'] ); $i++ ) {
if ( '' != $slide['image_id'][$i] ) {
echo '
<div class="carousel-cell slide-bottom">'.$slide['image_desc'][$i].'</div>
';
}
}
echo '</div>';
echo '</div>';
endif;
endwhile;
wp_reset_postdata(); // reset the query
return ob_get_clean();
}
add_shortcode( 'HDEV_SLIDE', 'hdev_shortcode_slide' );To use: You add the following shortcode:
[HDEV_SLIDE p=id]
the value of ‘p’ is the ID of the slide. See demo at: wsmart.asia