让 WordPress 缩略图机制支持URL外链图片

100

wordPress Category

最近为一位朋友定制一款图片主题,为其使用了 七牛云存储 服务,但是想让缩略图支持URL外链引用图片,虽然说七牛有api可以直接调用不同大小的图片,但是对于某人的博客来说,或许是大材小用。对于很多朋友来说,这个api可能很方便,但是却非常难以折腾。这里周良为大家提供一个最简单的方法(非调用API,而是所有的外链图片 Wordpress 都可以支持的方法)。

下面是本方法的特地:

  • 支持手动上传缩略图
  • 支持缩略图外链引用
  • 如果文章内包含有图片,就用第一张图片做为缩略图
  • 如果文章内没有图片,则用默认的图片

其实就是用 WordPress 提供的自定义栏目功能来解决。

$postImageUrl = get_post_meta($post->ID, ‘thumbnail’, true); //设置自定义栏目名为“thumbnail”

1.在functions.php文件中添加下面代码:

//缩略图获取
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 262, 114 ,true );//设置缩略图的尺寸
function dm_the_thumbnail() {
global $post;
$postImageUrl = get_post_meta($post->ID, ‘thumbnail’, true); //设置自定义栏目名为“thumbnail”
// 判断该文章是否设置有缩略图,如果有则直接显示
if ( has_post_thumbnail() ) {
echo ‘<span class=”work-thumbnail”>’;
the_post_thumbnail();
echo ‘</span>’;
} elseif ($postImageUrl) {
echo ‘<span class=”work-thumbnail”><img alt=”” src=”‘.$postImageUrl.’” /></span>’;
} else { //如果文章没有设置缩略图,则查找文章内是否包含图片
$content = $post->post_content;
preg_match_all(‘/<img.?(?: |\t|\r|\n)?src=[\’”]?(.+?)[\’”]?(?:(?: |\t|\r|\n)+.?)?>/sim’, $content, $strResult, PREG_PATTERN_ORDER);
$n = count($strResult[1]);
if($n > 0){ // 如果文章内包含有图片,就用第一张图片做为缩略图
echo ‘<span class=”work-thumbnail”><img alt=”” src=”‘.$strResult[1][0].’” /></span>’;
}else { // 如果文章内没有图片,则用默认的图片
echo ‘<span class=”work-thumbnail”><img alt=”” src=”‘.get_bloginfo(‘template_url’).’/images/thumbnail.jpg” /></span>’;
}
}
}

2.折腾完这些步骤以后,需要后台界面右上角点击显示选项,勾选自定义栏目。

3.获取timthumb.php文件,放在主题根目录下
然后调整样式之类的,关于代码中的结构和类名可以修改为适合自己所使用的主题。

原文:UECSS

如果你有设计或者 WordPress 方面的项目需求,可以和我联系 Email:wwwzhouliang@gmail.com。

作者主页 邮箱 微博 腾讯微博 QQ Twitter Facebook Google+

共 100 条评论

  1. 菜贩儿 回复

    我现在也是用timthumb.php来获取图片,但代码不是你这里的,虽然支持外链了,但老是有一些图片没有办法显示,不知道为什么,采用你的这个代码之后就会显示Parse error: syntax error, unexpected ‘&’ in /home/pmiqbzhy/public_html/caifan/wp-content/themes/inkforbean2.4.1/functions.php on line 577请问怎么解决呢,好像这个和外链没有什么关系吧,我现在用的是百度的外链,但缩略图有时候不显示的都是放在本地的自动调用的图片。

  2. 菜贩儿 回复

    我现在也是用timthumb.php来获取图片,但代码不是你这里的,虽然支持外链了,但老是有一些图片没有办法显示,不知道为什么,采用你的这个代码之后就会显示Parse error: syntax error, unexpected ‘&’ in /home/pmiqbzhy/public_html/caifan/wp-content/themes/inkforbean2.4.1/functions.php on line 577请问怎么解决呢,好像这个和外链没有什么关系吧,我现在用的是百度的外链,但缩略图有时候不显示的都是放在本地的自动调用的图片。

  3. TikyZ 回复

    为什么添加进functions里 多行报错.. 是为什么 该怎么添加

    1. 周良 (文章作者) 回复

      估计你加错位置了

  4. TikyZ 回复

    为什么添加进functions里 多行报错.. 是为什么 该怎么添加

    1. 周良 (文章作者) 回复

      估计你加错位置了

  5. 小二苘 回复

    这个方法会加载图片到本地么?

    1. 周良 (文章作者) 回复

      不会

  6. 小二苘 回复

    这个方法会加载图片到本地么?

    1. 周良 (文章作者) 回复

      不会

  7. 小周周不求人 回复

    你好,直接复制代码加入为什么会报错呢,和下边朋友的错误一样

  8. 小周周不求人 回复

    你好,直接复制代码加入为什么会报错呢,和下边朋友的错误一样

  9. jokrface 回复

    funcitions.php这个文件是不是在主题的那个文件夹里面的functions.php?

    1. 周良 (文章作者) 回复

      是的

  10. jokrface 回复

    funcitions.php这个文件是不是在主题的那个文件夹里面的functions.php?

    1. 周良 (文章作者) 回复

      是的

Leave a Reply

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 Required fields are marked *

返回顶部