IT技术博客大学习 共学习 共进步
首页 / 前端

WordPress模板的image.php

崔凯,前端开发 2010-09-28 09:19:07 累计浏览 4,702 次
本机暂存
标签 PHP WordPress 模板 评论

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

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

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

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

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

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

  1. <div class="further">
  2. <p class="float_left">« <?php previous_image_link()?></p>
  3. <p class="float_right"><?php next_image_link()?> »</p>   
  4. </div>

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

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

  1. <?phpget_header(); ?>
  2. <style>
  3. .entry{ overflow:auto;overflow-y:hidden}
  4. #content{width:100%; border:none; padding:0}
  5. .st-related-posts{display:none;}
  6. .entry h4{display:none}
  7. .attachment{ text-align:center; margin-bottom:0!important;overflow:auto;overflow-y:hidden;width:auto}
  8. #commentwrapper{ width:508px; margin:0 auto}
  9. .further{height:110px; margin-top:25px;}
  10. </style>
  11. <div id="content">
  12. <div id="singlepost">
  13. <?php if(have_posts()) : ?>
  14. <?php while(have_posts()) : the_post(); ?>
  15. <div class="post" id="post-<?php the_ID(); ?>">
  16. <h2><a title="Permanent Link to 崔凯的相册" rel="bookmark" href="http://uicss.cn/photo/">&gt;&gt;返回相册首页</a></h2>
  17. <div class="entry">
  18. <p class="attachment">
  19. <a href="<?php echowp_get_attachment_url($post->ID); ?>"><?phpechowp_get_attachment_image($post->ID, 'medium'); ?></a>
  20. </p>
  21. <?php the_content('Read the rest of this entry &raquo;'); ?>
  22. </div>
  23. <div class="further">
  24. <p class="float_left">« <?php previous_image_link()?></p>
  25. <p class="float_right"><?php next_image_link()?> »</p>   
  26. </div>
  27. </div><!--/post-->
  28. </div><!--/singlepost-->
  29. <?php comments_template('/photocomments.php'); ?>
  30. <?php endwhile; ?>
  31. <?php else : ?>
  32. </div>
  33. <?php endif; ?>
  34. </div><!-- /content -->
  35. <?php get_footer(); ?>

同分类推荐文章

  1. 新特性速递：focus()行为新增focusVisible控制 （2026-05-29 16:23:06）
  2. Algorithmic Theming Engines: Building Self-Correcting Color Systems With `contrast-color()` （2026-05-28 21:00:00）
  3. Revealing Text With CSS letter-spacing （2026-05-27 20:37:33）

查看更多 前端 文章 →

建议继续学习

  1. 使用gettext来支持PHP的多语言 （累计阅读 39,181）
  2. WordPress插件开发 -- 在插件使用数据库存储数据 （累计阅读 29,081）
  3. Paypal接口详细代码(PHP版，非API接口) （累计阅读 19,340）
  4. 我的PHP，Python和Ruby之路 （累计阅读 13,061）
  5. include(“./file.php”)和include(“file.php”)区别 （累计阅读 12,720）
  6. 15个最好的免费开源电子商务平台 （累计阅读 12,460）
  7. Redis消息队列的若干实现方式 （累计阅读 12,000）
  8. 到底什么是MVC？ （累计阅读 11,682）
  9. Rolling cURL: PHP并发最佳实践 （累计阅读 11,420）
  10. 整理了一份招PHP高级工程师的面试题 （累计阅读 11,427）