關閉WordPress圖片自動縮圖 – 提升整體網站速度及載入網頁速度

關閉WordPress圖片自動縮圖

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – 關閉 WordPress圖片 自動縮圖 – 提升 網站速度載入 網頁速度 。 在 SEO 優化網站搜尋引擎排名要素中,網站速度是許多站長們鑽研的一大課題,因為其不僅是搜尋引擎給予網站排名評比的指標,影響更深的是使用者在瀏覽網站時的體驗,如果說網站載入的速度過慢,就會造成訪客很高的網頁跳出率,再豐富的網站內容,無法快速的在短時間內顯示在使用者面前,那也是等於沒有內容一樣。
因此鵠學院在這篇教學中將教導大家最基礎的網站優化方法,就是停用 WordPress 圖片自動縮圖的功能, WordPress 媒體設定中,當上傳一張圖片時,會自動為這張圖片產生縮圖、小、中、大四種尺寸的圖檔,其內容一樣只是尺寸不同,在網站架設初期對網站速度的影響可能感受不太到,但隨著網站圖片不斷增加,在資料庫( datebase ) 中的圖片會越來會多(上傳一張圖片會產生多張圖片),主機需要解析的資料量越來越龐大時就會開始佔據更多空間,進而拖慢網站速度。只要按照本篇文章的教學步驟,就可以輕鬆的解決這個問題,接下來跟著鵠學苑的腳步,讓我們開始學習吧!
(小提醒:鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範!)

WordPress.org PHP 學習資訊
https://codex.wordpress.org/Know_Your_Sources#Learning_PHP
WordPress.org 支援與論壇
https://tw.wordpress.org/support/

加入PHP語法關閉WordPress圖片自動縮圖

第一步:進入到 WordPress 後台的媒體庫中,筆者在這裡先示範上傳圖片後自動縮圖會有怎樣的結果。wp image 1

第二步:在這裡筆者上傳的是檔案名稱為鵠崙設計 Logo 的圖片

wp image 2

第三步:開啟 FTP 檔案傳輸軟體,進入到 WordPress 安裝的目錄資料夾中,路徑是 / htdocs / wp-content / uploads / 年份 /月份 ,如果說不清楚如何連接到虛擬主機,請向當初購買主機的經銷商聯絡,圖片根目錄的路徑如果沒有另外指定圖片所在的資料夾,基本上會與圖片上方紅色框標示的內容一樣。在圖片下方可以看到在 05 的資料夾中有很多以長寬比數值結尾的圖片檔案,就是由 WordPress 自動產生的。

wp image 3

第四步:首先介紹加入 php 語法停用 WordPress 圖片自動縮圖的方式,點選外觀進入到主題編輯器

wp image 4

第五步:在右上角選擇當前使用的佈景主題名稱,如果有安裝子主題要確定當前套用的是哪一個主題格式,接下來點選佈景函式庫 funtion.php

wp image 5

第六步:如下圖所示在程式語言編輯框中使用捲軸滑到最下方空白處,加入以下語法,並不要忘記點選更新檔案。有關 PHP 程式語言的簡易介紹,可以參考這篇文章:WordPress PHP 教學 網頁修改及網站設定

/*停用自動新增分割圖片功能*/
function chnage_filter_image_sizes($sizes){
    $sizes = array();
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'chnage_filter_image_sizes');

wp image 6

第七步:重新上傳另一張圖片,檔名為 鵠崙設計-favicon.png 。

wp image 7

wp image 8

第八步:回到 FTP 根目錄可以看到剛剛上傳的圖檔只有自己本身的檔案,也就是自動新增不同大小圖檔的功能已經被關閉了。

wp image 9

設定WordPress媒體選項禁止自動縮圖

第一步:除了加入語法的方式,也可以在 WordPress 設定,如下圖所示點選 Setting 進入到媒體的選項中。

wp image 10

第二步:可以看到這裡有預設自動新增圖片的大小,而解決方式就是將所有數據都設定為零,接著儲存變更即可。

wp image 11

wp image 12

結語:

在本篇教學中提供了兩種方式可以停用 WordPress 自動裁切圖片的功能,如果說對於 PHP 語法沒有基礎概念,或者是怕在加入 PHP 語法會導致網站會有相容性的衝突而導致網站問題,那麼建議就使用 WordPress 內建的媒體檔案設定方式去停用自動縮圖功能即可,畢竟每一個網站安裝的主題及外掛都不盡相同,沒有任何人能保證在新增 PHP 語法 後不會產生任何問題,因此請採取對網站而言最妥當保險的做法。今天的教學到這裡告一段落了,不要忘記持續關注鵠學苑的最新文章,想學習超詳細的WordPress攻略嗎??來 鵠學院 就對了!我們下次的教學見~

架站相關文章:

網站架設知識推薦閱讀:

網站架設打造高流量的形象網站細節及關鍵因素!
無障礙網站介紹-規範說明、檢測工具與操作影片
Google 演算法更新,使用者搜尋後將出現多樣性的網站內容

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端