Wordpress默认相册与文字内容分开显示及定制显示格式
Tags: wordpress • gallery • single post | (5 min read)最近工作上要重新建站，公司有些站点是ASP的，程序老旧经常被黑。因为就是一般的企业展示类站点，就直接用wordpress重建了，页面样式还是用原来的，工作重点就是如何output出跟旧站一样的html结构。得益于这大半年的几个drupal项目，在做的时候思路跟以前不同了，不得不说drupal的核心思维还是很赞很科学的。
wodpress 默认插入相册 the_content() 输出的格式是：
<div id="gallery-1" class="gallery galleryid-41 gallery-columns-1 gallery-size-full"><dl class="gallery-item">
<dt class="gallery-icon landscape">
<img width="688" height="457" src="http://localhost/wordpress/wp-content/uploads/201212011101061901.jpg" class="attachment-full" alt="201212011101061901">
</dt></dl>
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<img width="688" height="458" src="http://localhost/wordpress/wp-content/uploads/201212011100281923.jpg" class="attachment-full" alt="201212011100281923">
</dt></dl>
<dl class="gallery-item">
<dt class="gallery-icon landscape">
<img width="688" height="319" src="http://localhost/wordpress/wp-content/uploads/201212011100547428.jpg" class="attachment-full" alt="201212011100547428">
</dt></dl>
</div>
显示结果如下（官网提供图片）：
而Y.CHEUNG想要的效果如下（因为是rebuild站点，前台显示代码就沿用之前的，只需令wordpress输出的跟原来一致即可）：
轮换自然是用JS实现，现在需要输出一张大图，一张缩略图，图片的标题字段，两个自定义栏目字段，以及文章内容。
解决方案：
1.在 functions.php 文件中添加以下代码
/**
* custom gallery output
*
*/
add_filter('post_gallery', 'addyuki_post_gallery', 10, 2);
function addyuki_post_gallery($output,$attr){
global $post;
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];
}
}
if(empty($attachments)) return '';
$countpic = 1;
$output ='';
foreach ($attachments as $id => $attachment){
$img = wp_get_attachment_image_src($id, 'full');
$output .= '<div id = "image_xixi-'.sprintf("%02d",$countpic).'" class="image">';
$output .= '<img src="'.$img[0].'" width=692 height=410><div class=word><h3></h3></div></div>';
$countpic ++;
}
$output .='';
return $output;
}
2.在single.php中修改相应位置
<?php if ( get_post_gallery() ) :
$gallery = get_post_gallery(get_the_ID(),false);
?>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="545" valign="top">
<div style="HEIGHT: 560px; PADDING-TOP: 20px" class="wrap picshow">
<!--大图轮换区-->
<div id="picarea">
<div style="MARGIN: 0px auto; WIDTH:692px; HEIGHT: 410px; OVERFLOW: hidden">
<div style="MARGIN: 0px auto; WIDTH:692px; HEIGHT: 410px; OVERFLOW: hidden" id="bigpicarea">
<p class="bigbtnPrev"><span id="big_play_prev"></span></p>
<?php the_content();?>
<p class="bigbtnNext"><span id="big_play_next"></span></p></div></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="40"><span style="color:#626262;"><strong><?php the_title();?> </strong> 地点：<?php echo get_post_meta(get_the_ID(),'地点',true);?> 时间：<?php echo get_post_meta(get_the_ID(),'时间',true);?></span></td>
</tr>
</tbody></table>
<!-- 缩略图区 -->
<div id="smallpicarea">
<div id="thumbs">
<ul>
<li class="first btnPrev"><img id="play_prev" src="<?php echo get_template_directory_uri(); ?>/images/left.png"></li>
<?php $count = 1; foreach($gallery['src'] AS $src){
?>
<li class="slideshowItem"><a id="thumb_xixi-<?php echo sprintf("%02d",$count) ;?>" href="#"><img src="<?php echo $src; ?>" width="47" height="47"/></a></li>
<?php
$count ++;}
?>
<li class="last btnNext"><img id="play_next" src="<?php echo get_template_directory_uri(); ?>/images/right.png"></li>
</ul></div></div></div>
<script>
var target = ["xixi-01","xixi-02","xixi-03","xixi-04","xixi-05","xixi-06","xixi-07","xixi-08",,,,,,,];
</script>
</div>
</td>
</tr>
</tbody></table>
<?php endif; ?>
<!-- 文字内容区块 -->
<div style="line-height:20px;"><br>
<?php echo strip_tags(strip_shortcodes(get_the_content())); ?>
</div>
大图的显示就是直接用了the_content(）函数，修改functions.php就是修改了gallery在用the_content()输出时的格式。
小图的显示则主要是提取了图片的URL，然后自定义显示格式。
文字内容使用 get_the_conten()输出，用strip_shortcodes()去除插入的gallery的shortcodes，用srip_tags()去除HTML代码。
Y.CHEUNG做好之后，在网上看到别的解决办法，点这里。