Wordpress默认相册与文字内容分开显示及定制显示格式

最近工作上要重新建站，公司有些站点是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>

显示结果如下（官网提供图片）：
alt text

而Y.CHEUNG想要的效果如下（因为是rebuild站点，前台显示代码就沿用之前的，只需令wordpress输出的跟原来一致即可）：
alt text

轮换自然是用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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地点：<?php echo get_post_meta(get_the_ID(),'地点',true);?>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间：<?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做好之后，在网上看到别的解决办法，点这里。

You might also like...