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

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

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

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

• 阿里云格式轉換：詳情

流程圖

效果

在文章編輯器中插入測試內容：

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

輸出時會自動轉換為：

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

實現步驟

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

// 在 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] ?? ''; // 保留原始查詢參數
        $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'];
        
        // 七層防御重復檢測
        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的圖片會導致無法播放動圖，可參考下方代碼

// 在 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);

結語

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

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

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

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

相關內容