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

首发时间:2013.07.19 | 9,217 次阅读

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>’;
}
}
}
  1. 折腾完这些步骤以后,需要后台界面右上角点击显示选项,勾选自定义栏目。

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

原文:UECSS

100 条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

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

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

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

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

      1. @周良 哦,好吧。恩,问你个问题,为什么我每次打开博客的时候前几秒页面都比正常情况大?缓存好了又缩回正常了,这是模板出问题了吗

          1. @NEARSTYLE 这个问题,我在chrome下面看了一下,没发现。但是,我想应该是:你的图片比较大,我指的是图片的宽度和高度比较大,超过了主题的限制,所以一打开图片会超出网页一部分之类的。过了几秒以后,网页的css加载成功,css现在了图片大小,所以图片就被按比例缩小了

            1. @周良 好吧,希望是浏览器的问题,其实图片不大,当初找人帮忙改模板时特意做了和照片宽度一样的宽度,640,照片都是按照640修过的

      1. @周良 哦,好吧。恩,问你个问题,为什么我每次打开博客的时候前几秒页面都比正常情况大?缓存好了又缩回正常了,这是模板出问题了吗

          1. @NEARSTYLE 这个问题,我在chrome下面看了一下,没发现。但是,我想应该是:你的图片比较大,我指的是图片的宽度和高度比较大,超过了主题的限制,所以一打开图片会超出网页一部分之类的。过了几秒以后,网页的css加载成功,css现在了图片大小,所以图片就被按比例缩小了

            1. @周良 好吧,希望是浏览器的问题,其实图片不大,当初找人帮忙改模板时特意做了和照片宽度一样的宽度,640,照片都是按照640修过的

  5. $postImageUrl = get_post_meta($post->ID, 'thumbnail', true); //设置自定义栏目名为“thumbnail”在这行报错syntax error, unexpected '&'这是为虾米呢?

  6. $postImageUrl = get_post_meta($post->ID, 'thumbnail', true); //设置自定义栏目名为“thumbnail”在这行报错syntax error, unexpected '&'这是为虾米呢?

  7. 貌似这个效率有一点低,能使用 WordPress Object Cache 和 WordPress Transient API 优化一下效率么?

  8. 貌似这个效率有一点低,能使用 WordPress Object Cache 和 WordPress Transient API 优化一下效率么?