WordPress模板的image.php

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

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 echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_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. <?php get_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 echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_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(); ?>

拓展阅读:
完善 WordPress 的 Gallery 页面
关于Wordpress原生相册的调用
让WordPress原生相册支持lightbox效果

崔凯博客
Powered by WordPress | Theme by ck web design | TOP 顶部
Copyright © 崔凯 All rights reserved. 蜀ICP备12025891号.