WordPress模板的image.php
浏览:3603次 出处信息
最近一直在找“有评论功能”的相册插件,始终没有满意的结果,索性自己干了。
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><!--/post-->
- </div><!--/singlepost-->
- <?php comments_template('/photocomments.php'); ?>
- <?php endwhile; ?>
- <?php else : ?>
- </div>
- <?php endif; ?>
- </div><!-- /content -->
- <?php get_footer(); ?>
建议继续学习:
- 分享一个JQUERY颜色选择插件 (阅读:12629)
- WordPress评论翻页造成404页面的解决方案 (阅读:8015)
- jQuery Color Animations颜色动画插件 (阅读:7069)
- 精于图片处理的10款jQuery插件 (阅读:6203)
- vim 常用插件推荐 (阅读:5959)
- WordPress插件开发 -- 在插件使用数据库存储数据 (阅读:5601)
- WordPress安全建议 (阅读:5339)
- nyroModal:强大的jQuery弹出层插件 (阅读:4771)
- vim的一个js代码整理的插件jsbeautify.vim (阅读:4673)
- WordPress插件开发--获知文章状态变化 (阅读:4544)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:php实现的thrift socket server
文章信息
- 作者:cuikai 来源: 崔凯,前端开发
- 标签: WordPress 插件 相册 评论
- 发布时间:2010-09-28 09:19:07
建议继续学习
近3天十大热文
- [67] Go Reflect 性能
- [67] Oracle MTS模式下 进程地址与会话信
- [67] 如何拿下简短的域名
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [60] 图书馆的世界纪录
- [59] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [47] 界面设计速成