KH-WEBLOG TOP > WEBメモ > WordPress > galleryショートコードの出力ソースをカスタマイズ:WordPress

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

最終更新日:

WordPressで
[gallery ids=”88,89,90,91″ link=”file” columns=”4″ size=”full”]
のような標準のギャラリー用ショートコードの出力ソースをカスタマイズする方法をメモ

コーディング・WordPress化作業を代行します

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化作業を代行します

WordPressのおすすめ参考書

\楽天ポイント5倍セール!/
楽天市場
楽天Kobo電子書籍ストア
¥3,278 (2024/04/19 19:05時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン ブログカード プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク リンクカード レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 関連記事