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

WordPress模板的image.php

崔凯,前端开发 2010-09-28 09:19:07 浏览 4,662 次
标签 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. WordPress插件开发 -- 在插件使用数据库存储数据 （阅读 29,000）
  2. 分享一个JQUERY颜色选择插件 （阅读 14,062）
  3. WordPress评论翻页造成404页面的解决方案 （阅读 9,381）
  4. jQuery Color Animations颜色动画插件 （阅读 8,341）
  5. 精于图片处理的10款jQuery插件 （阅读 7,260）
  6. vim 常用插件推荐 （阅读 7,021）
  7. WordPress安全建议 （阅读 6,262）
  8. vim的一个js代码整理的插件jsbeautify.vim （阅读 6,020）
  9. nyroModal：强大的jQuery弹出层插件 （阅读 5,802）
  10. WordPress插件开发--获知文章状态变化 （阅读 5,561）