日志添加缩略图效果

今天在摇曳铃丹的帮助下学到了一个在日志中用缩略图的好方法。在WordPress后台预览主题效果时的缩略图效果是不是很不错?它是WordPress程序自带的叫做thickbox的东西,我们可以用它来显示日志中的缩略图。在日志中用小图的好处是不会破坏排版格式,大图会“撑破”版面显得不好看。

在当前主题的header.php中找到:

<?php wp_head(); ?>

在这段上面加入以下代码,来调用thickbox。

<link rel="stylesheet" href="<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/thickbox.js"></script>

这里我想说说,我发现在打开网页后,点击小图时不会马上就有我要的效果,那是因为jquery.min.js是要从google调用过来的,网页如果打开慢,效果自然不会马上到位,所以,干脆把jquery.min.js这个文件下载下来上传到指定的目录下,比如/wp-includes/js/thickbox/。这样可以从本地空间调用,速度应该快很多。也就可以这样写:

<link rel="stylesheet" href="<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/thickbox.js"></script>

文件可以说是改好了。下面可以试一试效果。
编辑一个日志,在日志中要添加图片的位置用下面的代码:

<a href="http://大图绝对路径"><img src="http://缩略图绝对路径" /></a>

说白了就是把class="thickbox"加到a标签内,当然还有很多参数比如居中、居左、居右什么的也可以按自己的要求加进去。

如果是多图放成一排, 除了加class="thickbox"还要定义rel="群组名" 群组名自己定义一个, 同一排的图要用同一个群组名。就可写成:

<a rel="group" href="http://第一张大图路径"><img src="http://第一张缩略图路径" /></a>
<a rel="group" href="http://第二张大图路径"><img src="http://第二张缩略图路径" /></a>
<a rel="group" href="http://第三张大图路径"><img src="http://第三张缩略图路径" /></a>

另外,我喜欢把图片做好后FTP到空间的图片目录,不喜欢在后台上传。记录下这些是为了今后用得到的时候不再到处去找。主要还是为了让自己看的。

您可以选择一种方式赞助本站

目前评论:2   其中:访客  2   博主  0

  1. avatar 小强 3

    我的文章里大多没有什么图片,所以用不上,嘿嘿!

  2. avatar goldapple 4

    效果不错,我的还好,有自带缩略图的功能

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: