现在的位置: 首页WordPress>正文
关于我在 HotNews 主题中相册的使用
2012年03月17日 | WordPress | 浏览 8,749 | 评论 6

我喜欢 HotNews 主题,但其中的相册功能不太适合我的需要:1) 发表的相册图片,不会显示在正常的页面中,需自建分类,才能通过导航菜单查看。2) 公告、相册、视频采用自定义文章发布类型功能,通过这些功能发表的日志在更换主题后,将不能浏览查看,在后台也看不见。

所以,准备就简单使用一般文章来发表相册图片,给这类文章建一个统一的标签就行了。显示相册中图片的边栏小工具,还可以继续保留下来,我是这样做的:

给所有用来发表图片的文章加一个标签:图片 (pictures),并添加自定义栏目:sidebar_img,值就是你想让出现在边栏的图片的链接,如图:

然后,在 HotNewspro/includes/mimg.php 中找到:

$loop = new WP_Query( array( 'post_type' => 'picture', 'orderby' => rand, 'posts_per_page' => 4 ) );

替换为:

$loop = new WP_Query( array( 'post_type' => 'post', 'orderby' => rand, 'posts_per_page' => 4, 'tag' => 'pictures' ) );

再用编辑器的查找替换功能把两处 small 替换为 sidebar_img 就完成了。

补充:使用过程中发现一个问题,图片文件名中如果含有特殊字符,比如:"%" ( Picasa 相册中图像若使用了中文文件名时会产生此字符),暗箱显示功能就不能启动。

更新:找到 includs/addclass.php 文件中的 $pattern 通过修改这里的正则表达式 (Regular Expression) 中添加 "\%" 可解决上面的问题。修改后的结果是这样的:
  $pattern = "/<a(.*?)href=('|\")([A-Za-z0-9\/_\.\%\~\:-]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?)>/i";

另外,发现一个很好的在线 Regexp 测试工具

更新启用 CMS 主页布局时,又对右边栏图像展示的实现做了修改:
在 HotNewspro/includes/mimg.php 中找到:

$loop = new WP_Query( array( 'post_type' => 'post', 'orderby' => rand, 'posts_per_page' => 4, 'tag' => 'pictures' ) );

替换为:
$loop = new WP_Query( array( 'post_type' => 'picture', 'orderby' => rand, 'posts_per_page' => 4, 'meta_key' => sidebar_img_on ) );

然后,给文章添加二个自定义栏目:1) 名称:sidebar_img_on,值:可以任意。2) 名称:sidebar_img, 值:图片的地址。就可实现图像在右边栏的展示,顺便提一下图的大小为 107x66。

目前有 6 条留言 其中:访客:3 条, 博主:3 条

  1. ayumi : 2012年05月22日20:30:49  1楼 @回复 回复

    博主,您好,您是怎么使你侧边栏的图片出现6张,而我的只有4张,另外如果我想改为16张,如何更改呢,希望您能百忙中抽空解答,不胜感激!!

    • 三雨二草 : 2012年05月23日10:10:15 @回复 回复

      在 HotNewspro/includes/mimg.php 中找到:

      $loop = new WP_Query( array( 'post_type' => 'picture', 'orderby' => rand, 'posts_per_page' => 4 ) );

      把其中的数字4替换一下就行了。比如,你想要16张,就把它改为16即可。

      • ayumi : 2012年05月23日22:34:38 @回复 回复

        您好,是这样的,如果改为16的话,边框大小没有改过来,还是只有4张图这么大,边框的大小在哪里修改?

        • 三雨二草 : 2012年05月24日09:51:10 @回复 回复

          在 HotNewspro/style.css 中找到:

          /** 相册 **/
          .mimg {
          background: #fff;
          height:216px; <------------- 这里
          padding: 0 0 0 4px;
          border-left: 1px solid #ccc;
          border-right: 1px solid #ccc;
          }

          在这里修改 height 以适应你的需要。

          • ayumi : 2012年05月24日19:38:48

            哈,解决了,感谢您耐心细致的解答。祝福您财运亨通,财源广进。好人一生平安!

          • 三雨二草 : 2012年05月25日10:49:49

            谢谢祝福。

欢迎留言

定制个性头像