WP开发教程 WordPress导师在线教程
<?php
function register_image_collection_post_type() {
$args = array(
'labels' => array(
'add_new' => _x( 'Add New', 'image', 'nvvv' ),
'not_found' => 'No Image Found',
'add_new_item' => 'Add Image'
),
'public' => false,
'label' => 'Image Collections',
'supports' => array('title', 'editor','thumbnail'),
'show_in_rest' => true,
'menu_icon' => 'dashicons-format-gallery',
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => false,
'show_in_admin_bar' => true,
);
register_post_type('image_collection', $args);
}
add_action('init', 'register_image_collection_post_type');
function add_image_collection_metabox() {
add_meta_box(
'image_collection_metabox',
'Image Collection',
'render_image_collection_metabox',
'image_collection',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'add_image_collection_metabox');
function render_image_collection_metabox($post) {
wp_nonce_field('image_collection_metabox', 'image_collection_nonce');
$images = get_post_meta($post->ID, 'image_collection', true);
?>
<div id="image-collection-container" class="sortable-container">
<?php
if ($images) {
foreach ($images as $index => $image_id) {
$image_url = wp_get_attachment_image_url($image_id, 'thumbnail');
?>
<div class="image-item sortable-item" data-id="<?php echo esc_attr($image_id); ?>" data-order="<?php echo esc_attr($index); ?>">
<div class="sortable-handle">☰</div>
<img src="<?php echo esc_url($image_url); ?>" alt="">
<div class="image-actions">
<button type="button" class="button replace-image">Replace</button>
<button type="button" class="button delete-image">Delete</button>
</div>
</div>
<?php
}
}
?>
</div>
<button type="button" id="upload-image-button" class="button">Add Images</button>
<input type="hidden" id="image-collection-ids" name="image_collection" value="<?php echo esc_attr(implode(',', $images ? $images : array())); ?>">
<?php
}
add_action( 'admin_enqueue_scripts', 'wtk_add_admin_js' );
function wtk_add_admin_js($hook)
{
// code...
wp_enqueue_media( );
wp_enqueue_script('jquery-ui-sortable');
wp_enqueue_script('admin-js', get_template_directory_uri() . '/framework/admin/js/admin.js', array('jquery','jquery-ui-sortable'), '1.0.0', false);
wp_enqueue_style( 'admin-css', get_template_directory_uri() . '/framework/admin/css/admin.css' );
}
function save_image_collection_meta($post_id) {
if (!isset($_POST['image_collection_nonce']) || !wp_verify_nonce($_POST['image_collection_nonce'], 'image_collection_metabox')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (isset($_POST['image_collection'])) {
$image_ids = explode(',', $_POST['image_collection']);
//array_filter 如果没有callback的话通常 会移除错误或者空数组，转化成正常数组，而explode不会， 所以需要转换两次 it removes any elements that are considered "falsey," such as null, 0, false, "" (empty strings), etc.
$image_ids = array_filter($image_ids);
update_post_meta($post_id, 'image_collection', $image_ids);
} else {
delete_post_meta($post_id, 'image_collection');
}
}
add_action('save_post_image_collection', 'save_image_collection_meta');
function get_image_collection($post_id = null) {
if (!$post_id) {
$post_id = get_the_ID();
}
$image_ids = get_post_meta($post_id, 'image_collection', true);
if (!$image_ids || !is_array($image_ids)) {
return array();
}
$images = array();
foreach ($image_ids as $image_id) {
$image = array(
'id' => $image_id,
'url' => wp_get_attachment_url($image_id),
'alt' => get_post_meta($image_id, '_wp_attachment_image_alt', true),
'caption' => wp_get_attachment_caption($image_id),
);
$images[] = $image;
}
return $images;
}
function get_image_collection_paginated($post_id = null, $per_page = 12, $current_page = 1) {
if (!$post_id) {
$post_id = get_the_ID();
}
$image_ids = get_post_meta($post_id, 'image_collection', true);
if (!$image_ids || !is_array($image_ids)) {
return array(
'images' => array(),
'total' => 0,
'pages' => 0
);
}
// Calculate pagination
$total_images = count($image_ids);
$total_pages = ceil($total_images / $per_page);
$current_page = max(1, min($current_page, $total_pages)); // Ensure page is valid
// Get the correct slice of image IDs for current page
$offset = ($current_page - 1) * $per_page;
$current_page_image_ids = array_slice($image_ids, $offset, $per_page);
// Build the image data
$images = array();
foreach ($current_page_image_ids as $image_id) {
$image = array(
'id' => $image_id,
'url' => wp_get_attachment_url($image_id),
'alt' => get_post_meta($image_id, '_wp_attachment_image_alt', true),
'caption' => wp_get_attachment_caption($image_id),
);
$images[] = $image;
}
return array(
'images' => $images,
'total' => $total_images,
'pages' => $total_pages,
'current' => $current_page
);
}
/**
* Register shortcode for displaying image collection with pagination
* [image_collection post_id="123" per_page="8" class="product-gallery"]
*/
function nvvv_image_collection_shortcode($atts) {
// Extract and set default attributes
$atts = shortcode_atts(array(
'post_id' => null,
'per_page' => 12,
'class' => 'certificate', // Default class, can be overridden
), $atts, 'image_collection');
// Get the current page from the query parameter
$current_page = isset($_GET['i']) ? absint($_GET['i']) : 1;
// Use current post if no post_id specified
if (!$atts['post_id']) {
$atts['post_id'] = get_the_ID();
}
// Get paginated images
$image_collection = get_image_collection_paginated($atts['post_id'], $atts['per_page'], $current_page);
$images = $image_collection['images'];
$total_pages = $image_collection['pages'];
$current_page = $image_collection['current'];
// Start output buffering
ob_start();
// Only display if we have images
if (!empty($images)) :
?>
<div class="<?php echo esc_attr($atts['class']); ?>">
<div class="container-xl">
<div class="row">
<?php foreach ($images as $image): ?>
<div class="col-md-3 col-6">
<div class="boxs">
<div class="card img-col">
<a href="<?php echo esc_url($image['url']); ?>" class="card-thumb magicthumb"
data-thumb-id="thumb" data-options="captionSource:alt;group:1;hint: off;"
id="mgt-<?php echo rand(100000000000, 999999999999); ?>">
<div class="title">
<div class="img">
<img src="<?php echo esc_url($image['url']); ?>"
alt="<?php echo esc_attr($image['alt']); ?>"
class="img-width money img-money">
</div>
</div>
</a>
<div class="card-title h2"><?php echo esc_html($image['alt']); ?></div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php if ($total_pages > 1): ?>
<ul class="pagination justify-content-center">
<?php if ($current_page > 1): ?>
<li class="page-item">
<a class="page-link" href="<?php echo esc_url(add_query_arg('i', $current_page - 1)); ?>">«</a>
</li>
<?php endif; ?>
<?php for ($i = 1; $i <= $total_pages; $i++): ?>
<?php if ($i == $current_page): ?>
<li class="page-item active"><span class="page-link"><?php echo $i; ?></span></li>
<?php else: ?>
<li class="page-item"><a class="page-link" href="<?php echo esc_url(add_query_arg('i', $i)); ?>"><?php echo $i; ?></a></li>
<?php endif; ?>
<?php endfor; ?>
<?php if ($current_page < $total_pages): ?>
<li class="page-item">
<a class="page-link" href="<?php echo esc_url(add_query_arg('i', $current_page + 1)); ?>">»</a>
</li>
<?php endif; ?>
</ul>
<?php endif; ?>
</div>
<?php
endif;
// Return the buffered output
return ob_get_clean();
}
// Register the shortcode
add_shortcode('nvvv_image_collection', 'nvvv_image_collection_shortcode');
×
![image collection 带短代码分页输出]()
image collection 带短代码分页输出
<?php function re...
