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;
    }
     
}

解説

今回は、上のサンプルコードに直接解説したので省略。

Posted by webmaster