WordPress模板的image.php -- PHP -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> PHP --> WordPress模板的image.php

WordPress模板的image.php

浏览:3414次出处信息

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

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">« <?php previous_image_link() ?></p>
<p class="float_right"><?php next_image_link() ?> »</p>
</div>

然后删掉post_tags、sidebar等等不需要的内容，来拓宽图片的展示空间。
添加overflow:auto;overflow-y:hidden样式到正文区域，给大图片添加横向滚动条。
增加返回相册首页的按钮。
参考留言板的制作方法，写一个photocomment个性化评论页。
等等个性化的东西，自定义就好。

相册效果演示地址：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/">>>返回相册首页</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 »'); ?>
</div>
<div class="further">
<p class="float_left">« <?php previous_image_link() ?></p>
<p class="float_right"><?php next_image_link() ?> »</p>
</div>
</div>
</div>
<?php comments_template('/photocomments.php'); ?>
<?php endwhile; ?>
<?php else : ?>
</div>
<?php endif; ?>
</div>
<?php get_footer(); ?>

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：php实现的thrift socket server

后一篇：dfopen()：discuz封装的fsockopen() >>

文章信息

作者：cuikai 来源：崔凯,前端开发
标签： WordPress 插件相册评论
发布时间：2010-09-28 09:19:07

建议继续学习

近3天十大热文