galleryショートコードの出力ソースをカスタマイズ:WordPress
最終更新日:
WordPressで
[gallery ids=”88,89,90,91″ link=”file” columns=”4″ size=”full”]
のような標準のギャラリー用ショートコードの出力ソースをカスタマイズする方法をメモ
functions.php内に記述
functions.php内に下記のコードを追加します。
remove_shortcode('gallery', 'gallery_shortcode');//デフォルトのショートコードの削除 add_shortcode('gallery', 'my_gallery_shortcode');//新しいショートコードの追加 //オリジナルの gallery_shortcode()をコピーして名前を変えカスタマイズした関数 function my_gallery_shortcode($attr) { $post = get_post(); static $instance = 0; $instance++; if ( ! empty( $attr['ids'] ) ) { // 'ids' is explicitly ordered, unless you specify otherwise. if ( empty( $attr['orderby'] ) ) $attr['orderby'] = 'post__in'; $attr['include'] = $attr['ids']; } // Allow plugins/themes to override the default gallery template. $output = apply_filters('post_gallery', '', $attr); if ( $output != '' ) return $output; // We're trusting author input, so let's at least make sure it looks like a valid orderby statement if ( isset( $attr['orderby'] ) ) { $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] ); if ( !$attr['orderby'] ) unset( $attr['orderby'] ); } extract(shortcode_atts(array( 'order' => 'ASC', 'orderby'=> 'menu_order ID', 'id' => $post->ID, 'itemtag'=> 'li',//オリジナルは「dl」 'icontag'=> 'p',//オリジナルは「dt」 'captiontag' => 'p',//オリジナルは「dd」 'columns'=> 3, 'size' => 'thumbnail', 'include'=> '', 'exclude'=> '' ), $attr)); $attr['link'] = 'file';//サムネイルのリンク先は元の画像にするため追加。 $id = intval($id); if ( 'RAND' == $order ) $orderby = 'none'; if ( !empty($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) ) { $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); $icontag = tag_escape($icontag); $valid_tags = wp_kses_allowed_html( 'post' ); if ( ! isset( $valid_tags[ $itemtag ] ) ) $itemtag = 'li';//オリジナルは「dl」 if ( ! isset( $valid_tags[ $captiontag ] ) ) $captiontag = 'p';//オリジナルは「dd」 if ( ! isset( $valid_tags[ $icontag ] ) ) $icontag = 'p';//オリジナルは「dt」 $columns = intval($columns); $itemwidth = $columns > 0 ? floor(100/$columns) : 100; $float = is_rtl() ? 'right' : 'left'; $selector = "gallery-{$instance}"; $gallery_style = $gallery_div = ''; //オリジナルではこの部分にスタイルシートの指定があるので削除 $size_class = sanitize_html_class( $size ); /*$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'><ul class='clearfix'>";//ul タグを追加(必要であればクラス名の追加や変更が可能)*/ $gallery_div = "<div id='js-search-result' class='p-search-result'><ul class='p-style-list posi_b_20'>"; $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div ); $i = 0; foreach ( $attachments as $id => $attachment ) { /*$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);*/ $link = wp_get_attachment_image_url($id, $size, false, false); $src = wp_get_attachment_image( $id, $size, false, false); //$attr['link'] = 'file';を追加せずに上記を $link = wp_get_attachment_link($id, $size, false, false);としても、サムネイルのリンクを元画像にできる。 //<{$itemtag}> は <li> $output .= "<{$itemtag} class='p-style-list__item'>";//必要であればクラス名の追加や変更が可能) //<{$icontag}>は<p>。$attachment->post_excerpt や post_content、post_title などを「wptexturize」を用いて追加記述も可能 /*$output .= " <{$icontag} class=''> $link </{$icontag}>";*/ $output .= "<a href='$link' class='p-style-list__item-img p-hover-effect--type1 luminous'>$src</a>"; if ( $captiontag && trim($attachment->post_excerpt) ) { $output .= " <{$captiontag} class='wp-caption-text gallery-caption'> " . wptexturize($attachment->post_excerpt) . " </{$captiontag}>"; } $output .= "</{$itemtag}>"; //ここの記述 if ( $columns > 0 && ++$i % $columns == 0 ) $output .= '<br style="clear: both" />';も不要なので削除 } $output .= " </ul></div>\n";//ul の閉じタグを追加 return $output; }
この中で、class部分やタグ部分を好きなように変更すればOK
WordPressのおすすめ参考書
bookfan 1号店 楽天市場店
¥3,300 (2025/02/12 22:17時点 | 楽天市場調べ)