日志添加缩略图效果

  • A+
所属分类:wordpress

今天在摇曳铃丹的帮助下学到了一个在日志中用缩略图的好方法。在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 rel="external nofollow" target="_blank" href="https://www.leez.org/wp-content/themes/begin/go.php?url=aHR0cDovL+Wkp+Wbvue7neWvuei3r+W+hA=="><img src="http://缩略图绝对路径" /></a>

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

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

<a rel="group" rel="external nofollow" target="_blank" href="https://www.leez.org/wp-content/themes/begin/go.php?url=aHR0cDovL+esrOS4gOW8oOWkp+Wbvui3r+W+hA=="><img src="http://第一张缩略图路径" /></a>
<a rel="group" rel="external nofollow" target="_blank" href="https://www.leez.org/wp-content/themes/begin/go.php?url=aHR0cDovL+esrOS6jOW8oOWkp+Wbvui3r+W+hA=="><img src="http://第二张缩略图路径" /></a>
<a rel="group" rel="external nofollow" target="_blank" href="https://www.leez.org/wp-content/themes/begin/go.php?url=aHR0cDovL+esrOS4ieW8oOWkp+Wbvui3r+W+hA=="><img src="http://第三张缩略图路径" /></a>

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

avatar

发表评论取消回复

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

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

    • avatar 小强 3

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

      • avatar goldapple 4

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