WP开发教程 WordPress导师在线教程
把html里面拖拉重新排序的button改成了a， 因为button在post管理页面的话有默认的提交的动作
<?php
// Register Custom Post Type for Sliders
function tie_slider_register() {
$labels = array(
'name' => __('Custom Sliders', 'tie'),
'singular_name' => __('Slider', 'tie'),
'add_new_item' => __('Add New Slider', 'tie'),
);
$args = array(
'labels' => $labels,
'public' => false,
'show_ui' => true,
'menu_icon' => '',
'can_export' => true,
'exclude_from_search' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => 6,
'rewrite' => array('slug' => 'slider'),
'supports' => array('title')
);
register_post_type('tie_slider', $args);
}
add_action('init', 'tie_slider_register');
// Add Meta Box for Slider Items
function tie_slider_init() {
add_meta_box("tie_slider_slides", "Slides", "tie_slider_slides", "tie_slider", "normal", "high");
}
add_action("admin_init", "tie_slider_init");
// Display Slider Items Meta Box
function tie_slider_slides() {
global $post;
$slider = get_post_meta($post->ID, 'custom_slider', true);
wp_nonce_field(basename(__FILE__), 'custom_slider_nonce');
?>
<div class="tie-slider-wrapper">
<div class="tie-slider-header">
<h2><?php _e('Slider Management', 'tie'); ?></h2>
<button id="upload_add_slide" type="button" class="button button-primary">
<span class="dashicons dashicons-plus-alt2"></span>
<?php _e('Add New Slide', 'tie') ?>
</button>
</div>
<ul id="tie-slider-items">
<?php
if (!empty($slider)) {
foreach ($slider as $i => $slide) {
?>
<li id="listItem_<?php echo $i ?>" class="tie-slide-item">
<div class="tie-slide-content">
<div class="tie-slide-image">
<div class="image-wrapper">
<?php echo wp_get_attachment_image($slide['id'], 'medium'); ?>
<button class="change-image button" data-index="<?php echo $i ?>">
<span class="dashicons dashicons-edit"></span> Change Image
</button>
</div>
</div>
<div class="tie-slide-details">
<label>
<span><?php _e('Slide Title:', 'tie') ?></span>
<input name="custom_slider[<?php echo $i ?>][title]" value="<?php echo esc_attr($slide['title']) ?>" type="text" />
</label>
<label>
<span><?php _e('Slide Link:', 'tie') ?></span>
<input name="custom_slider[<?php echo $i ?>][link]" value="<?php echo esc_attr($slide['link']) ?>" type="text" />
</label>
<label>
<span><?php _e('Slide Caption:', 'tie') ?></span>
<textarea name="custom_slider[<?php echo $i ?>][caption]"><?php echo esc_textarea($slide['caption']) ?></textarea>
</label>
<input name="custom_slider[<?php echo $i ?>][id]" value="<?php echo esc_attr($slide['id']) ?>" type="hidden" class="slide-image-id" />
</div>
</div>
<div class="tie-slide-actions">
<a class="button tie-move-slide"><span class="dashicons dashicons-move"></span></a>
<a class="button tie-delete-slide"><span class="dashicons dashicons-trash"></span></a>
</div>
</li>
<?php
}
}
?>
</ul>
</div>
<style>
.tie-slider-wrapper {
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 1px 1px rgba(0,0,0,.04);
margin-top: 20px;
}
.tie-slider-header {
background: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.tie-slider-header h2 {
margin: 0;
}
#tie-slider-items {
padding: 20px;
}
.tie-slide-item {
background: #f9f9f9;
border: 1px solid #e5e5e5;
margin-bottom: 10px;
padding: 15px;
display: flex;
align-items: flex-start;
}
.tie-slide-content {
flex-grow: 1;
display: flex;
}
.tie-slide-image {
margin-right: 20px;
width: 150px;
}
.tie-slide-image img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.image-wrapper {
position: relative;
}
.change-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s;
}
.image-wrapper:hover .change-image {
opacity: 1;
}
.tie-slide-details {
flex-grow: 1;
}
.tie-slide-details label {
display: block;
margin-bottom: 10px;
}
.tie-slide-details span {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.tie-slide-details input[type="text"],
.tie-slide-details textarea {
width: 100%;
}
.tie-slide-actions {
margin-left: 10px;
}
.tie-slide-actions button {
display: block;
margin-bottom: 5px;
}
</style>
<script>
jQuery(document).ready(function($) {
$("#tie-slider-items").sortable({
opacity:0.6,
revert:true,
handle: '.tie-move-slide',
update: function(event, ui) {
console.log('success drag');
updateSlideOrder();
}
});
var tie_uploader;
var nextCell = $('#tie-slider-items li').length;
$('#upload_add_slide').on('click', function(event) {
event.preventDefault();
openMediaUploader(function(selection) {
selection.each(function(attachment) {
attachment = attachment.toJSON();
$('#tie-slider-items').append(
'<li id="listItem_' + nextCell + '" class="tie-slide-item">' +
'<div class="tie-slide-content">' +
'<div class="tie-slide-image">' +
'<div class="image-wrapper">' +
'<img src="' + attachment.url + '" alt="">' +
'<button class="change-image button" data-index="' + nextCell + '">' +
'<span class="dashicons dashicons-edit"></span> Change Image' +
'</button>' +
'</div>' +
'</div>' +
'<div class="tie-slide-details">' +
'<label><span><?php _e('Slide Title:', 'tie') ?></span><input name="custom_slider[' + nextCell + '][title]" value="" type="text" /></label>' +
'<label><span><?php _e('Slide Link:', 'tie') ?></span><input name="custom_slider[' + nextCell + '][link]" value="" type="text" /></label>' +
'<label><span><?php _e('Slide Caption:', 'tie') ?></span><textarea name="custom_slider[' + nextCell + '][caption]"></textarea></label>' +
'<input name="custom_slider[' + nextCell + '][id]" value="' + attachment.id + '" type="hidden" class="slide-image-id" />' +
'</div></div>' +
'<div class="tie-slide-actions">' +
'<button class="button tie-move-slide"><span class="dashicons dashicons-move"></span></button>' +
'<button class="button tie-delete-slide"><span class="dashicons dashicons-trash"></span></button>' +
'</div></li>'
);
nextCell++;
updateSlideOrder();
});
});
});
$(document).on('click', '.tie-delete-slide', function(event) {
event.preventDefault();
$(this).closest('.tie-slide-item').remove();
updateSlideOrder();
});
$(document).on('click', '.change-image', function(event) {
event.preventDefault();
var $button = $(this);
var slideIndex = $button.data('index');
openMediaUploader(function(selection) {
selection.each(function(attachment) {
attachment = attachment.toJSON();
var $slide = $button.closest('.tie-slide-item');
$slide.find('.tie-slide-image img').attr('src', attachment.sizes.thumbnail.url);
$slide.find('.slide-image-id').val(attachment.id);
});
});
});
function openMediaUploader(callback) {
tie_uploader = wp.media.frames.tie_uploader = wp.media({
title: '<?php _e('Select Image', 'tie') ?>',
library: { type: 'image' },
button: { text: 'Select' },
multiple: false
});
tie_uploader.on('select', function() {
var selection = tie_uploader.state().get('selection');
callback(selection);
});
tie_uploader.open();
}
function updateSlideOrder() {
$('#tie-slider-items li').each(function(index) {
$(this).find('input, textarea, .change-image').each(function() {
var oldName = $(this).attr('name');
if (oldName) {
var newName = oldName.replace(/\[\d+\]/, '[' + index + ']');
$(this).attr('name', newName);
}
if ($(this).hasClass('change-image')) {
$(this).data('index', index);
}
});
});
}
$('form#post').on('submit', function(e) {
updateSlideOrder();
});
});
</script>
<?php
}
// Save Slider Data
function tie_save_slide($post_id) {
if (!isset($_POST['custom_slider_nonce']) || !wp_verify_nonce($_POST['custom_slider_nonce'], basename(__FILE__))) {
return $post_id;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return $post_id;
}
if ('tie_slider' != $_POST['post_type']) {
return $post_id;
}
if (!current_user_can('edit_post', $post_id)) {
return $post_id;
}
if (!empty($_POST['custom_slider'])) {
$sanitized_slider = array();
foreach ($_POST['custom_slider'] as $key => $slide) {
$sanitized_slider[$key] = array(
'title' => sanitize_text_field($slide['title']),
'link' => esc_url_raw($slide['link']),
'caption' => wp_kses_post($slide['caption']),
'id' => absint($slide['id'])
);
}
update_post_meta($post_id, 'custom_slider', $sanitized_slider);
} else {
delete_post_meta($post_id, 'custom_slider');
}
}
add_action('save_post', 'tie_save_slide');
// Enqueue necessary scripts and styles
function tie_admin_enqueue_scripts($hook) {
global $post;
if ('post.php' == $hook || 'post-new.php' == $hook) {
if ('tie_slider' == $post->post_type) {
wp_enqueue_media();
wp_enqueue_script('jquery-ui-sortable');
wp_enqueue_style('dashicons');
}
}
}
add_action('admin_enqueue_scripts', 'tie_admin_enqueue_scripts');
?>
