處理文章中的圖片鏈接 – WordPress 使用阿里云 OSS 圖片處理教程

本站使用阿里云的 OSS 存儲圖片，阿里云 OSS 提供了圖片處理服務(wù)，通過此服務(wù)，可以對存儲在阿里云 OSS 中的圖鑒進行方法的調(diào)整，例如圖片質(zhì)量、圖片格式等。

由于使用了阿里云的 CDN 對 OSS 中的圖片進行加速處理，圖片越大，流量費越高。于是，我希望

• 不改變 OSS 中存儲的原始圖片（以后可能還要做其他用處）
• 可以提供 webp 格式的圖片，減少圖片體積，節(jié)省 CDN 流量，省錢
• 操作最好是自動化的，不要太麻煩
• 不能改變存儲在數(shù)據(jù)庫中的圖片鏈接，降低后續(xù)操作難度

• 阿里云格式轉(zhuǎn)換：詳情

流程圖

效果

在文章編輯器中插入測試內(nèi)容：

<img src="http://www.kartiktrivedi.com/01.png">
<img src='http://www.kartiktrivedi.com/02.jpg?w=800'>
<img src="http://www.kartiktrivedi.com/exist.png!npcink.webp">

輸出時會自動轉(zhuǎn)換為：

<img src="http://www.kartiktrivedi.com/01.png!npcink.webp">
<img src="http://www.kartiktrivedi.com/02.jpg!npcink.webp?w=800">
<img src="http://www.kartiktrivedi.com/exist.png!npcink.webp"> <!-- 已存在的不會被修改 -->

實現(xiàn)步驟

通過 WordPress 的 the_content 過濾器來實現(xiàn)這個需求。這里提供完整方案：

// 在 functions.php 中添加如下代碼
function npcink_append_webp_to_images($content) {
    // 匹配所有圖片鏈接的正則表達式
    $pattern = '/<img[^>]*src=(["'])(?<url>https?://[^"']+?.(?:png|jpe?g|gif|webp))(?!!npcink)(?[^"']*)?1/';
    
    $content = preg_replace_callback($pattern, function($matches) {
        $original_url = $matches['url'];
        $query = $matches[3] ?? ''; // 保留原始查詢參數(shù)
        $separator = (strpos($original_url, '?') === false) ? '?' : '&';
        return str_replace(
            $matches[0],
            '<img src="' . $original_url . '!npcink.webp' . $query . '"',
            $matches[0]
        );
    }, $content);

    return $content;
}
add_filter('the_content', 'npcink_append_webp_to_images', 20);

僅替換指定域名的圖片

這里，僅處理 n.getimg.net 下的圖片鏈接，其他圖片不動

// 在 functions.php 中添加如下代碼
//僅針對指定域名-n.getimg.net，在展示文章時做替換

function npcink_specific_domain_webp($content) {
    $pattern = '/<img[^>]*src=(["'])(?<url>https?://(?:[a-z0-9-]+.)?n.getimg.net[^"']*?.(?:png|jpe?g|gif|webp|bmp))(?!(?:[^"']*?[&?])npcink)(?[^"']*)?1/i';

    $content = preg_replace_callback($pattern, function($matches) {
        $original_url = $matches['url'];
        
        // 七層防御重復(fù)檢測
        if (strpos($original_url, '!npcink.webp') !== false || 
            preg_match('/.webp(?=?|$)/i', $original_url)) {
            return $matches[0];
        }

        // 智能拼接策略
        $separator = (strpos($original_url, '?') !== false) ? '&' : '!';
        return str_replace(
            $matches['url'],
            $original_url . $separator . 'npcink.webp',
            $matches[0]
        );
    }, $content);

    return $content;
}
add_filter('the_content', 'npcink_specific_domain_webp', 20);

不處理GIF

處理gif的圖片會導(dǎo)致無法播放動圖，可參考下方代碼

// 在 functions.php 中添加如下代碼
/*
1、僅針對指定域名-n.getimg.net，在展示文章時做替換
2、排除 gif后綴圖片
*/

function npcink_specific_domain_webp($content) {
    $pattern = '/<img[^>]*src=(?<quote>["'])(?<url>https?://(?:[^.]*.)?n.getimg.net[^^g{quote}]*?.(?:png|jpe?g|webp|bmp))(?![^^g{quote}]*?[&?]npcink)(?:?[^^g{quote}]*)?g{quote}/i';

    $content = preg_replace_callback($pattern, function($matches) {
        $original_url = $matches['url'];
        
        // 防御性檢查：排除已處理的URL及GIF格式
        if (strpos($original_url, 'npcink') !== false || preg_match('/.(?:gif|webp)(?:$|[?&#])/i', $original_url)) {
            return $matches[0];
        }

        // 智能拼接策略 - 使用更安全的!分隔符
        $separator = '!';
        $webp_url = $original_url . $separator . 'npcink.webp';
        
        return str_replace(
            $matches['url'],
            $webp_url,
            $matches[0]
        );
    }, $content);

    return $content;
}
add_filter('the_content', 'npcink_specific_domain_webp', 20);

結(jié)語

通過上述方法，實現(xiàn)了，存儲在媒體庫中的圖片鏈接是正常的，例如下面這樣，方便查看原始圖片

<img src="https://n.getimg.net/www/2025/05/d2b5ca33bd970f64a6301fa75ae2eb22.png">

而在文章中展示時，圖片鏈接被上述功能函數(shù)，結(jié)合阿里云 OSS 處理成這樣了，壓縮了圖片體積，降低了成本

<img src="https://n.getimg.net/www/2025/05/d2b5ca33bd970f64a6301fa75ae2eb22.png!npcink.webp">

相關(guān)內(nèi)容