WP开发教程 WordPress导师在线教程
更新了可以拖拽排序，带分页输出，添加缩略图和ID和图片数量到管理列
<?php
/**
* Image Collection Custom Post Type with Sortable Gallery Meta Box
* Paste this code into your theme's functions.php file
*/
// Register Custom Post Type
function register_image_collection_post_type()
{
$labels = array(
'name' => __('Image Collections', 'bearing'),
'singular_name' => __('Image Collection', 'bearing'),
'menu_name' => __('Image Collections', 'bearing'),
'add_new' => __('Add New', 'bearing'),
'add_new_item' => __('Add New Image Collection', 'bearing'),
'edit_item' => __('Edit Image Collection', 'bearing'),
'new_item' => __('New Image Collection', 'bearing'),
'view_item' => __('View Image Collection', 'bearing'),
'search_items' => __('Search Image Collections', 'bearing'),
'not_found' => __('No image collections found', 'bearing'),
'not_found_in_trash' => __('No image collections found in Trash', 'bearing'),
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'publicly_queryable' => false,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array('slug' => 'image-collection'),
'capability_type' => 'post',
'has_archive' => false,
'hierarchical' => false,
'menu_position' => 5,
'menu_icon' => 'dashicons-format-gallery',
'supports' => array('title', 'editor', 'thumbnail'),
);
register_post_type('image_collection', $args);
}
add_action('init', 'register_image_collection_post_type');
// Add Gallery Meta Box
function add_gallery_meta_box()
{
add_meta_box(
'image_collection_gallery',
__('Gallery Images', 'bearing'),
'render_gallery_meta_box',
'image_collection',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'add_gallery_meta_box');
// Render Gallery Meta Box
function render_gallery_meta_box($post)
{
wp_nonce_field('save_gallery_meta', 'gallery_meta_nonce');
$gallery_images = get_post_meta($post->ID, '_gallery_images', true);
$gallery_images = !empty($gallery_images) ? $gallery_images : array();
// Pagination settings
$per_page = 12;
$current_page = isset($_GET['gallery_page']) ? max(1, intval($_GET['gallery_page'])) : 1;
$total_images = count($gallery_images);
$total_pages = ceil($total_images / $per_page);
$offset = ($current_page - 1) * $per_page;
$paginated_images = array_slice($gallery_images, $offset, $per_page, true);
?>
<div class="gallery-meta-box">
<style>
.gallery-meta-box {
padding: 10px 0;
}
.gallery-images-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin: 20px 0;
min-height: 100px;
}
.gallery-image-item {
position: relative;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
background: #f9f9f9;
cursor: move;
transition: all 0.2s ease;
}
.gallery-image-item:hover {
border-color: #0073aa;
box-shadow: 0 2px 8px rgba(0, 115, 170, 0.2);
}
.gallery-image-item.ui-sortable-helper {
opacity: 0.8;
transform: rotate(2deg);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.gallery-image-item.ui-sortable-placeholder {
border: 2px dashed #0073aa;
background: #e5f5fa;
visibility: visible !important;
}
.gallery-image-item img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
pointer-events: none;
}
.gallery-image-actions {
position: absolute;
top: 5px;
right: 5px;
display: flex;
gap: 5px;
opacity: 0;
transition: opacity 0.2s ease;
}
.gallery-image-item:hover .gallery-image-actions {
opacity: 1;
}
.gallery-image-actions button {
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
border-radius: 3px;
padding: 5px 8px;
cursor: pointer;
font-size: 12px;
}
.gallery-image-actions button:hover {
background: rgba(0, 0, 0, 0.9);
}
.drag-handle {
position: absolute;
top: 5px;
left: 5px;
background: rgba(0, 115, 170, 0.9);
color: white;
padding: 5px 8px;
border-radius: 3px;
font-size: 12px;
cursor: move;
opacity: 0;
transition: opacity 0.2s ease;
}
.gallery-image-item:hover .drag-handle {
opacity: 1;
}
.gallery-add-button {
display: inline-block;
margin-bottom: 15px;
}
.gallery-pagination {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #ddd;
display: flex;
align-items: center;
gap: 10px;
}
.gallery-pagination button {
padding: 5px 10px;
}
.gallery-pagination span {
color: #666;
}
.no-images-message {
padding: 40px;
text-align: center;
color: #666;
background: #f9f9f9;
border: 2px dashed #ddd;
border-radius: 4px;
}
.gallery-controls {
display: flex;
gap: 10px;
margin-bottom: 15px;
align-items: center;
}
.sort-notice {
display: none;
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
padding: 8px 12px;
border-radius: 4px;
font-size: 13px;
}
.sort-notice.active {
display: inline-block;
}
</style>
<div class="gallery-controls">
<button type="button" class="button button-primary gallery-add-button" id="add-gallery-images">
<?php esc_html_e('Add Images', 'bearing'); ?>
</button>
<span class="sort-notice" id="sort-notice">
✓ <?php esc_html_e('Order changed - Save post to keep changes', 'bearing'); ?>
</span>
</div>
<input type="hidden" id="gallery-images-data" name="gallery_images"
value="<?php echo esc_attr(json_encode($gallery_images)); ?>">
<div class="gallery-images-container" id="gallery-images-container">
<?php if (empty($paginated_images)): ?>
<div class="no-images-message">
<?php esc_html_e('No images added yet. Click "Add Images" to get started.', 'bearing'); ?>
</div>
<?php else: ?>
<?php foreach ($paginated_images as $index => $image_id):
$image_url = wp_get_attachment_image_url($image_id, 'medium');
if (!$image_url)
continue;
?>
<div class="gallery-image-item" data-image-id="<?php echo esc_attr($image_id); ?>"
data-index="<?php echo esc_attr($index); ?>">
<span class="drag-handle">⋮⋮</span>
<img src="<?php echo esc_url($image_url); ?>" alt="">
<div class="gallery-image-actions">
<button type="button" class="edit-gallery-image"
data-image-id="<?php echo esc_attr($image_id); ?>"><?php esc_html_e('Edit', 'bearing'); ?></button>
<button type="button" class="delete-gallery-image"
data-image-id="<?php echo esc_attr($image_id); ?>"><?php esc_html_e('Delete', 'bearing'); ?></button>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php if ($total_pages > 1): ?>
<div class="gallery-pagination">
<button type="button" class="button gallery-prev-page" <?php echo $current_page <= 1 ? 'disabled' : ''; ?>><?php esc_html_e('Previous', 'bearing'); ?></button>
<span><?php echo sprintf(esc_html__('Page %d of %d (%d images total)', 'bearing'), $current_page, $total_pages, $total_images); ?></span>
<button type="button" class="button gallery-next-page" <?php echo $current_page >= $total_pages ? 'disabled' : ''; ?>><?php esc_html_e('Next', 'bearing'); ?></button>
<input type="hidden" id="gallery-current-page" value="<?php echo $current_page; ?>">
<input type="hidden" id="gallery-total-pages" value="<?php echo $total_pages; ?>">
</div>
<?php endif; ?>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var galleryData = [];
var currentPage = parseInt($('#gallery-current-page').val()) || 1;
var perPage = 12;
// Initialize gallery data
try {
galleryData = JSON.parse($('#gallery-images-data').val()) || [];
} catch (e) {
galleryData = [];
}
// Initialize sortable
function initSortable() {
$('#gallery-images-container').sortable({
items: '.gallery-image-item',
cursor: 'move',
opacity: 0.8,
placeholder: 'ui-sortable-placeholder',
tolerance: 'pointer',
update: function (event, ui) {
// Get new order from current page
var newPageOrder = [];
$('#gallery-images-container .gallery-image-item').each(function () {
newPageOrder.push(parseInt($(this).data('image-id')));
});
// Calculate the offset for current page
var offset = (currentPage - 1) * perPage;
// Create new complete array with reordered page
var newGalleryData = [];
// Add items before current page
for (var i = 0; i < offset; i++) {
if (galleryData[i]) {
newGalleryData.push(galleryData[i]);
}
}
// Add reordered items from current page
newPageOrder.forEach(function (id) {
newGalleryData.push(id);
});
// Add items after current page
for (var i = offset + perPage; i < galleryData.length; i++) {
newGalleryData.push(galleryData[i]);
}
galleryData = newGalleryData;
updateGalleryData();
// Show save notice
$('#sort-notice').addClass('active');
}
});
}
// Initialize on load if there are images
if (galleryData.length > 0) {
initSortable();
}
// Add images
$('#add-gallery-images').on('click', function (e) {
e.preventDefault();
var frame = wp.media({
title: '<?php echo esc_js(__('Select or Upload Images', 'bearing')); ?>',
button: {
text: '<?php echo esc_js(__('Add to Gallery', 'bearing')); ?>'
},
multiple: true
});
frame.on('select', function () {
var attachments = frame.state().get('selection').toJSON();
attachments.forEach(function (attachment) {
if (!galleryData.includes(attachment.id)) {
galleryData.push(attachment.id);
}
});
updateGalleryData();
renderGallery();
});
frame.open();
});
// Edit image
$(document).on('click', '.edit-gallery-image', function (e) {
e.preventDefault();
var imageId = $(this).data('image-id');
var frame = wp.media({
title: '<?php echo esc_js(__('Edit Image', 'bearing')); ?>',
button: {
text: '<?php echo esc_js(__('Update Image', 'bearing')); ?>'
},
multiple: false
});
frame.on('open', function () {
var selection = frame.state().get('selection');
var attachment = wp.media.attachment(imageId);
attachment.fetch();
selection.add(attachment);
});
frame.on('select', function () {
var attachment = frame.state().get('selection').first().toJSON();
var index = galleryData.indexOf(imageId);
if (index !== -1) {
galleryData[index] = attachment.id;
updateGalleryData();
renderGallery();
}
});
frame.open();
});
// Delete image
$(document).on('click', '.delete-gallery-image', function (e) {
e.preventDefault();
if (!confirm('<?php echo esc_js(__('Are you sure you want to delete this image from the gallery?', 'bearing')); ?>')) {
return;
}
var imageId = $(this).data('image-id');
var index = galleryData.indexOf(imageId);
if (index !== -1) {
galleryData.splice(index, 1);
updateGalleryData();
renderGallery();
}
});
// Pagination
$('.gallery-prev-page').on('click', function () {
if (currentPage > 1) {
currentPage--;
renderGallery();
}
});
$('.gallery-next-page').on('click', function () {
var totalPages = Math.ceil(galleryData.length / perPage);
if (currentPage < totalPages) {
currentPage++;
renderGallery();
}
});
function updateGalleryData() {
$('#gallery-images-data').val(JSON.stringify(galleryData));
}
function renderGallery() {
var totalPages = Math.ceil(galleryData.length / perPage);
var offset = (currentPage - 1) * perPage;
var paginatedData = galleryData.slice(offset, offset + perPage);
if (currentPage > totalPages && totalPages > 0) {
currentPage = totalPages;
paginatedData = galleryData.slice((currentPage - 1) * perPage, currentPage * perPage);
}
var container = $('#gallery-images-container');
// Destroy sortable before clearing
if (container.hasClass('ui-sortable')) {
container.sortable('destroy');
}
container.empty();
if (galleryData.length === 0) {
container.html('<div class="no-images-message"><?php echo esc_html(__('No images added yet. Click "Add Images" to get started.', 'bearing')); ?></div>');
$('.gallery-pagination').hide();
return;
}
var imagesLoaded = 0;
paginatedData.forEach(function (imageId, idx) {
wp.media.attachment(imageId).fetch().then(function (data) {
var imageUrl = data.sizes && data.sizes.medium ? data.sizes.medium.url : data.url;
var imageHtml = '<div class="gallery-image-item" data-image-id="' + imageId + '">' +
'<span class="drag-handle">⋮⋮</span>' +
'<img src="' + imageUrl + '" alt="">' +
'<div class="gallery-image-actions">' +
'<button type="button" class="edit-gallery-image" data-image-id="' + imageId + '"><?php echo esc_html(__('Edit', 'bearing')); ?></button>' +
'<button type="button" class="delete-gallery-image" data-image-id="' + imageId + '"><?php echo esc_html(__('Delete', 'bearing')); ?></button>' +
'</div></div>';
container.append(imageHtml);
imagesLoaded++;
// Reinitialize sortable after all images are loaded
if (imagesLoaded === paginatedData.length) {
initSortable();
}
});
});
// Update pagination
if (totalPages > 1) {
$('.gallery-pagination').show();
$('.gallery-pagination span').html('<?php echo esc_html(__('Page', 'bearing')); ?> ' + currentPage + ' <?php echo esc_html(__('of', 'bearing')); ?> ' + totalPages + ' (' + galleryData.length + ' <?php echo esc_html(__('images total', 'bearing')); ?>');
$('.gallery-prev-page').prop('disabled', currentPage <= 1);
$('.gallery-next-page').prop('disabled', currentPage >= totalPages);
} else {
$('.gallery-pagination').hide();
}
}
});
</script>
</div>
<?php
}
// Save Gallery Meta Box Data
function save_gallery_meta($post_id)
{
// Security checks
if (!isset($_POST['gallery_meta_nonce']) || !wp_verify_nonce($_POST['gallery_meta_nonce'], 'save_gallery_meta')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
// Save gallery images
if (isset($_POST['gallery_images'])) {
$gallery_images = json_decode(stripslashes($_POST['gallery_images']), true);
if (is_array($gallery_images)) {
// Validate that all items are integers (attachment IDs)
$gallery_images = array_filter($gallery_images, 'is_numeric');
$gallery_images = array_map('intval', $gallery_images);
update_post_meta($post_id, '_gallery_images', $gallery_images);
} else {
delete_post_meta($post_id, '_gallery_images');
}
} else {
delete_post_meta($post_id, '_gallery_images');
}
}
add_action('save_post_image_collection', 'save_gallery_meta');
// Enqueue WordPress Media Scripts
function enqueue_gallery_scripts($hook)
{
global $post;
if ($hook == 'post-new.php' || $hook == 'post.php') {
if ('image_collection' === $post->post_type) {
wp_enqueue_media();
wp_enqueue_script('jquery-ui-sortable');
}
}
}
add_action('admin_enqueue_scripts', 'enqueue_gallery_scripts');
// Optional: Display gallery on frontend with pagination
function display_image_collection_gallery($post_id = null, $per_page = 12)
{
if (!$post_id) {
$post_id = get_the_ID();
}
$gallery_images = get_post_meta($post_id, '_gallery_images', true);
if (empty($gallery_images) || !is_array($gallery_images)) {
return '<p>' . esc_html__('No images in this collection.', 'bearing') . '</p>';
}
// Get current page from URL parameter
$current_page = isset($_GET['gallery_page']) ? max(1, intval($_GET['gallery_page'])) : 1;
// Calculate pagination
$total_images = count($gallery_images);
$total_pages = ceil($total_images / $per_page);
$current_page = min($current_page, $total_pages); // Don't exceed max pages
$offset = ($current_page - 1) * $per_page;
// Get images for current page
$paginated_images = array_slice($gallery_images, $offset, $per_page);
// Start output with styles
$output = '<style>
.image-collection-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.gallery-item img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.gallery-pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin: 30px 0;
flex-wrap: wrap;
}
.gallery-pagination-wrapper a,
.gallery-pagination-wrapper span {
padding: 8px 15px;
text-decoration: none;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
color: #333;
transition: all 0.3s ease;
}
.gallery-pagination-wrapper a:hover {
background: #0073aa;
color: #fff;
border-color: #0073aa;
}
.gallery-pagination-wrapper .current-page {
background: #0073aa;
color: #fff;
border-color: #0073aa;
font-weight: bold;
}
.gallery-pagination-wrapper .disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.gallery-page-numbers {
display: flex;
gap: 5px;
}
@media (max-width: 768px) {
.image-collection-gallery {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.gallery-item img {
height: 200px;
}
}
</style>';
$output .= '<div class="image-collection-gallery">';
foreach ($paginated_images as $image_id) {
$image_url = wp_get_attachment_image_url($image_id, 'large');
$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
$image_title = get_the_title($image_id);
if ($image_url) {
$output .= '<div class="gallery-item">';
$output .= '<a href="' . esc_url(wp_get_attachment_url($image_id)) . '" target="_blank">';
$output .= '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($image_alt) . '" title="' . esc_attr($image_title) . '">';
$output .= '</a>';
$output .= '</div>';
}
}
$output .= '</div>';
// Add pagination if there's more than one page
if ($total_pages > 1) {
$output .= '<div class="gallery-pagination-wrapper">';
// Get current URL without gallery_page parameter
$current_url = remove_query_arg('gallery_page');
// Previous button
if ($current_page > 1) {
$prev_url = add_query_arg('gallery_page', $current_page - 1, $current_url);
$output .= '<a href="' . esc_url($prev_url) . '" class="prev-page">← ' . esc_html__('Previous', 'bearing') . '</a>';
} else {
$output .= '<span class="prev-page disabled">← ' . esc_html__('Previous', 'bearing') . '</span>';
}
// Page numbers
$output .= '<div class="gallery-page-numbers">';
// Show first page
if ($current_page > 3) {
$page_url = add_query_arg('gallery_page', 1, $current_url);
$output .= '<a href="' . esc_url($page_url) . '">1</a>';
if ($current_page > 4) {
$output .= '<span>...</span>';
}
}
// Show pages around current page
for ($i = max(1, $current_page - 2); $i <= min($total_pages, $current_page + 2); $i++) {
if ($i == $current_page) {
$output .= '<span class="current-page">' . $i . '</span>';
} else {
$page_url = add_query_arg('gallery_page', $i, $current_url);
$output .= '<a href="' . esc_url($page_url) . '">' . $i . '</a>';
}
}
// Show last page
if ($current_page < $total_pages - 2) {
if ($current_page < $total_pages - 3) {
$output .= '<span>...</span>';
}
$page_url = add_query_arg('gallery_page', $total_pages, $current_url);
$output .= '<a href="' . esc_url($page_url) . '">' . $total_pages . '</a>';
}
$output .= '</div>';
// Next button
if ($current_page < $total_pages) {
$next_url = add_query_arg('gallery_page', $current_page + 1, $current_url);
$output .= '<a href="' . esc_url($next_url) . '" class="next-page">' . esc_html__('Next', 'bearing') . ' →</a>';
} else {
$output .= '<span class="next-page disabled">' . esc_html__('Next', 'bearing') . ' →</span>';
}
$output .= '</div>';
// Page info
$output .= '<div style="text-align: center; color: #666; margin-top: 10px;">';
$output .= sprintf(esc_html__('Showing %d-%d of %d images', 'bearing'), (($offset + 1)), min(($offset + $per_page), $total_images), $total_images);
$output .= '</div>';
}
return $output;
}
// Shortcode to display gallery: [image_collection_gallery] or [image_collection_gallery id="123" per_page="20"]
function image_collection_gallery_shortcode($atts)
{
$atts = shortcode_atts(array(
'id' => get_the_ID(),
'per_page' => 12,
), $atts);
return display_image_collection_gallery($atts['id'], $atts['per_page']);
}
add_shortcode('image_collection_gallery', 'image_collection_gallery_shortcode');
// Add custom admin columns for Image Collection
function add_image_collection_admin_columns($columns)
{
// Create new columns array with custom order
$new_columns = array();
// Add checkbox column first
$new_columns['cb'] = $columns['cb'];
// Add featured image column
$new_columns['featured_image'] = __('Featured Image', 'bearing');
// Add post ID column
$new_columns['post_id'] = __('ID', 'bearing');
// Add title and other default columns
$new_columns['title'] = $columns['title'];
// Add image count column
$new_columns['image_count'] = __('Images', 'bearing');
// Add remaining default columns (author, date, etc.)
$new_columns['author'] = $columns['author'];
$new_columns['date'] = $columns['date'];
return $new_columns;
}
add_filter('manage_image_collection_posts_columns', 'add_image_collection_admin_columns');
// Populate custom admin columns
function populate_image_collection_admin_columns($column, $post_id)
{
switch ($column) {
case 'featured_image':
$thumbnail = get_the_post_thumbnail($post_id, array(60, 60));
if ($thumbnail) {
echo $thumbnail;
} else {
echo '<span style="color: #999;">—</span>';
}
break;
case 'post_id':
echo '<strong>' . $post_id . '</strong>';
break;
case 'image_count':
$gallery_images = get_post_meta($post_id, '_gallery_images', true);
$count = is_array($gallery_images) ? count($gallery_images) : 0;
if ($count > 0) {
echo '<span class="image-count-badge">' . $count . '</span>';
} else {
echo '<span style="color: #999;">0</span>';
}
break;
}
}
add_action('manage_image_collection_posts_custom_column', 'populate_image_collection_admin_columns', 10, 2);
// Make custom columns sortable
function make_image_collection_columns_sortable($columns)
{
$columns['post_id'] = 'ID';
$columns['image_count'] = 'image_count';
return $columns;
}
add_filter('manage_edit-image_collection_sortable_columns', 'make_image_collection_columns_sortable');
// Handle sorting for image count column
function image_collection_custom_orderby($query)
{
if (!is_admin() || !$query->is_main_query()) {
return;
}
if ('image_count' === $query->get('orderby')) {
$query->set('meta_key', '_gallery_images');
$query->set('orderby', 'meta_value_num');
}
}
add_action('pre_get_posts', 'image_collection_custom_orderby');
// Add custom CSS for admin columns
function image_collection_admin_css()
{
global $post_type;
if ('image_collection' === $post_type) {
?>
<style>
.column-featured_image {
width: 80px;
}
.column-featured_image img {
border-radius: 4px;
border: 1px solid #ddd;
display: block;
}
.column-post_id {
width: 60px;
text-align: center;
}
.column-image_count {
width: 80px;
text-align: center;
}
.image-count-badge {
display: inline-block;
background: #2271b1;
color: white;
padding: 4px 10px;
border-radius: 12px;
font-weight: 600;
font-size: 12px;
}
</style>
<?php
}
}
add_action('admin_head', 'image_collection_admin_css');用法
// In your template file:
<?php echo display_image_collection_gallery(get_the_ID(), 12); ?>
// Or use shortcode in post content:
[image_collection_gallery]
// With custom settings:
[image_collection_gallery id="123" per_page="20"]
// In a custom template:
<?php
$post_id = 456;
echo display_image_collection_gallery($post_id, 16); // 16 images per page
?>第一版
<?php
/**
* Image Collection Custom Post Type with Gallery Meta Box
* Paste this code into your theme's functions.php file
*/
// Register Custom Post Type
function register_image_collection_post_type() {
$labels = array(
'name' => 'Image Collections',
'singular_name' => 'Image Collection',
'menu_name' => 'Image Collections',
'add_new' => 'Add New',
'add_new_item' => 'Add New Image Collection',
'edit_item' => 'Edit Image Collection',
'new_item' => 'New Image Collection',
'view_item' => 'View Image Collection',
'search_items' => 'Search Image Collections',
'not_found' => 'No image collections found',
'not_found_in_trash' => 'No image collections found in Trash',
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => array('slug' => 'image-collection'),
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => 5,
'menu_icon' => 'dashicons-format-gallery',
'supports' => array('title', 'editor', 'thumbnail'),
);
register_post_type('image_collection', $args);
}
add_action('init', 'register_image_collection_post_type');
// Add Gallery Meta Box
function add_gallery_meta_box() {
add_meta_box(
'image_collection_gallery',
'Gallery Images',
'render_gallery_meta_box',
'image_collection',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'add_gallery_meta_box');
// Render Gallery Meta Box
function render_gallery_meta_box($post) {
wp_nonce_field('save_gallery_meta', 'gallery_meta_nonce');
$gallery_images = get_post_meta($post->ID, '_gallery_images', true);
$gallery_images = !empty($gallery_images) ? $gallery_images : array();
// Pagination settings
$per_page = 12;
$current_page = isset($_GET['gallery_page']) ? max(1, intval($_GET['gallery_page'])) : 1;
$total_images = count($gallery_images);
$total_pages = ceil($total_images / $per_page);
$offset = ($current_page - 1) * $per_page;
$paginated_images = array_slice($gallery_images, $offset, $per_page, true);
?>
<div class="gallery-meta-box">
<style>
.gallery-meta-box {
padding: 10px 0;
}
.gallery-images-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin: 20px 0;
min-height: 100px;
}
.gallery-image-item {
position: relative;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
background: #f9f9f9;
}
.gallery-image-item img {
width: 100%;
height: 150px;
object-fit: cover;
display: block;
}
.gallery-image-actions {
position: absolute;
top: 5px;
right: 5px;
display: flex;
gap: 5px;
}
.gallery-image-actions button {
background: rgba(0,0,0,0.7);
color: white;
border: none;
border-radius: 3px;
padding: 5px 8px;
cursor: pointer;
font-size: 12px;
}
.gallery-image-actions button:hover {
background: rgba(0,0,0,0.9);
}
.gallery-add-button {
display: inline-block;
margin-bottom: 15px;
}
.gallery-pagination {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #ddd;
display: flex;
align-items: center;
gap: 10px;
}
.gallery-pagination button {
padding: 5px 10px;
}
.gallery-pagination span {
color: #666;
}
.no-images-message {
padding: 40px;
text-align: center;
color: #666;
background: #f9f9f9;
border: 2px dashed #ddd;
border-radius: 4px;
}
</style>
<button type="button" class="button button-primary gallery-add-button" id="add-gallery-images">
Add Images
</button>
<input type="hidden" id="gallery-images-data" name="gallery_images" value="<?php echo esc_attr(json_encode($gallery_images)); ?>">
<div class="gallery-images-container" id="gallery-images-container">
<?php if (empty($paginated_images)): ?>
<div class="no-images-message">No images added yet. Click "Add Images" to get started.</div>
<?php else: ?>
<?php foreach ($paginated_images as $index => $image_id):
$image_url = wp_get_attachment_image_url($image_id, 'medium');
if (!$image_url) continue;
?>
<div class="gallery-image-item" data-image-id="<?php echo esc_attr($image_id); ?>" data-index="<?php echo esc_attr($index); ?>">
<img src="<?php echo esc_url($image_url); ?>" alt="">
<div class="gallery-image-actions">
<button type="button" class="edit-gallery-image" data-image-id="<?php echo esc_attr($image_id); ?>">Edit</button>
<button type="button" class="delete-gallery-image" data-image-id="<?php echo esc_attr($image_id); ?>">Delete</button>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php if ($total_pages > 1): ?>
<div class="gallery-pagination">
<button type="button" class="button gallery-prev-page" <?php echo $current_page <= 1 ? 'disabled' : ''; ?>>Previous</button>
<span>Page <?php echo $current_page; ?> of <?php echo $total_pages; ?></span>
<button type="button" class="button gallery-next-page" <?php echo $current_page >= $total_pages ? 'disabled' : ''; ?>>Next</button>
<input type="hidden" id="gallery-current-page" value="<?php echo $current_page; ?>">
<input type="hidden" id="gallery-total-pages" value="<?php echo $total_pages; ?>">
</div>
<?php endif; ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var galleryData = [];
var currentPage = parseInt($('#gallery-current-page').val()) || 1;
var perPage = 12;
// Initialize gallery data
try {
galleryData = JSON.parse($('#gallery-images-data').val()) || [];
} catch(e) {
galleryData = [];
}
// Add images
$('#add-gallery-images').on('click', function(e) {
e.preventDefault();
var frame = wp.media({
title: 'Select or Upload Images',
button: { text: 'Add to Gallery' },
multiple: true
});
frame.on('select', function() {
var attachments = frame.state().get('selection').toJSON();
attachments.forEach(function(attachment) {
if (!galleryData.includes(attachment.id)) {
galleryData.push(attachment.id);
}
});
updateGalleryData();
renderGallery();
});
frame.open();
});
// Edit image
$(document).on('click', '.edit-gallery-image', function(e) {
e.preventDefault();
var imageId = $(this).data('image-id');
var frame = wp.media({
title: 'Edit Image',
button: { text: 'Update Image' },
multiple: false
});
frame.on('open', function() {
var selection = frame.state().get('selection');
var attachment = wp.media.attachment(imageId);
attachment.fetch();
selection.add(attachment);
});
frame.on('select', function() {
var attachment = frame.state().get('selection').first().toJSON();
var index = galleryData.indexOf(imageId);
if (index !== -1) {
galleryData[index] = attachment.id;
updateGalleryData();
renderGallery();
}
});
frame.open();
});
// Delete image
$(document).on('click', '.delete-gallery-image', function(e) {
e.preventDefault();
if (!confirm('Are you sure you want to delete this image from the gallery?')) {
return;
}
var imageId = $(this).data('image-id');
var index = galleryData.indexOf(imageId);
if (index !== -1) {
galleryData.splice(index, 1);
updateGalleryData();
renderGallery();
}
});
// Pagination
$('.gallery-prev-page').on('click', function() {
if (currentPage > 1) {
currentPage--;
renderGallery();
}
});
$('.gallery-next-page').on('click', function() {
var totalPages = Math.ceil(galleryData.length / perPage);
if (currentPage < totalPages) {
currentPage++;
renderGallery();
}
});
function updateGalleryData() {
$('#gallery-images-data').val(JSON.stringify(galleryData));
}
function renderGallery() {
var totalPages = Math.ceil(galleryData.length / perPage);
var offset = (currentPage - 1) * perPage;
var paginatedData = galleryData.slice(offset, offset + perPage);
if (currentPage > totalPages && totalPages > 0) {
currentPage = totalPages;
paginatedData = galleryData.slice((currentPage - 1) * perPage, currentPage * perPage);
}
var container = $('#gallery-images-container');
container.empty();
if (galleryData.length === 0) {
container.html('<div class="no-images-message">No images added yet. Click "Add Images" to get started.</div>');
$('.gallery-pagination').hide();
return;
}
paginatedData.forEach(function(imageId, idx) {
wp.media.attachment(imageId).fetch().then(function(data) {
var imageUrl = data.sizes && data.sizes.medium ? data.sizes.medium.url : data.url;
var imageHtml = '<div class="gallery-image-item" data-image-id="' + imageId + '">' +
'<img src="' + imageUrl + '" alt="">' +
'<div class="gallery-image-actions">' +
'<button type="button" class="edit-gallery-image" data-image-id="' + imageId + '">Edit</button>' +
'<button type="button" class="delete-gallery-image" data-image-id="' + imageId + '">Delete</button>' +
'</div></div>';
container.append(imageHtml);
});
});
// Update pagination
if (totalPages > 1) {
$('.gallery-pagination').show();
$('.gallery-pagination span').text('Page ' + currentPage + ' of ' + totalPages);
$('.gallery-prev-page').prop('disabled', currentPage <= 1);
$('.gallery-next-page').prop('disabled', currentPage >= totalPages);
} else {
$('.gallery-pagination').hide();
}
}
});
</script>
</div>
<?php
}
// Save Gallery Meta Box Data
function save_gallery_meta($post_id) {
// Security checks
if (!isset($_POST['gallery_meta_nonce']) || !wp_verify_nonce($_POST['gallery_meta_nonce'], 'save_gallery_meta')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
// Save gallery images
if (isset($_POST['gallery_images'])) {
$gallery_images = json_decode(stripslashes($_POST['gallery_images']), true);
if (is_array($gallery_images)) {
// Validate that all items are integers (attachment IDs)
$gallery_images = array_filter($gallery_images, 'is_numeric');
$gallery_images = array_map('intval', $gallery_images);
update_post_meta($post_id, '_gallery_images', $gallery_images);
} else {
delete_post_meta($post_id, '_gallery_images');
}
} else {
delete_post_meta($post_id, '_gallery_images');
}
}
add_action('save_post_image_collection', 'save_gallery_meta');
// Enqueue WordPress Media Scripts
function enqueue_gallery_scripts($hook) {
global $post;
if ($hook == 'post-new.php' || $hook == 'post.php') {
if ('image_collection' === $post->post_type) {
wp_enqueue_media();
}
}
}
add_action('admin_enqueue_scripts', 'enqueue_gallery_scripts');
// Optional: Display gallery on frontend
function display_image_collection_gallery($post_id = null) {
if (!$post_id) {
$post_id = get_the_ID();
}
$gallery_images = get_post_meta($post_id, '_gallery_images', true);
if (empty($gallery_images) || !is_array($gallery_images)) {
return '<p>No images in this collection.</p>';
}
$output = '<div class="image-collection-gallery">';
foreach ($gallery_images as $image_id) {
$image_url = wp_get_attachment_image_url($image_id, 'large');
$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
if ($image_url) {
$output .= '<div class="gallery-item">';
$output .= '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($image_alt) . '">';
$output .= '</div>';
}
}
$output .= '</div>';
return $output;
}
// Shortcode to display gallery: [image_collection_gallery]
function image_collection_gallery_shortcode($atts) {
$atts = shortcode_atts(array(
'id' => get_the_ID(),
), $atts);
return display_image_collection_gallery($atts['id']);
}
add_shortcode('image_collection_gallery', 'image_collection_gallery_shortcode');
?>获取图片函数
<?php
/**
* Get all gallery images with complete metadata
*
* @param int $post_id The post ID (defaults to current post)
* @param string $image_size The image size to retrieve (thumbnail, medium, large, full, or custom size)
* @return array Array of image objects with all metadata
*/
function get_image_collection_gallery_data($post_id = null, $image_size = 'full')
{
if (!$post_id) {
$post_id = get_the_ID();
}
$gallery_images = get_post_meta($post_id, '_gallery_images', true);
if (empty($gallery_images) || !is_array($gallery_images)) {
return array();
}
$images_data = array();
foreach ($gallery_images as $index => $image_id) {
// Skip if attachment doesn't exist
if (!wp_attachment_is_image($image_id)) {
continue;
}
$attachment = get_post($image_id);
if (!$attachment) {
continue;
}
// Get image metadata
$metadata = wp_get_attachment_metadata($image_id);
// Get all image sizes
$image_sizes = array();
foreach (get_intermediate_image_sizes() as $size) {
$image_data = wp_get_attachment_image_src($image_id, $size);
if ($image_data) {
$image_sizes[$size] = array(
'url' => $image_data[0],
'width' => $image_data[1],
'height' => $image_data[2]
);
}
}
// Add full size
$full_image = wp_get_attachment_image_src($image_id, 'full');
$image_sizes['full'] = array(
'url' => $full_image[0],
'width' => $full_image[1],
'height' => $full_image[2]
);
// Build comprehensive image object
$image_object = array(
'attachment_id' => $image_id,
'position' => $index + 1,
// Primary image URL (requested size)
'url' => wp_get_attachment_image_url($image_id, $image_size),
'width' => $metadata['width'] ?? null,
'height' => $metadata['height'] ?? null,
// All available image sizes
'sizes' => $image_sizes,
// Attachment post data
'title' => get_the_title($image_id),
'alt' => get_post_meta($image_id, '_wp_attachment_image_alt', true),
'caption' => $attachment->post_excerpt,
'description' => $attachment->post_content,
// File information
'filename' => basename(get_attached_file($image_id)),
'filesize' => filesize(get_attached_file($image_id)),
'filesize_human' => size_format(filesize(get_attached_file($image_id))),
'mime_type' => get_post_mime_type($image_id),
// Dates
'uploaded_date' => $attachment->post_date,
'modified_date' => $attachment->post_modified,
// Author
'author_id' => $attachment->post_author,
'author_name' => get_the_author_meta('display_name', $attachment->post_author),
// Additional metadata
'metadata' => $metadata,
// Image HTML
'img_tag' => wp_get_attachment_image($image_id, $image_size, false, array('alt' => get_post_meta($image_id, '_wp_attachment_image_alt', true))),
);
$images_data[] = $image_object;
}
return $images_data;
}
/**
* Get a single image from the gallery by position or attachment ID
*
* @param int $post_id The post ID
* @param mixed $identifier Position number (1-based) or attachment ID
* @param string $by Search by 'position' or 'attachment_id'
* @param string $image_size Image size to retrieve
* @return array|null Image data or null if not found
*/
function get_image_collection_single_image($post_id, $identifier, $by = 'position', $image_size = 'full')
{
$all_images = get_image_collection_gallery_data($post_id, $image_size);
if (empty($all_images)) {
return null;
}
foreach ($all_images as $image) {
if ($by === 'position' && $image['position'] === $identifier) {
return $image;
} elseif ($by === 'attachment_id' && $image['attachment_id'] === $identifier) {
return $image;
}
}
return null;
}
/**
* Get gallery images count
*
* @param int $post_id The post ID
* @return int Number of images in the gallery
*/
function get_image_collection_count($post_id = null)
{
if (!$post_id) {
$post_id = get_the_ID();
}
$gallery_images = get_post_meta($post_id, '_gallery_images', true);
return is_array($gallery_images) ? count($gallery_images) : 0;
}
/**
* Get first image from gallery
*
* @param int $post_id The post ID
* @param string $image_size Image size to retrieve
* @return array|null First image data or null
*/
function get_image_collection_first_image($post_id = null, $image_size = 'full')
{
if (!$post_id) {
$post_id = get_the_ID();
}
$images = get_image_collection_gallery_data($post_id, $image_size);
return !empty($images) ? $images[0] : null;
}
/**
* Get gallery images as JSON (useful for JavaScript)
*
* @param int $post_id The post ID
* @param string $image_size Image size to retrieve
* @return string JSON string of gallery data
*/
function get_image_collection_json($post_id = null, $image_size = 'full')
{
return wp_json_encode(get_image_collection_gallery_data($post_id, $image_size));
}
/**
* Check if post has gallery images
*
* @param int $post_id The post ID
* @return bool True if has images, false otherwise
*/
function has_image_collection_gallery($post_id = null)
{
return get_image_collection_count($post_id) > 0;
}
/**
* EXAMPLE USAGE:
*
* // Get all images with full metadata
* $images = get_image_collection_gallery_data(get_the_ID(), 'large');
*
* foreach ($images as $image) {
* echo '<div class="gallery-item">';
* echo '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '">';
* echo '<h3>' . esc_html($image['title']) . '</h3>';
* echo '<p>' . esc_html($image['caption']) . '</p>';
* echo '<span>Position: ' . $image['position'] . '</span>';
* echo '<span>Size: ' . $image['filesize_human'] . '</span>';
* echo '</div>';
* }
*
* // Get single image by position
* $first_image = get_image_collection_single_image(get_the_ID(), 1, 'position');
*
* // Get single image by attachment ID
* $specific_image = get_image_collection_single_image(get_the_ID(), 123, 'attachment_id');
*
* // Check if post has gallery
* if (has_image_collection_gallery()) {
* echo 'This post has ' . get_image_collection_count() . ' images';
* }
*
* // Get as JSON for JavaScript
* $json_data = get_image_collection_json(get_the_ID(), 'medium');
* echo '<script>var galleryData = ' . $json_data . ';</script>';
*/
×
![最新版image_collection模块带用法]()
最新版image_collection模块带用法
更新了可以拖拽排序，带分页输出，添加缩略...
