使用外链图片来作为博客的特色图

众所周知,wordpress特色图是不允许外链图片地址的。不知道wordpress官方为何不允许这样做,确实让人很难理解。那该怎么去做呢?

最近有朋友让我给他的新站主题上的特色图设置为可以用外链图片地址。其实我也是比较喜欢用外链图片地址的,一般我备份网站的时候都是用的wordpress程序后台自带的xml导出功能,很是方便,它可以将文章和评论都能导出。然而缺点也有,就是上传至wordpress后台的图片无法备份。


传统备份是将整站文件以及mysql数据库备份,很是烦恼。因为我是一个具有强迫症的人,我只需要将我的文章和评论导出,文章内的图片我平时都是尽量用的外链图片,不喜欢用自带的媒体库去存储图片再调用。而且wordpress自带的多媒体上传图片,都会将一张图片裁剪为好几个尺寸的图片以便其他之用。(一旦图片越来越多的话,裁剪的多余尺寸的图片就越来越多,可想而知,这不是垃圾吗?)每次这样传统备份的时候,我都觉得wordpress程序用了这么久,程序里也许有很多垃圾。整站备份,垃圾也一起备份了。我喜欢每过一段时间,就整站重置,重新安装程序并导入xml备份文件。干净舒服。(大概是心理作用吧。)

晚上折腾特色图的时候,找到了不少资料,很有用。也成功的将我的新主题也设置为可以使用外链图片来作为特色图。怎么用?就是获取文章第一张外链图片来作为特色图来展示。一旦解决一个问题后,下一个困难就来了。本博客需要用的到的特色图有三种尺寸,而获取文章第一张外链图片来作为特色图的话,这三个地方的特色图显示的尺寸都是很别扭的,不是说尺寸大了的问题,而是一个显示美观的问题。


如何将外链图片分成好几个尺寸的问题,还在研究中?

裁剪不同分辨的图片

首先看看下面这段外链图片的链接地址:

https://cdn.mrju.cn/wp-content/uploads/2016/12/yunwu.jpg?imageView2/1/w/409/h/160/q/100

/w/200/h/200是分辨率分别为宽和高;q/100是图片质量,100代表图片质量,数值越低图片质量越差,最高100.

各位同学可以复制上面的地址在浏览器打开,可以修改其中的数值来观察图片的变化。

以上用到的接口意思是:裁剪正中部分,等比缩小生成指定缩略图。


除了上面代码用到的接口外,你还可以根据你的需要使用其他接口,比如:

  1. 宽度固定为200px,高度等比缩小,生成200x133缩略图:
    https://cdn.mrju.cn/wp-content/uploads/2016/12/yunwu.jpg?imageView2/2/w/200
  2. 高度固定为200px,宽度等比缩小,生成300x200缩略图:
    https://cdn.mrju.cn/wp-content/uploads/2016/12/yunwu.jpg?imageView2/2/h/200

这里介绍了几种简单的方法更多高级的图片处理方法,请通过下面的链接查看:http://developer.qiniu.com/docs/v6/api/reference/fop/image/imagemogr2.html


外链图片设置为特色图

// 特色图支持外链
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //定义一个默认图像
$default_img=get_template_directory_uri().'/images/thumbnail.png';
$first_img = "$default_img";
}
return $first_img;
}
 
function mimelove_img($postID) {
 $cti = catch_that_image();
 $showimg = $cti;
 has_post_thumbnail();
 if ( has_post_thumbnail() ) { 
 $thumbnail_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumbnail');
 $shareimg = $thumbnail_image_url[0];
 } else { 
 $shareimg = $showimg;
 };
 return $shareimg;
}

调用方法:

<img src="<?php echo mimelove_img(get_the_ID()); ?>" alt="" >  //当然,你也可以只用php函数

只获取特色图地址

方法一

// 功能说明: WordPress缩略图
function barley_is_has_image(){
    global $post;
    if( has_post_thumbnail() ) return true;
    $content = $post->post_content;
    preg_match_all('//sim', $content, $strResult, PREG_PATTERN_ORDER);
    if(!empty($strResult[1])) return true;
    return false;
}
// 功能说明: 获取缩略图地址
function get_post_thumbnail(){
    global $post;
    if( has_post_thumbnail() ){
        $timthumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
        return $timthumb_src[0];
    } else {
        $content = $post->post_content;
        preg_match_all('//sim', $content, $strResult, PREG_PATTERN_ORDER);
        $n = count($strResult[1]);
        if ($n > 0) {
            return $strResult[1][0];
        } else {
            return false;
        }
    }
}

调用方法

<?php echo get_post_thumbnail();?> //这儿输出的是图片地址

方法二

// 只获取特色图地址
function get_post_thumbnail_url($post_id){
        $post_id = ( null === $post_id ) ? get_the_ID() : $post_id;
        $thumbnail_id = get_post_thumbnail_id($post_id);
        if($thumbnail_id ){
                $thumb = wp_get_attachment_image_src($thumbnail_id, 'thumbnail');
                return $thumb[0];
        }else{
                return false;
        }
}

调用方法:

<?php get_post_thumbnail_url();?> //这儿输出的是图片地址

参考资料:https://www.mywpku.com/setup-featured-image-in-wordpress-via-url.html
参考资料:http://blog.wpjam.com/m/get_post_thumbnail_url/
参考资料:http://www.dz9.net/webfront/985.html

别留恋破碎的旧梦,别计较人生的得失。

12 条评论

  1. 一旦图片越来越多的话,裁剪的多余尺寸的图片就越来越多,可想而知,这不是垃圾吗?
    ==》全部设置为0,就不会裁剪了

    1. @灰狼 设置为0后,主题自带的也有裁剪尺寸的函数,我这么做只是为了媒体库不放图片,不喜欢整站备份,只喜欢用后台导出xml来备份。 :roll:

发表评论

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

返回主页看更多
狠狠的抽打博主 支付宝 扫一扫