サポート » 使い方全般 » ギャラリーの写真の上に文字かバナーを入れたいです

  • お世話になります。

    ①ギャラリーで写真を横並びに3つ並べ、各写真の下に文字を入れる基本的なことはできる状態です。

    各写真の上に写真のタイトルを入れたい場合はどうしたらいいのでしょうか?
    またそのタイトルを文字の代わりに小さいバナーに差替える場合はどうしたらいいのでしょうか?

    【写真のタイトル】←文字またはバナー
    写真
    写真の説明

    ↑1つの写真をこのように配置し、横並びに3つ並べたいです。

    ②写真をギャラリーで3つ横並びを縦に5つ並べたい場合、
    [gallery columns="3" ids="65,66,67,68,69,70,76,77,79,80,81,82"]と必要なだけ1行にまとめた方がいいのでしょうか?

    個人的には
    [gallery columns="4" ids="65,66,67"]
    [gallery columns="4" ids="68,69,70"]
    [gallery columns="4" ids="76,77,79"]
    と並べていった方が記述的に理解しやすいのですが…

    一般的にはどのようにするのがいいのでしょうか?

    よろしくお願いいたします。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • 1)テーマの functions.php に以下のようなコードを書けばOK。
    ※デフォルトのタグが dl, dt, dd なのでアイコン用タグ(dt)の中にタイトルを入れていますが、お好みで変更してください。

    apply_filters( 'post_gallery', 'my_post_gallery', 10, 2 );
    function my_post_gallery( $output, $attr ) {
      // 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 ? $post->ID : 0,
        'itemtag'    => 'dl',
        'titletag'   => 'div', // ★追加
        'icontag'    => 'dt',
        'captiontag' => 'dd',
        'columns'    => 3,
        'size'       => 'thumbnail',
        'include'    => '',
        'exclude'    => '',
        'link'       => ''
      ), $attr, 'gallery'));
    
      $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 = 'dl';
      if ( ! isset( $valid_tags[ $captiontag ] ) )
        $captiontag = 'dd';
      if ( ! isset( $valid_tags[ $icontag ] ) )
        $icontag = 'dt';
    
      $columns = intval($columns);
      $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
      $float = is_rtl() ? 'right' : 'left';
    
      $selector = "gallery-{$instance}";
    
      $gallery_style = $gallery_div = '';
      if ( apply_filters( 'use_default_gallery_style', true ) )
        $gallery_style = "
        <style type='text/css'>
          #{$selector} {
            margin: auto;
          }
          #{$selector} .gallery-item {
            float: {$float};
            margin-top: 10px;
            text-align: center;
            width: {$itemwidth}%;
          }
          #{$selector} img {
            border: 2px solid #cfcfcf;
          }
          #{$selector} .gallery-caption {
            margin-left: 0;
          }
          /* see gallery_shortcode() in wp-includes/media.php */
        </style>";
      $size_class = sanitize_html_class( $size );
      $gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
      $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
    
      $i = 0;
      foreach ( $attachments as $id => $attachment ) {
        if ( ! empty( $link ) && 'file' === $link )
          $image_output = wp_get_attachment_link( $id, $size, false, false );
        elseif ( ! empty( $link ) && 'none' === $link )
          $image_output = wp_get_attachment_image( $id, $size, false );
        else
          $image_output = wp_get_attachment_link( $id, $size, true, false );
    
        $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';
    
        $title = wptexturize($attachment->post_title); // ★タイトル(またはバナー)を代入
    
        $output .= "<{$itemtag} class='gallery-item'>";
        // ★3行下でアイコン用タグの中にタイトルを入れています!
        $output .= "
          <{$icontag} class='gallery-icon {$orientation}'>
          <{$titletag} class='gallery-title'>$title</{$titletag}>
            $image_output
          </{$icontag}>";
        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 .= "
          <br style='clear: both;' />
        </div>\n";
    
      return $output;
    }

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「ギャラリーの写真の上に文字かバナーを入れたいです」には新たに返信することはできません。