php WordPress媒体库替换，将其转换为带有自定义寻呼机的bxSlider轮播。

Posted 2021-05-05

/**
 * Custom media gallery output
 */
add_filter( 'post_gallery', 'big_sea_custom_post_gallery', 10, 2 );
remove_shortcode('gallery');
add_shortcode('gallery', 'big_sea_custom_post_gallery');

function big_sea_custom_post_gallery( $atts ) {
	global $post;
	$pid = $post->ID;
	$gallery = "";

	if ( empty($pid) ) {
		$pid = $post['ID'];
	}

	if ( !empty( $atts['ids'] ) ) {
   	$atts['orderby'] = 'post__in';
   	$atts['include'] = $atts['ids'];
	}

	extract(
		shortcode_atts(
			array(
				'orderby' => 'menu_order ASC, ID ASC',
				'include' => '',
				'id' => $pid,
				'itemtag' => 'dl',
				'icontag' => 'dt',
				'captiontag' => 'dd',
				'columns' => 3,
				'size' => 'large',
				'link' => 'file'
			),
		$atts)
	);

	$args = array(
		'post_type' => 'attachment',
		'post_status' => 'inherit',
		'post_mime_type' => 'image',
		'orderby' => $orderby
	);

	if (!empty($include)) {
		$args['include'] = $include;
	}
	else {
   	$args['post_parent'] = $id;
		$args['posts_per_page'] = -1;
	}

	if ( $args['include'] == "" ) {
		$args['orderby'] = 'date'; $args['order'] = 'asc';
	}

	$images = get_posts( $args );

	ob_start(); ?>

	<div class="media-carousel">

		<div class="media-carousel__main-images">
		<?php
		/** the large carousel images */
		foreach ( $images as $largeImage ) :
			$large = wp_get_attachment_image_src( $largeImage->ID, 'eckerd-media-lrg' );
			$large = $large[0];
		?>
			<img class="media-carousel__item--main" src="<?= $large ?>" alt="<?= $largeImage->post_title ?>">
		<?php endforeach; ?>
		</div>

		<div class="media-carousel__thumbnails">
		<?php
		/** the small carousel images that act as a custom pager */
		$i = -1; // the index needs to start at 0 in order for bxSlider customPage to work
		foreach ( $images as $smallImage ) :
			$small = wp_get_attachment_image_src( $smallImage->ID, 'eckerd-media-sml' );
			$small = $small[0];
			$i++;
		?>
			<a href="#" class="media-carousel__item--thumb" data-slide-index="<?= $i ?>" style="background-image:url('<?= $small ?>');" alt="<?= $smallImage->post_title ?>">
				<img src="<?= $small ?>" alt="<?= $smallImage->post_title ?>">
			</a>
		<?php endforeach; ?>
		</div>

	</div>

	<?php
	$output = ob_get_contents();
	ob_end_clean();

	return $output;
}