WordPressの標準ギャラリーの出力HTMLを変更したい
使用例
<?php
//使用例
class HOGEHOGE {
public function __construct() {
add_filter( 'post_gallery', array( &$this, 'my_custom_post_gallery' ), 10, 2 );
}
public function my_custom_post_gallery( $output, $attr )
{
global $post;
//まずはショートコードのデータを展開して一部をデフォルトとの値に上書きする
extract( shortcode_atts( array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'li',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => ''
), $attr) );
//ココらへんからしばらくは、デフォルトのギャラリー処理の関数からコピペ
$id = intval($id);
if ( 'RAND' == $order )
$orderby = 'none';
if ( !empty($include) ) {
$include = preg_replace( '/[^0-9,]+/', '', $include );
$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
$attachments = array();
foreach ( $_attachments as $key => $val ) {
$attachments[$val->ID] = $_attachments[$key];
}
} elseif ( !empty($exclude) ) {
$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}
if ( empty($attachments) )
return '';
if ( is_feed() ) {
$output = "\n";
foreach ( $attachments as $att_id => $attachment )
$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
return $output;
}
$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';
//ここから独自性を出していく。
/*
今回、サムネイル画像付きのスライダーを利用したいので、
画像表示エリア:ul#WorkGallery
サムネイル表示エリア:div#WorkGalleryThumbContainer
の両方のボックスを用意し、その中にギャラリーで表示させたい画像を収めていくことにしている。
*/
$output = '<ul id="WorkGallery" class="WorkGallery">';
$thumb = '<div id="WorkGalleryThumbContainer"><ul id="WorkGalleryThumb" class="WorkGalleryThumb">';
$page = 1;
//ギャラリーとして選択されたそれぞれの画像について処理していく
foreach ( $attachments as $id => $attachment ) {
//まずはメインとして表示させたい画像についての処理
$image = wp_get_attachment_image_src( $id, 'large');
//縦横比が2:3より縦長の場合:vertical、横長の場合:horizontalのクラスをimgタグにつける
if( $image[1] >= $image[2] * 3 / 2 ) {
$shape = 'holizontal';
}else{
$shape = 'vertical';
}
//次にサムネイルとして表示させたい画像の処理
$thumb_image = wp_get_attachment_image_src( $id, 'medium');
/*
wp_get_attachment_image_src()関数で取得した画像情報の配列は
以下のようになっているので、これらを使ってHTMLを組んでいく。
$image[0] => src url
$image[1] => width
$image[2] => height
*/
$output .= '<li class="SanyoWorkGallery__item">';
$output .= '<img src="' . $image[0] . '" class="' . $shape . '" >';
$output .= '</li>';
$thumb .= '<li class="SanyoWorkGalleryThumb__item">';
$thumb .= '<a data-slide-index="' . $page++ . '" style="background-image:url(' . $thumb_image[0] . ');" class="" ></a>';
$thumb .= '</li>';
}
$thumb .= "</div>";
$output .= '</ul>' . $thumb;
return $output;
}
}
解説
今回は、上のサンプルコードに直接解説したので省略。