WordPress 开启日志缩略图以及不用插件的程序使用方法

最新推荐文章于 2024-09-21 13:09:33 发布

weixin_33857230

最新推荐文章于 2024-09-21 13:09:33 发布

阅读量265

点赞数

文章标签： php python

原文链接：https://my.oschina.net/shunshun/blog/89220

版权

2019独角兽企业重金招聘Python工程师标准>>>

很多 WordPress 主题，特别是那些杂志型的主题，会给每篇日志加上一张缩略图，这种展现方式一般用在首页，可能单独出现，或者和日志摘要一起。但是目前位置没有一个标准的方法去实现日志缩略图，很多主题是使用 WordPress 自定义字段来实现日志缩略图功能，这样的设置比较复杂，虽然我在制作的很多 WordPress 项目中都是用这个方法，并且设置了直接上传缩略图的方法，但是还是略显麻烦。

　　从 WordPress 2.9 开始，WordPress 开始内置了日志缩略图的功能，并且提供了详细的接口让主题的作者设置和调用日志的缩略图。

WordPress 日志缩略图功能

开启 WordPress 日志缩略图功能

首页你要看下你所用的主题有没有开启文章缩略图功能，如果看起的话，会在wordpress后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置，如下图：

文章缩略图设置

如果没有说明你还没有激活这功能。我们需要在你主题functions.php里面加一段代码。

　　在当前 WordPress 主题的 functions.php 添加以下函数，这个函数会在 WordPress 后台编辑日志的界面开启设置日志缩略图的窗体。

add_theme_support( 'post-thumbnails' );

上面的代码会同时给日志和页面开启缩略图功能，如果你想单独开启该功能，使用以下代码：

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 给日志启用日志缩略图 add_theme_support( 'post-thumbnails', array( 'page' ) ); // 给页面启用日志缩略图

设置日志缩略图大小

　　开启了 WordPress 日志缩略图功能之后，我们应该缩略图的大小，这里有两种方式：box-resize（盒大小模式）和 hard-crop（裁剪模式）。

　　盒大小模式按照比例缩小图片直到适合指定的盒子，所以不会扭曲图片。盒大小模式可以指定长度和宽度，比如一张 100X50 的图片在指定的 50X50 的盒子中会被缩小为 50X25。这种模式的好处是可以显示整张图片，缺点是生成的图片并不是一样大的，有时候是长度一样，有时候是高度一样，如果你想限制缩略图到一定的宽度，而不在乎它的高度，你可以指定你的宽度，然后设置它的高度为 9999 或者任何你认为够大的一个数字。设置盒模式的代码如下：

set_post_thumbnail_size( 50, 50 ); // 50 像素宽和 50 像素高，盒大小模式（box resize mode）。

　　第二种是硬裁剪模式（hard-crop），这种模式下，图片会被裁剪为指定的大小，这种方式的好处就是得到我们所希望的，比如你希望的到一张 50X50 的缩略图，我们就会得到 50X50 的缩略图，缺点就是你的图片会被裁减，并且在缩略图中只会显示图片的一部分。这种方式的代码是：

set_post_thumbnail_size( 50, 50, true ); // 50 像素宽和 50 像素高，裁剪模式（hard crop mode）

在主题中显示日志缩略图

　　现在我们要在主题中使用模板函数来显示日志缩略图，这些函数应该在 WordPress 的主循环中使用。

has_post_thumbnail() 这个模板函数判断当前日志是否有缩略图，如果有返回 true，否则为 false：

<?php if ( has_post_thumbnail() ) { //当前日志有缩略图 } else { //当前日志没有设置缩略图 } ?>

the_post_thumbnail() 这个模板函数输出日志缩略图，如果缩略图存在的话。

<?php the_post_thumbnail(); ?>

WordPress 日志缩略图具体使用案例

　　假设你想在首页使用一个比较小的 50X50 裁剪模式的缩略图，并且想在日志页面使用 400 像素宽（高度不限制）的图片，那么怎么办？你可以置顶额外的自定义尺寸，代码如下：

在 functions.php 中添加如下代码：

add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 50, 50, true ); // 普通的缩略图 add_image_size( 'single-post-thumbnail', 400, 9999 ); // 永久连接缩略图大小

在 index.php 或者 home.php（取决你的主题的结构）中的主循环添加如下代码：

<?php the_post_thumbnail(); ?>

在主题的 single.php （也是主循环中）添加如下代码：

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

　　这样就行了，set_post_thumbnail_size() 调用 add_image_size( 'post-thumbnail' ) — 默认的日志缩略图“handle”（处理函数）。但是我们可以通过调用 add_image_size( $handle, $width, $height, {$hard_crop_switch} ); 来增加额外的日志缩略图处理函数，然后通过传递 handle 给 the_post_thumbnail( $handle ); 来使用新的缩略图尺寸。

其他 WordPress 日志缩略图相关的函数

获取日志缩略图 ID

　　有时候你想自定义脚本，这个时候你可能获取缩略图的 ID，日志缩略图的 ID 是存在 meta key 为_thumbnail_id 的值中，但是我们只需要使用下面简单的函数就可以获取日志的缩略图 ID：

$image_id = get_post_thumbnail_id();

获取日志缩略图而不是输出它

　　有时候，你可能在 PHP 代码中返回日志缩略图，而不是输出它，可以使用下面简单的代码：

$image = get_the_post_thumbnail( $post->ID, 'thumbnail' );

WordPress简单三步自动显示缩略图(无插件)

步入正题，开始添加首页缩略图，分简单3步即可实现：

第一步：找到使用的主题模板的functions.php文件在<?php和?>之间添加如下代码

function thumb_img($soContent) {     $soImages = '~<img [^\>]*\ />~';      preg_match_all( $soImages, $soContent, $thePics );     $allPics = count($thePics[0]);      if( $allPics > 0 )     {         echo "<span id='thumb'>";         echo $thePics[0][0];         echo '</span>';      } else {         echo "<span id='thumb'>";         echo "<img src='"; echo bloginfo('template_url');         echo "/images/thumb.gif'></span>";      }  }

　　这是一个显示缩略图的方法，自动检索文章的第一张图片，如果没有显示当前主题/images/thumb.gif 所以你要把这个thumb.gif图片准备好~

第二步：找到index.php文件即首页文件，找到the_content();或相似的代码在它之前添加如下代码：

thumb_img($post->post_content);

　　这样就调用了刚才的方法，实际上缩略图已经完成了！但是你看到的效果一定很意外，应为图片的大小没有控制，会很难看…好了，第三步

第三步：添加缩略图样式CSS代码：

　　这是浮云站使用的的缩略图样式，你可以先凑合着用，再另行修改

#thumb{margin:5px 15px 5px 5px;width:145px;height:120px;border:3px solid 
#eee;float:left;overflow:hidden;} #thumb img{max-height:186px;max-width:186px}

　　好了，这样缩略图就有模有样的显示出来啦！三步搞定！

转载于:https://my.oschina.net/shunshun/blog/89220