MEMO:wordpressのデフォルトギャラリー機能をカスタマイズ

wordpressのデフォルトギャラリーをカスタマイズして、自分の好みのjQueryプラグインを使いたくて調べました。

 

まず最初に、

  1. 投稿内に、<style> タグが挿入されて、勝手に指定されてしまう。
  2. そのスタイルは、左フロートだったり、画像の回りのグレーのボーダーだったりする。
  3. HTML に直接書かれるので、外部スタイルシートよりこっちが優先されちゃう …。
  4. <dl> タグで出力されちゃう…
  5. パラメータで <li> タグを渡すと、<ul> タグがない…。

この問題を解決する為に「wp-includes 」内にある「media.php」の”gallery_shortcode “の関数を変更します。

    1. gallery_shortcode内を変更する
      
      <?php
      //ギャラリーページ//masonryを利用可能にする
      function my_scripts() {
      wp_enqueue_script('jquery-masonry');
      }
      add_action( 'wp_enqueue_scripts', 'my_scripts' );/* デフォルトの gallery ショートコードを削除 */
      remove_shortcode('gallery', 'gallery_shortcode');/* 新しい gallery ショートコードを追加 */
      add_shortcode('gallery', 'custom_gallery_shortcode');/*"gallery"を"custom_gallery_shortcode"として追加する *//* 新しい gallery ショートコード("custom_gallery_shortcode")を定義 */
      function custom_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'];
      }
      
      /**
      * Filters the default gallery shortcode output.
      *
      * If the filtered output isn't empty, it will be used instead of generating
      * the default gallery template.
      *
      * @since 2.5.0
      * @since 4.2.0 The `$instance` parameter was added.
      *
      * @see gallery_shortcode()
      *
      * @param string $output   The gallery output. Default empty.
      * @param array  $attr     Attributes of the gallery shortcode.
      * @param int    $instance Unique numeric ID of this gallery shortcode instance.
      */
      
      $html5 = current_theme_supports( 'html5', 'gallery' );
      $atts = shortcode_atts( array(
      'order'      => 'ASC',
      'orderby'    => 'menu_order ID',
      'id'         => $post ? $post->ID : 0,
      'itemtag'    => $html5 ? 'figure'     : 'li',
      'icontag'    => $html5 ? 'div'        : 'p',
      'captiontag' => $html5 ? 'figcaption' : 'p',
      'columns'    => 3,
      'size'       => 'thumbnail',
      'include'    => '',
      'exclude'    => '',
      'link'       => ''
      ), $attr, 'gallery' );
      
      $attr['link'] = 'file';    //サムネイルのリンク先は元の画像にするため追加。
      
      $id = intval( $atts['id'] );
      
      if ( ! empty( $atts['include'] ) ) {
      $_attachments = get_posts( array( 'include' => $atts['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
      
      $attachments = array();
      foreach ( $_attachments as $key => $val ) {
      $attachments[$val->ID] = $_attachments[$key];
      }
      } elseif ( ! empty( $atts['exclude'] ) ) {
      $attachments = get_children( array( 'post_parent' => $id, 'exclude' => $atts['exclude'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
      } else {
      $attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
      }
      
      if ( empty( $attachments ) ) {
      return '';
      }
      
      if ( is_feed() ) {
      $output = "\n";
      foreach ( $attachments as $att_id => $attachment ) {
      $output .= wp_get_attachment_link( $att_id, $atts['size'], true ) . "\n";
      }
      return $output;
      }
      
      $link=str_replace('<a ','<a class="fancybox" rel="group" ', $link); //a要素にクラス名をつける
      $itemtag = tag_escape( $atts['itemtag'] );
      $captiontag = tag_escape( $atts['captiontag'] );
      $icontag = tag_escape( $atts['icontag'] );
      $valid_tags = wp_kses_allowed_html( 'post' );
      if ( ! isset( $valid_tags[ $itemtag ] ) ) {
      $itemtag = 'li';
      }
      if ( ! isset( $valid_tags[ $captiontag ] ) ) {
      $captiontag = 'p';
      }
      if ( ! isset( $valid_tags[ $icontag ] ) ) {
      $icontag = 'p';
      }
      
      $columns = intval( $atts['columns'] );
      $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
      $float = is_rtl() ? 'right' : 'left';
      
      $selector = "gallery-{$instance}";
      
      $gallery_style = '';
      
      /**
      * Filters whether to print default gallery styles.
      *
      * @since 3.1.0
      *
      * @param bool $print Whether to print default gallery styles.
      *                    Defaults to false if the theme supports HTML5 galleries.
      *                    Otherwise, defaults to true.
      */
      if ( apply_filters( 'use_default_gallery_style', ! $html5 ) ) {
      $gallery_style = "";
      }
      
      $size_class = sanitize_html_class( $atts['size'] );
      $gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'><ul class='gallery' id='gallery'>";
      
      /**
      * Filters the default gallery shortcode CSS styles.
      *
      * @since 2.5.0
      *
      * @param string $gallery_style Default CSS styles and opening HTML div container
      *                              for the gallery shortcode output.
      */
      $output = apply_filters( 'gallery_style', $gallery_style . $gallery_div );
      
      $i = 0;
      foreach ( $attachments as $id => $attachment ) {
      
      $attr = ( trim( $attachment->post_excerpt ) ) ? array( 'aria-describedby' => "$selector-$id" ) : '';
      if ( ! empty( $atts['link'] ) && 'file' === $atts['link'] ) {
      $image_output = wp_get_attachment_link( $id, $atts['size'], false, false, false, $attr );
      } elseif ( ! empty( $atts['link'] ) && 'none' === $atts['link'] ) {
      $image_output = wp_get_attachment_image( $id, $atts['size'], false, $attr );
      } else {
      $image_output = wp_get_attachment_link( $id, $atts['size'], true, false, false, $attr );
      }
      $image_meta  = wp_get_attachment_metadata( $id );
      
      $orientation = '';
      if ( isset( $image_meta['height'], $image_meta['width'] ) ) {
      $orientation = ( $image_meta['height'] > $image_meta['width'] ) ? 'portrait' : 'landscape';
      }
      $output .= "<{$itemtag} class='gallery-item'>";
      $output .= "
      <{$icontag} class='gallery-icon {$orientation}'>
      $image_output
      </{$icontag}>";
      
      //追加:画像のタイトルを表示する
      if ( $captiontag && trim($attachment->post_title) ) {
      $output .= "
      <{$captiontag} class='wp-title-text gallery-title'>
      " . wptexturize($attachment->post_title) . "
      </{$captiontag}>";
      }
      //ここまで
      if ( $captiontag && trim($attachment->post_excerpt) ) {
      $output .= "
      <{$captiontag} class='wp-caption-text gallery-caption' id='$selector-$id'>
      " . wptexturize($attachment->post_excerpt) . "
      </{$captiontag}>";
      }
      $output .= "</{$itemtag}>";
      
      }
      
      $output .= "
      </ul></div>\n";
      
      return $output;
      }
      ?>

 

 

 

 

 

 

 

 

 

 

 

参考:

Webデザインレシピさん『使いづらいWordPressのギャラリーをけっこう使えるギャラリーにする方法

Takuro Hishikawaさん『WordPressのギャラリーをカスタマイズして好きなjQueryプラグインを使う

WordPress フォーラム『[解決済] ギャラリーのキャプションをタイトル表示に入れ替えるには

MOLYlog『Masonryをwordpressで動作させる方法