WordPress火山引擎VeImageX圖片服務靜態資源CDN加速

字節跳動(抖音母公司)的火山引擎推出了VeImageX圖片服務,面向站長群體提供圖像、文檔等各類素材上傳、托管、智能處理和CDN分發一站式解決方案。支持任意純靜態資源存儲(不僅僅是圖片,也可以是CSS、JS、字體文件等等)、分發能力不限制任意形式靜態資源,提供圖像類文件實時處理功能。簡單來說,將您網站的靜態資源,比如圖片托管到火山引擎VeImageX上,以此來加速網站打開速度,畢竟火山引擎VeImageX的打開速度是很快的,您的網站只負責提供文字部分加載,速度那肯定是非常快,對網站的帶寬要求也降低不少。
由WordPress果醬開發的WPJAM Basic插件已經支持通過鏡像回源的方式把WordPress上的靜態資源全部一次鏡像到火山引擎的VeImageX上面,只需一鍵設定即可使用,非常方便。

官方網站https://www.volcengine.com

要想使用火山引擎VeImageX圖片服務,首先要注冊賬號並實名認證,立即注冊
實名認證審核通過後,登陸VeImageX控制台,開通VeImageX産品。目前官方正在舉辦限免活動,贈送每月免費額度:10GB流量、10GB存儲、20TB基礎處理、https訪問免費、回源流量免費,開通VeImageX産品一定要輸入邀請碼:CLEMNL,否則沒有免費福利額度。

需要注意的是:VeImageX圖片服務自身並沒有SSL證書,需要自行申請SSL證書後在後台上傳啓用。
進入火山引擎控制台,選擇「VeImageX」,輸入邀請碼:CLEMNL,點擊“立即開通”,提交成功。再選擇「證書管理」,點擊“新建”上傳您要綁定CDN的二級域名SSL證書。接著選擇「服務管理」➠「新建服務」,新建一個存儲空間:

服務名稱:根據自己的填寫
地區:根據您網站用戶在哪裏最多選擇
服務類型:選擇圖像處理服務
綁定域名:請輸入您自己網站要綁定CDN的任意一個二級域名,在綁定域名的後面選擇已上傳的SSL證書,啓用後便可支持SSL。
服務屬性:選擇永久保存

點擊“確定”等待火山引擎審核您的服務。審核通過後,會顯示火山引擎給您綁定域名的CNAME記錄值,登陸您的域名管理控制台添加CNAME記錄。

選擇「VeImageX」➠「服務管理」,點擊“基礎配置”設置鏡像回源。相對于其它對象存儲服務,火山引擎的 VeImageX比較簡單,只需要在主回源地址填入您博客的域名即可。如果之前使用了其它對象存儲服務,並且本地圖片已經刪除了,VeImageX也提供了備用回源地址,您可以把當初在其它對象存儲服務中設置的CDN域名填寫到備用回源地址。
如果覺得上面步驟不清楚的話,可以前往查看官網的快速入門文檔

如果您希望VeImageX能夠幫助智能縮放和裁剪圖片,那麽還需要設置VeImageX的圖片處理模板。選擇「VeImageX」➠「服務管理」,點擊“圖片配置”進入圖片處理配置頁面,點擊“新建模板”。首先常規編輯,您根據自己的喜好進行設置,一般設置爲輸出源格式即可。編輯操作就要求比較嚴格,要首先設置縮放,然後再設置裁剪,縮放的寬高和裁剪的尺寸都選擇URL輸入,這樣才能適配您博客中各種尺寸的圖片縮放和裁剪需求。設置好之後,將會得到一個模板配置參數:

~tplv-g7ckde5uoo-image:resize_width:resize_height:crop_width:crop_height.image
resize_width:resize_height:crop_width:crop_height

這一段一定要有,並且順序要和這裏保持一致。

登陸您的WordPress博客,首先安裝啓用“WPJAM Basic”,然後掃描關注WordPress果醬公衆號,獲取驗證碼。驗證之後,WordPress後台點擊菜單「WPJAM」➠「CDN加速」:
雲存儲:選擇火山引擎VeImageX。
CDN域名:輸入您在火山引擎設置的CDN域名。
如果要使用火山引擎的圖片處理功能,勾選之後,在圖片設置中,輸入上面生成的「模板配置參數」。
至此,您的WordPress網站開始使用火山引擎VeImageX圖片服務,並且使用火山引擎VeImageX會自動對靜態資源進行加速。

WordPress免插件使用火山引擎VeImageX圖片服務CDN加速代碼:

/**
 * WordPress VeImageX CDN代碼版 By 格林尼治源碼
**/
function veImageXCDN(){
    function Rewrite_URI($html){
        $domain = 'wvw.uttx\.me';   //填寫主站域名,小數點前需要加上反斜杠轉義
        $static = 'cdn.uttx.me'; //填寫二級靜態域名
        //更多靜態資源需要替換,可以將後綴加到後面的括號,使用分隔符分割
        $html = preg_replace('/\/\/'.$domain.'\/wp-([^"\']*?)\.(jpg|png|gif|bmp|jpeg|css|js|woff|ttf)/i','//'.$static.'/wp-$1.$2',$html);
        return $html;
	}
    if(!is_admin()){
        ob_start("Rewrite_URI");
    }
}
add_action('init', 'veImageXCDN');

或將下面這段代碼添加到function.php的尾部即可:

// 添加火山引擎圖片處理代碼
add_filter('the_content', 'imagex_setting_content_ci');
function imagex_setting_content_ci($content)
{



preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $images);
if (!empty($images) && isset($images[1])) {
foreach ($images[1] as $item) {

$content = str_replace($item, $item . '~tplv-vk860eov9l-image.webp', $content);

}
}

return $content;
}

add_filter('post_thumbnail_html', 'imagex_setting_post_thumbnail_ci', 10, 3);
function imagex_setting_post_thumbnail_ci( $html, $post_id, $post_image_id )
{

if (has_post_thumbnail()) {
preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $html, $images);
if (!empty($images) && isset($images[1])) {
foreach ($images[1] as $item) {

$html = str_replace($item, $item . '~tplv-vk860eov9l-image.webp', $html);

}
}
}
return $html;
}

火山引擎VeImageX圖片服務靜態資源CDN加速WordPress效果如何?格林尼治源碼己開啓火山引擎VeImageX圖片服務。

未經允許不得轉載:格林尼治源碼 » WordPress火山引擎VeImageX圖片服務靜態資源CDN加速

赞 (0) 打賞

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞