galleryショートコードの出力ソースをカスタマイズ：WordPress

2023-04-03 WordPress

最終更新日：2023-04-06

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