网站运营
位置:首页>> 网站运营>> WordPress模板的image.php

WordPress模板的image.php

 来源:崔凯的博客 发布时间:2011-09-22 20:41:26 

标签:wordpress,模板,相册

最近一直在找“有评论功能”的相册插件,始终没有满意的结果,索性自己干了。

wordpress自2.5版本就开始自带了 wp_get_attachment_image 参数,它可以把附件当做一个页面展示出来,在页面上添加<?php comments_template(); ?>就可以实现评论功能了。评论演示

目前大多数主题都没有包含image.php,如果没有这个文件,我们可以复制一个single.php重命名为image.php来做相册的个性化调整。

首先查找 the_content 参数,在他的php标签上面,添加代码:

<p class="attachment"> 
<a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a> 
</p> 
<div class="caption"> 
<?php if ( !empty($post->post_excerpt) ) the_excerpt(); // "caption"标签包含的是照片描述区域,如果你懒得写描述,这部分内容可以删掉 ?> 
</div>

如果你想要“上一张”“下一张”的翻页效果,可以在the_content的下面,添加翻页代码:

<div class="further"> 
<p class="float_left">&laquo; <?php previous_image_link() ?></p> 
<p class="float_right"><?php next_image_link() ?> &raquo;</p>    
</div>

然后删掉post_tags、sidebar等等不需要的内容,来拓宽图片的展示空间。
添加overflow:auto;overflow-y:hidden样式到正文区域,给大图片添加横向滚动条。
增加返回相册首页的按钮。


相册效果演示地址:http://uicss.cn/photo/
以下是我目前的image.php源代码,供大家参考:


<?php get_header(); ?> 
<style> 
.entry{ overflow:auto;overflow-y:hidden} 
#content{width:100%; border:none; padding:0} 
.st-related-posts{display:none;} 
.entry h4{display:none} 
.attachment{ text-align:center; margin-bottom:0!important;overflow:auto;overflow-y:hidden;width:auto} 
#commentwrapper{ width:508px; margin:0 auto} 
.further{height:110px; margin-top:25px;} 
</style> 
<div id="content"> 
<div id="singlepost"> 
<?php if (have_posts()) : ?> 
<?php while (have_posts()) : the_post(); ?> 
<div class="post" id="post-<?php the_ID(); ?>"> 
<h2><a title="Permanent Link to 崔凯的相册" rel="bookmark" href="http://uicss.cn/photo/">&gt;&gt;返回相册首页</a></h2> 
<div class="entry"> 
<p class="attachment"> 
<a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a> 
</p> 
<?php the_content('Read the rest of this entry &raquo;'); ?> 
</div> 
<div class="further"> 
<p class="float_left">&laquo; <?php previous_image_link() ?></p> 
<p class="float_right"><?php next_image_link() ?> &raquo;</p>    
</div> 
</div><!--/post--> 
</div><!--/singlepost--> 
<?php comments_template('/photocomments.php'); ?> 
<?php endwhile; ?> 
<?php else : ?> 
</div> 
<?php endif; ?> 
</div><!-- /content --> 
<?php get_footer(); ?>

0
投稿

猜你喜欢

手机版 网站运营 asp之家 www.aspxhome.com