ギャラリー機能を使い、スワップイメージを導入したい
-
はじめに
当方初めての投稿になります。
わかりずらい現状説明などがある思いますが、
ご質問等があれば何なりとご質問下さい。
お力添いをよろしくお願い致します。ギャラリー機能を使いながら、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件中)
6件の返信を表示中 - 1 - 6件目 (全6件中)
- トピック「ギャラリー機能を使い、スワップイメージを導入したい」には新たに返信することはできません。