サポート » プラグイン » ギャラリー機能を使い、スワップイメージを導入したい

  • 解決済 focs

    (@focs)


    はじめに
    当方初めての投稿になります。
    わかりずらい現状説明などがある思いますが、
    ご質問等があれば何なりとご質問下さい。
    お力添いをよろしくお願い致します。

    ギャラリー機能を使いながら、jQueryのスワップイメージ(jswap)を設置できればと思い、色々と試みているのですが、中々上手くいかなくて困っています。

    http://webdesignrecipes.com/how-to-customize-wordpress-gallery/を参考にしながら、
    liタグをtdタグに出力できるようにまでfunction.phpで書き込めたのですが、画像にaタグ、spanタグが入ったり、tdにクラスが入らなかったりと、まだまだ完成形までには遠いのが現状です。

    完成イメージはhttp://www2.ocn.ne.jp/~konban/bankin.htmlの修理事例のHTMLにしたいです。

    <table cellspacing="0" cellpadding="0" border="0" class="jswap">
    	<tbody><tr>
    		<td class="jswap_l" rowspan="4"><img height="300" width="400" alt="" src="images/example_img01.jpg"></td>
    	</tr>
    	<tr>
    		<td class="jswap_s"><img height="100" width="125" alt="" src="images/example_img01.jpg"></td>
    		<td class="jswap_s"><img height="100" width="125" alt="" src="images/example_img02.jpg"></td>
    		<td class="jswap_s"><img height="100" width="125" alt="" src="images/example_img03.jpg"></td>
    	</tr>
    	<tr>
    		<td class="jswap_s"><img height="100" width="125" alt="" src="images/example_img04.jpg"></td>
    		<td class="jswap_s"><img height="100" width="125" alt="" src="images/example_img05.jpg"></td>
    		<td class="jswap_s"><img height="100" width="125" alt="" src="images/example_img06.jpg"></td>
    	</tr>
    	<tr>
    		<td colspan="3"><p class="example">車種:ラクティス<br>破損状況:前面にキズ</p></td>
    	</tr>
    </tbody></table>

    現状のfunction.phpコードも記載します。

    <?php
    /* functions.php *
    	テーマにさまざまな付加機能を設定するためのファイル。
     */
    function remove_gallery_css() {
      return "";
    }
    add_filter('gallery_style', 'remove_gallery_css');
    
    function fix_gallery_output( $output ){
      $output = preg_replace("%</div>%", "</tr>", $output);
    
      /* br clear を削除 */
      $output = preg_replace("%<br style=.*clear: both.* />%", "", $output);
    
      return $output;
    }
    add_filter('the_content', 'fix_gallery_output',11, 1);
    
    /* デフォルトのショートコードを削除 */
    remove_shortcode('gallery', 'gallery_shortcode');
    
    /* 新しい関数を定義 */
    add_shortcode('gallery', 'my_gallery_shortcode');
    
    function my_gallery_shortcode($attr) {
      global $post, $wp_locale;
    
      static $instpe = 0;
      $instpe++;
    
      // 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'    => 'dl',
        'icontag'    => 'dt',
        'captiontag' => 'dd',
        'columns'    => 3,
        'size'       => 'thumbnail',
        'include'    => '',
        'exclude'    => ''
      ), $attr));
    
      $id = intval($id);
      if ( 'RAND' == $order )
        $orderby = 'none';
    
      if ( !empty($include) ) {
        $include = preg_replace( '/[^0-9,]+/', '', $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) ) {
        $exclude = preg_replace( '/[^0-9,]+/', '', $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);
      $columns = intval($columns);
      $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
      $float = is_rtl() ? 'right' : 'left';
    
      $selector = "gallery-{$instpe}";
    
      $output = apply_filters('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;
          }
        </style>
        <!-- see gallery_shortcode() in wp-includes/media.php -->
        <div id='$selector' class='gallery galleryid-{$id}'>");
    
      $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);
        $output .= "<{$itemtag} >";
        $output .= "
          <{$icontag} >
            $link
          </{$icontag}>";
        if ( $captiontag && trim($attachment->post_excerpt) ) {
          $output .= "
            <{$captiontag} class='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;
    }
    
    ?>

    現状URL:http://wptest05.ne-co.info/2011/07/27/%E3%81%82/

    HTML

    <div class="post">
    <h2 class="posttitle"><a href="http://wptest05.ne-co.info/2011/07/27/%e3%81%82/">あ</a></h2>
    <div class="postdate">Posted on 2011年7月27日(水) 15:01</div>
    
    <table cellspacing="0" cellpadding="0" border="0" class="jswap">
    	<tbody><tr>
    		<td class="jswap_l" rowspan="4"></td>
    	</tr>
    		<tr><td>
          <span>
            <a title="Blue hillsa" href="http://wptest05.ne-co.info/2011/07/27/%e3%81%82/blue-hills-5/"><img height="150" width="150" title="Blue hillsa" alt="Blue hillsa" class="attachment-thumbnail" src="http://wptest05.ne-co.info/wp-content/uploads/2011/07/Blue-hills-150x150.jpg"></a>
          </span></td><td>
          <span>
            <a title="Sunset" href="http://wptest05.ne-co.info/2011/07/27/%e3%81%82/sunset-5/"><img height="150" width="150" title="Sunset" alt="Sunset" class="attachment-thumbnail" src="http://wptest05.ne-co.info/wp-content/uploads/2011/07/Sunset-150x150.jpg"></a>
          </span></td><td>
          <span>
            <a title="Water lilies" href="http://wptest05.ne-co.info/2011/07/27/%e3%81%82/water-lilies-5/"><img height="150" width="150" title="Water lilies" alt="Water lilies" class="attachment-thumbnail" src="http://wptest05.ne-co.info/wp-content/uploads/2011/07/Water-lilies-150x150.jpg"></a>
          </span></td><td>
          <span>
            <a title="Winter" href="http://wptest05.ne-co.info/2011/07/27/%e3%81%82/winter-5/"><img height="150" width="150" title="Winter" alt="Winter" class="attachment-thumbnail" src="http://wptest05.ne-co.info/wp-content/uploads/2011/07/Winter-150x150.jpg"></a>
          </span></td>
    
        </tr>
    </tbody></table>
    </div>

    どなたかお分かりになる方。ご協力をお願い致します。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • モデレーター jim912

    (@jim912)

    focsさん、こんにちは。

    まずは、「不要なspanタグが入ってしまう」といったように何が実現できておらず、何が分かっていないかをすべてリストアップしてください。

    トピック投稿者 focs

    (@focs)

    jim912さん、ご返答いただきありがとうございます。

    表現できない部分としては、
    ・spanタグが入ってしまう
    ・aタグを消したい
    ・<td class=”jswap_l” rowspan=”4″>にスワップイメージの大きい画像を入れたいのですが、
    入れ方が分からない

    の3点です。
    お手数ですが、ご指導をお願い致します。

    モデレーター jim912

    (@jim912)

    focsさん

    spanタグが入ってしまう

    galleryのパラメータ、もしくは<{$icontag} >の部分をカットすれば直るかと思います。

    aタグを消したい

    wp_get_attachment_link の替わりに、wp_get_attachment_image を使用して下さい。

    <td class=”jswap_l” rowspan=”4″>にスワップイメージの大きい画像を入れたいのですが、入れ方が分からない

    foreach の最初の場合に、wp_get_attachment_image を使って大きめのサイズの画像を表示するようにすれば大丈夫です。

    トピック投稿者 focs

    (@focs)

    jim912さん、ご連絡が遅れてしまい、申し訳ございません。

    spanタグ、aタグは無事に成功しました。
    御回答いただきありがとうございます。

    <td class=”jswap_l” rowspan=”4″>にスワップイメージの大きい画像を入れたいのですが、入れ方が分からない

    に関してですが、具体的にどこに入れればよいかが分からず、困ってしまいました。

    <?php
    /* functions.php *
    テーマにさまざまな付加機能を設定するためのファイル。
    */
    function remove_gallery_css() {
    return “”;
    }
    add_filter(‘gallery_style’, ‘remove_gallery_css’);

    function fix_gallery_output( $output ){
    $output = preg_replace(“%</div>%”, “</tr>”, $output);

    /* br clear を削除 */
    $output = preg_replace(“%<br style=.*clear: both.* />%”, “”, $output);

    return $output;
    }
    add_filter(‘the_content’, ‘fix_gallery_output’,11, 1);

    /* デフォルトのショートコードを削除 */
    remove_shortcode(‘gallery’, ‘gallery_shortcode’);

    /* 新しい関数を定義 */
    add_shortcode(‘gallery’, ‘my_gallery_shortcode’);

    function my_gallery_shortcode($attr) {
    global $post, $wp_locale;

    static $instpe = 0;
    $instpe++;

    // 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’ => ‘dl’,
    ‘icontag’ => ‘dt’,
    ‘captiontag’ => ‘dd’,
    ‘columns’ => 3,
    ‘size’ => ‘thumbnail’,
    ‘include’ => ”,
    ‘exclude’ => ”
    ), $attr));

    $id = intval($id);
    if ( ‘RAND’ == $order )
    $orderby = ‘none’;

    if ( !empty($include) ) {
    $include = preg_replace( ‘/[^0-9,]+/’, ”, $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) ) {
    $exclude = preg_replace( ‘/[^0-9,]+/’, ”, $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_image($att_id, $size, true) . “\n”;
    return $output;
    }

    $itemtag = tag_escape($itemtag);
    $captiontag = tag_escape($captiontag);
    $columns = intval($columns);
    $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
    $float = is_rtl() ? ‘right’ : ‘left’;

    $selector = “gallery-{$instpe}”;

    $output = apply_filters(‘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;
    }
    </style>
    <!– see gallery_shortcode() in wp-includes/media.php –>
    <div id=’$selector’ class=’gallery galleryid-{$id}’>”);

    $i = 0;
    foreach ( $attachments as $id => $attachment ) {
    $link = isset($attr[‘link’]) && ‘file’ == $attr[‘link’] ? wp_get_attachment_image($id, $size, false, false) : wp_get_attachment_image($id, $size, true, false);
    $output .= “<{$itemtag} >”;
    $output .= “
    $link
    </{$icontag}>”;
    if ( $captiontag && trim($attachment->post_excerpt) ) {
    $output .= “
    <{$captiontag} class=’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;
    }

    ?>

    大変恐縮ではございますが、再度function.phpの全文を記載致しますので、
    どう入れればいいか御指導をお願い致します。

    もう1つ、追加でご質問があります。

    <tr>
    <td class="jswap_l" rowspan="4"></td>
    </tr>
    
    <tr>
    <td>
    <img height="150" width="150" title="Blue hillsa" alt="Blue hillsa" class="attachment-thumbnail" src="http://wptest05.ne-co.info/wp-content/uploads/2011/07/Blue-hills-150x150.jpg">
    </td>

    現状のHTMLソースは上記のようになっておりますが、

    <tr>
    <td class="jswap_l" rowspan="4"></td>
    </tr>
    
    <tr>
    <td class="jswap_s">
    <img height="150" width="150" title="Blue hillsa" alt="Blue hillsa" class="attachment-thumbnail" src="http://wptest05.ne-co.info/wp-content/uploads/2011/07/Blue-hills-150x150.jpg">
    </td>

    というクラスをつけたいのですが、つけ方がわからない状態です。

    度々申し訳ございませんが、よろしくお願い致します。

    モデレーター jim912

    (@jim912)

    focsさん

    いろいろひっくるめて、こんな感じでいかがでしょう。

    /* デフォルトのショートコードを削除 */
    remove_shortcode('gallery', 'gallery_shortcode');
    
    /* 新しい関数を定義 */
    add_shortcode('gallery', 'my_gallery_shortcode');
    
    function my_gallery_shortcode($attr) {
    	global $post, $wp_locale;
    
    	static $instpe = 0;
    	$instpe++;
    
    	// 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,
    		'columns'		=> 3,
    		'size'			=> 'thumbnail',
    		'large_size'	=> 'medium',
    		'include'		=> '',
    		'exclude'		=> ''
    	), $attr));
    
    	$id = intval($id);
    	if ( 'RAND' == $order )
    		$orderby = 'none';
    
    	if ( !empty($include) ) {
    		$include = preg_replace( '/[^0-9,]+/', '', $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) ) {
    		$exclude = preg_replace( '/[^0-9,]+/', '', $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;
    	}
    
    	$float = is_rtl() ? 'right' : 'left';
    
    	$selector = "gallery-{$instpe}";
    
    	$output = '<table cellspacing="0" cellpadding="0" border="0" class="jswap">' . "\n";
    	$output .= '<tbody>' . "\n";
    
    	$i = 0;
    	$output .= '<tr>' . "\n";
    	$rows = ceil( count( $attachments ) / $columns ) + 1;
    	$remainder = count( $attachments ) % $columns;
    	foreach ( $attachments as $id => $attachment ) {
    		if ( $i == 0 ) {
    			$output .= '<td class="jswap_l" rowspan="' . $rows . '">';
    			$output .= wp_get_attachment_image( $id, $large_size, false );
    			$output .= "</td>\n";
    		}
    		$output .= '<td class="jswap_s">';
    		$output .= wp_get_attachment_image( $id, $size, false );
    		$output .= "</td>\n";
    		if ( $columns > 0 && ( ++$i % $columns == 0 && $i != count( $attachments ) ) ) {
    			$output .= "</tr>\n<tr>\n";
    		}
    	}
    	if ( $remainder ) {
    		for ( $i = $remainder; $columns > $i; $i++ ) {
    			$output .= '<td>&nbsp;</td>' . "\n";
    		}
    	}
    	$output .= '</tr>' . "\n";
    	$output .= '</tbody>' . "\n";
    	$output .= '</table>' . "\n";
    
    	return $output;
    }
    トピック投稿者 focs

    (@focs)

    jim912さん
    ありがとうございました。
    上記のコードでちゃんと動きました。
    とても助かりました。

    これからも機会があればよろしくお願い致します。。

    http://wptest05.ne-co.info/2011/07/27/%E3%81%82/
    ↑動いたサイトがこちらです。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「ギャラリー機能を使い、スワップイメージを導入したい」には新たに返信することはできません。