为自己主题启用WEBP图片格式

寻梦xunm| 629| 收集

2年前

超过995天温馨提示

本文最后更新于2022年03月02日，已超过995天没有更新，若内容或图片失效，请留言反馈。

博客从wordpress换到typecho其实时间不过半个月，有幸用上Pingshu这个主题，真的非常漂亮。
和往常一样，任何主题到手里总是要折腾一番，毕竟最适合自己才好。
以下的添加和修改都在主题文件function.php中进行

添加函数
可以检查 HTTP 请求头部字段 Accept 的值是否包含 webp

function is_webp(){
    return strstr($_SERVER['HTTP_ACCEPT'],'image/webp');
}

修改函数
parseFieldsThumb函数---对应主页文章的特色图片

function parseFieldsThumb($obj){
    $options = Typecho_Widget::widget('Widget_Options');
    if(!empty($options->src_add) && !empty($options->cdn_add)){
        $fieldsThumb = str_ireplace($options->src_add,$options->cdn_add,$obj->fields->thumb);
        echo trim($fieldsThumb);
    }else{
        if(is_webp()){
            $fieldsThumb = preg_replace("/$/","?imageView2/0/format/webp/q/85",$obj->fields->thumb);
            echo trim($fieldsThumb);
        }
        else{
            return $obj->fields->thumb();    
        }
    }
}

parseContent函数---对应文章内容中的图片

function parseContent($obj){
    $options = Typecho_Widget::widget('Widget_Options');
    if(!empty($options->src_add) && !empty($options->cdn_add)){
        $obj->content = str_ireplace($options->src_add,$options->cdn_add,$obj->content);
    }
    if(is_webp()){
        $new_content = preg_replace('/(img\.heiybb\.com\/)+(.*)(.jpg|.jpeg|.png|.gif)+/i', '$1$2$3?imageView2/0/format/webp/q/85', $obj->content);
        echo trim($new_content);
    }
    else{
        echo trim($obj->content);
    }
}

详解以及小BUG
只修改以上两个函数，尤其是parseFieldsThum这个函数，有一个前提就是每篇文章中必须已经单独设置了thumb字段，否则不会引用该函数。别的条件判断懒得修改了，所以就这样吧~
检查发现is_webp()函数和主题带有的pjax有冲突，具体表现为只有在主页以及刷新一次之后才能看到图片地址被替换为WEBP
原理是pjax的Request Header中的Accept字段为空，无法触发is_webp()函数，暂时没有解决方法，只能在pjax和webp中取舍
文章来源于：https://heiybb.com/page/4/

教程 php 代码 webp

0 赞 or 打赏

喜欢就打赏一点