Cyrians ~Make something different ~

[EXCEL]一口氣調整內部的中文與英文字型

Wed, 06 May 2026 12:27:14 GMT

首先這篇文參考了

Excel字型設定~別再一格一格修改了！ - lazyorangelifeExcel檔案想要統一字型，還再一格一格修改嗎？教你以下方式，一次幫你設定完成！！！lazyorangelife.com · 前往原始文章lazyorangelife.com

這篇文章的內容

由於想要記錄下來，又不想長久放在書籤裡，就還請原作者見諒引用了

就如同原作者所說，其實在撰寫一些學術文章時，就通常會要求：中文字形使用標楷體，而英文字型使用Times New Roman這個字體（剛好我太太最近在弄她的論文就遇到這狀況）

一旦文章有中英夾雜時，總不能說還要一個一個檢查（太浪費時間）

所以這裡有幾個做法供大家參考

1. 使用EXCEL的設定功能

Office 365 Excel的檔案→選項→一般選項裡，找到建立新活頁簿時的「以此做為預設字型」選擇字體

但說真的這個做法就僅能設定整個活頁簿採用單一字型，說實在並沒有完全解決問題（因為英文字型還是一樣是使用中文字型）

2. 先把全部內容改成中文字型後，再改成英文字型

這方法相對簡單，就是先使用Ctrl+A（全選）所有範圍後把資料內的字型先選擇中文的字型

使用Ctrl+A（全選）後選擇所有資料後選擇中文字型

然後同樣使用Ctrl+A（全選）所有範圍後把資料內的字型選擇英文的字型

使用Ctrl+A（全選）後選擇所有資料後選擇英文字型

我們隨意點個中文字體的儲存格

雖然儲存格上顯示是英文字體

但如果圈選範圍來看的話其實是你設定的中文字體

這裡有一點很重要，就是順序的問題，一定要先選擇選擇中文字型後再選擇英文字型，不然字型會出錯

3. 透過頁面配置來設定

在Office 365版本中，「頁面配置」→「字型」→「自訂字型」

將你需要修改的部分做如同圖的修正

以上為[EXCEL]一口氣調整內部的中文與英文字型的方式，希望對你有所幫助

參考資料

[WordPress]如何提升網頁顯示速度

Wed, 21 May 2025 15:15:20 GMT

說真的，我掙扎了一段時間要怎麼寫這篇文章
因為一旦要寫出這篇文章的話，勢必也要達成文章所描述的效果

但通常事與願違的是，有時候即使按照以下的一些內容去執行，也不見得能夠達成希望的效果
我現在比較可以確切的說是「同樣的主機，不同的佈景主題也會有極大的差異性」
為什麼會這樣說，我會在後面說明

那麼回到主題，影響網站顯示速度其實算是多方面的，除了下面文章提到的面向外，甚至使用者端的網路環境以及硬體設備等級都有差（講白話點，你如果使用256kbps的網路和使用第一代iPhone來瀏覽上網的話，那根本不用說一定慢到爆）

以下提到是我覺得比較重要的部分（或許還有其他的方式我沒提到，也請前輩不吝指教）

1. 佈景主題（以及編輯器）的選擇 --- 付費

Blocksy在行動裝置上的分數

Blocksy在電腦上的分數

Bricks Builder在行動裝置上的分數

Bricks Builder在電腦上的分數

在同一主機，不同的佈景主題（Blocksy和Bricks Builder）的分數

其實這裡我有點糾結，這個重要度和下一個主機的影響其實不相上下，但如果在相同的網路環境下，佈景主題（或是編輯器）這個影響的部分會是非常的大，抱歉我手頭上並沒有可以提供跑分的圖片（上面的圖也僅是不同網站，但為同一個主機上）

但我實際上是有接觸到同樣網站內容的設計，只是在不同的狀況下，PageSpeed Insight跑分就差異極大（但我沒辦法貼出該網站的詳細狀況）

使用Avada佈景主題+Elementor
使用Elementor原生的「Hello Elementor」佈景主題

在這種組合下，組合1的Avada+Elementor可說在PageSpeed Insight慘不忍睹，行動裝置不到40分，電腦不到50分…

但組合2用「Hello Elementor」搭配Elementor的狀況下，基本上行動裝置和電腦的PageSpeed Insight可以說是有顯著提升；行動裝置可以到將近60分，而電腦端的跑分接近80分（未嘗試優化的狀況下）

其實我覺得感受最深的就是我在同一台主機（VPS）所架設的不同網站（都我自己的網站）

https://cyrians.com

https://walkwei.com

就如同之前的圖中，可以很明顯看到使用Bricks Builder的網站跑分非常之高（即使是行動裝置亦同），而且就我來看，第二個網站的佈局複雜性可能還比本站還要來的多些（當然本站載入中文字形造成延遲也應該是造成顯示慢的問題之一）

而Avada佈景主題的惡名昭彰（速度慢），我算是之前才正式見識到

Avada我覺得屬於大雜膾，把常見的網頁顯示方式都全部打包進去；但就網路上描述，Avada的網頁撰寫（指HTML的部分）不夠專業太過肥大，造成顯示緩慢

或許在前期真的沒有經驗想法，但如果大略抓到自己網站門面的感覺時，我會建議…快逃啊（使用像是單一Elementor或是Bricks Builder等編輯器）

至於建議的佈景主題（編輯器）有

佈景主題（編輯器）名稱	免費/付費	備註
GeneratePress	免費/付費版	已無LTD版本，為訂閱制，免費版本沒有網站樣版可參考
Blocksy	免費/付費版
Astra	免費/付費版
Bricks Builder	僅付費版	適合進階網頁設計者使用

GeneratePress：WPJohnny推薦的佈景主題，屬於高效能的佈景主題；曾有過終身版，但現在為訂閱制（每年支付），且免費版無網站樣版可參考

Blocksy：本站現在（2025/05/20）正在使用的佈景主題，也同樣為較輕巧的主題，有免費/付費版本，也具有相當的人氣

Astra：本站之前使用的佈景主題，也屬於高效能佈景主題，但最終切換到Blocksy（個人後來偏好Blocksy多些）

Bricks Builder：這個不算是佈景主題（僅是頁面編輯器），比較適合有設計且有良好HTML相關概念的設計師來進行；雖說跟Elementor相較下，Elementor的人氣還是略勝一籌，但是後來居上新秀的它，也在過去的Monster Award的頁面編輯器項目中霸佔前1、2名（2022年後）

2. 主機的影響

主機的影響其實也是相當的大，相信之前有些人應該有經歷過藍色主機之亂…

當然主機的影響包含到

地點 --- 付費（因為不管怎樣主機就是一筆固定付費）

如果你的客群在台灣，那勢必主機選擇要在距離台灣比較近的地方，反應才會比較快；例如服務器在新加坡、日本、韓國或者是香港等位置

性能 --- 付費（同樣取決於你想要的等級，也是有等級差距費用）

當主機效能較高時，能更快處理請求、產生網頁內容，並將資料迅速傳送給用戶端，這會直接縮短伺服器回應時間（影響如TTFB），如果主機性能不佳，如主機資源不足或負載過高，會導致伺服器處理請求變慢，TTFB 增加，網站顯示速度也會變慢

VPS線路測試一覽.xlsx（470MB，有相當多的測試截圖，建議下載確認）

VPS供應商	Hetzner	Cloudlite	Vultr	KAMATERA
CPU效能（排名）	3668 (1)	1583 (5)	3148 (2)	2743 (3)
記憶體性能（排名）	43703.35 (2)	43824.17 (1)	29760.70 (5)	38709.21 (3)
IOPS（排名）次/秒	31000 (2)	402 (7)	45600 (1)	18300 (5)
SpeedTest（排名）Mbps	6323.88 (1)	302.06 (5)	1315.03 (3)	3416.92 (2)
光纖 LCP（排名）secs	2.147 (3)	1.845 (1)	2.239 (6)	2.197 (4)
光纖 SI（排名）secs	2.749 (3)	2.725 (2)	2.917 (6)	2.724 (2)
LTE LCP（排名）secs	2.462 (4)	2.445 (2)	2.443 (1)	2.516 (5)
LTE SI（排名）secs	2.869 (2)	2.866 (1)	2.907 (4)	2.969 (5)

VPS供應商	Hostwinds	Ultahost	Contabo
CPU效能（單核排名）	834 (7)	3002 (4)	1522 (6)
記憶體性能（排名）	13393.88 (7)	31969.03 (4)	34843.59 (6)
IOPS（排名）次/秒	24000 (3)	21200 (4)	5800 (6)
SpeedTest（排名）Mbps	915.49 (4)	162.97 (7)	200.03 (6)
光纖 LCP（排名）secs	1.974 (2)	2.235 (5)	2.261 (7)
光纖 SI（排名）secs	2.671 (1)	2.877 (5)	2.938 (7)
LTE LCP（排名）secs	2.471 (3)	2.584 (7)	2.527 (6)
LTE SI（排名）secs	2.923 (3)	2.997 (7)	2.969 (5)

就以我綜合評估下來（從配備等級、速度、價格），最終選了Hetnzer這間廠商

我自己選擇的方案是CPX 11方案（€4.5/月，約155 NTD），含2VC（2個虛擬CPU）、2G Ram和40G空間、1TB的網路流量

3. 減少網頁讀取內容的大小

一個網頁的內容包含的不外乎：HTML、CSS、JS、圖片、字型，當然還有一些有牽扯到後端資料部份就不算這次主要討論內容就先跳過

而其中一個網頁裡先撇除字型的部分後，體積最大的就是圖片（畢竟一個網頁裡沒有圖片就很無趣）

圖片的體積優化

JPG、PNG的優化 --- 免費

圖片的體積優化部份，可以參考以前的文章

[WordPress][Windows]關於本站的圖片優化部份在之前的文章提到有關於備份時發現容量不正常的大小，於是乎就開始整理以前的文章和圖片就如同之前的文章提到因為WordPress內建功能搞出了一堆不必要的Thumbnails（縮圖）Cyrians · 站內文章

大略提之前的文章針對原本要上傳的圖片先做處理，可以把尺寸（解析度）、JPG或是PNG格式做優化，甚至轉換成webp或是avif格式圖片

如果屬於照片類型網站（攝影師、婚攝之類），對於影像非常要求的，也務必做優化讓體積降下來（畢竟體積越大讀取時間會越重）

SVG的優化 --- 免費

有時候網站會採用SVG的圖片，最主要還是因為相較於同樣解析度的圖片（特別是JPG、PNG的檔案），SVG屬於向量圖不管放大或縮小都是同樣體積，唯獨就是僅適合比較簡單線條（如沒有太多的圖片漸層）

然後如果SVG檔案比較偏大的話（不是那種PNG隨便轉SVG的服務，是要真正的放大也不會失真的才是真的SVG），例如超過50 KB時，可以再透過

https://optimize.svgomg.net

這個服務，基本上還可以減少體積（就我使用的感覺，如果是正常的SVG透過這個服務，基本上都可以再減少30％左右的體積）

字型的傳遞優化方式（包含自管字體搭配CDN） --- 免費/付費

如果是採用中文字體且非Google字體的話，這個部份同樣要請參考以前的文章

[WordPress]網站裡中文字體的處理 - 進階篇在以往的文章裡雖然已經提過對於中文字的處理，但僅限於把必要字拆出然後顯示，而這一篇的目的，則是可以讓網頁完整顯示該字體Cyrians · 站內文章

但必須要講的是，只要牽扯到自訂的中文字體想要套用在自己網站上，一定多少得犧牲顯示效能（而且瓶頸還會卡在用戶端顯示夠不夠力快速渲染整個網頁）

之所以會有免費/付費的部分是因為CDN這部份，會有免費（Cloudflare）和付費（例如BunnyCDN）的差別；免費的CDN是Cloudflare要綁A位置後還要是橘雲狀態，但有些特殊狀況會不得已無法使用狀況下，這時候就可以考慮付費的CDN

減少不必要的外掛數量/盡量使用輕量化的外掛 --- 免費/付費

這部份我很難說哪些是不必要的外掛，但如果說我個人推薦的話，那就是**Admin and Site Enhancements (ASE)**這個外掛吧

一個外掛打數個外掛

功能類型	免費版 ASE	付費版 ASE Pro
模組數量	55 個免費模組（部分含 Pro 功能）	12 個專屬 Pro 模組，並強化部分免費模組
儀表板小工具	基本管理	可自訂儀表板小工具，顯示站點統計、資訊等
管理選單編輯	可調整排序、隱藏選單	進階權限控制、子選單排序、依用戶角色顯示
自訂程式碼管理	可插入自訂 CSS/JS	進階程式碼片段管理（CSS、JS、HTML、PHP）
內容複製/媒體替換	支援	支援
圖片管理	控制上傳尺寸、格式	支援 WebP 轉換、圖片 URL 複製等
管理欄/通知清理	清理部分預設項目	可移除第三方外掛項目、進階通知控制
禁用元件	可停用 Gutenberg、評論、REST API 等	進階條件設定，可依角色或特定路徑啟用/停用
維護模式	基本維護頁面	可自訂標題、背景、CSS、使用現有頁面、排除特定網址
密碼保護	全站密碼保護	支援 IP 白名單、URL 參數繞過、進階設計整合
404重定向	全站404導向首頁	可自訂導向網址
系統摘要	顯示基本伺服器資訊	額外顯示資料夾大小、詳細用量
SEO工具	基本 robots.txt 管理	內建 SEO 優化、搜尋引擎可見性進階控制
內容管理	—	自訂內容類型、分類法、Meta Box
安全功能	—	兩步驗證、登入限制、IP封鎖等
媒體分類	—	媒體分類管理
進階列表管理	—	管理文章/頁面/自訂內容的欄位顯示

關於外掛的輕巧與否，可參考Compare Plugins(WP Hive)來確認外掛的資源消耗狀況

啟用GZip、Brotli或是Zstd壓縮功能

Brotli 和 Gzip 主要針對 HTML、CSS、JS、JSON、SVG 等文字型檔案壓縮，一般來講，如果說使用Cloudflare的話，預設狀況下就已經啟用這些壓縮協定

Zstd壓縮雖然去年Cloudflare有提出，但我依據去「壓縮規則」設定，似乎也還不能設定（或許我該去開個Ticket回報）

Zstd壓縮和Brotli壓縮比較下來，壓縮稍微差一點，但壓縮、解壓縮時間也比Brotli快，這也代表到用戶端可以快點顯示

目前Cloudflare啟用壓縮時對應的格式有

text/html
text/richtext
text/plain
text/css
text/x-script
text/x-component
text/x-java-source
text/x-markdown
application/javascript
application/x-javascript
text/javascript
text/js
image/x-icon
image/vnd.microsoft.icon
application/x-perl
application/x-httpd-cgi
text/xml
application/xml
application/rss+xml
application/vnd.api+json
application/x-protobuf
application/json
multipart/bag
multipart/mixed
application/xhtml+xml
font/ttf
font/otf
font/x-woff
image/svg+xml
application/vnd.ms-fontobject
application/ttf
application/x-ttf
application/otf
application/x-otf
application/truetype
application/opentype
application/x-opentype
application/font-woff
application/eot
application/font
application/font-sfnt
application/wasm
application/javascript-binast
application/manifest+json
application/ld+json
application/graphql+json
application/geo+json

可以在

https://toolsaday.com/seo/check-gzip-compression

這裡測試網站是否支援Brotli/Gzip

4. 活用快取減輕源伺服器端的負擔

使用CDN --- 免費/付費

使用CDN，可以減輕對源伺服器的負擔，而且CDN是把源伺服器上的資料在世界各地都有個相同內容，然後在靠近使用者附近的伺服器推送資料給使用者

一般來講，免費的就如Cloudflare，而付費的我個人推薦BunnyCDN（最低1美金/月，亞太地區流量大約33 GB用量）

使用伺服器端等級快取

使用伺服器等級快取如ESI（Edge Side Includes，邊緣側包含）、Varnish（NginX專用），這個是僅次於CDN的快取等級。但是LiteSpeed Server才有支援ESI功能，OpenLiteSpeed Server（OLS，免費版的LiteSpeed Server）並沒有這功能

使用快取外掛

使用快取外掛的主要目的是將網站頁面或資料預先生成並儲存（通常是靜態 HTML 檔案），當訪問者再次請求同一頁面時，直接提供這些已生成的快取內容，而不必每次都從資料庫重新查詢、組合資料、執行 PHP 程式碼。這樣能大幅減少伺服器負擔、降低資料庫查詢次數，提升網站回應速度與效能

物件快取（Object Cache）的外掛安裝必要性？

主要針對的是動態快取，也就是例如購物網站的話，這會有幫助，除此之外就還好

快取外掛的推薦 --- 免費/付費

個人推薦的話，基本上就以下幾個

WP Rocket - 目前最有名的快取，詳細就不多做介紹，為訂閱制

FlyingPress - 同樣也和WP Rocket不相上下（甚至以上的表現），價格比WP Rocket更有競爭力，為訂閱制

SwiftPerformance - 相較前面兩個，就比較沒有太大出名，但是有無限網站且有LTD，個人覺得其實也有不少可以調整的地方，有訂閱制也有買斷制

LiteSpeed Cache - 前面三個都是付費外掛，但這個是免費的，而且可以結合Quic.Cloud他們自己的CDN，但能夠發揮最大效能的，還是必須是LiteSpeed Server（OLS就可惜欠缺了ESI功能）才能發揮最大效率

所以就以快取效率來講：瀏覽器快取（這個其實才是最快的，但這對本篇並沒有太大幫助就是）>CDN>伺服器端快取>快取外掛

5. 移除不必要的CSS，將JS Defer（如Google相關第三方等的解析服務）延後執行 --- 免費/付費

其實這部份算是很困難的部分，雖然基本上靠上面的外掛號稱也可以達成，但比較詳細的設定可以靠以下幾個外掛達成

Perfmatters - 大概是目前市面上最有名的

Asset CleanUp: Page Speed Booster - 有免費版本，亦有訂閱制的付費版本

WP-Shifty - 個人目前在使用的，有終身版本

這類外掛最主要就是測試將在該頁面使用不到的CSS和JS一一排除後並試錯後降低主機執行負荷

6. 更新PHP到最新版本

這是比較容易被忽略的部分，但事實上也是有幫助的

php在每次升級後，會發現每秒可接受的請求數增加（效能也增加的意思），圖片來自Kinsta

7. 使用Preload和Preconnect/Prefetch來加快讀取的圖片

Preload主要針對該頁面的讀取優先度，而Preconnect/Prefetch則是對於其他頁面（指目前頁面的其他頁面連結）的讀取優先度

這裡比較常會忽略的部分就是首頁的Hero Banner（就是最大區塊的圖片）

FB社團WP Speed Matters有人提到不要使用CSS當背景圖

不要使用CSS來做背景圖

講簡單點就是Section的部分你跳到Style的地方然後加入背景圖（這應該不少人都這樣做），這樣就是透過CSS來載入背景圖

這樣的缺點就是無法特定圖片來做讀取的優先度，而且是先執行CSS後才執行圖片的部分，所以就會有些Delay

※CSS的功用是做控制網頁的視覺表現與布局，並不像是做為Img這樣的單一功用

所以像是以下影片用Elementor來解決這問題，但Bricks Builder也類似同樣概念（使用Absolute和Z-index搭配）

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

8. 其他細項

CSS硬體加速語法 --- 免費

以下的語法是讓一些過渡動畫平滑處理（而不是瞬間展示），比較屬於顯示效果優化

/* 讓屬性變化時有平滑過渡，提升視覺體驗(GPU加速) */
.smooth-transition {
  will-change: transform, opacity;
  transform: translateZ(0);
  opacity: 1;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.smooth-transition:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

移除不必要的Autoload資料欄位（移除前務必備份！） --- 免費/付費

WordPress 會將網站設定、外掛與主題設定等資料儲存在 wp_options 資料表中，我們可以透過phpMyAdmin進入

在wp_options 資料表中，可看到相關設定在這裡面，尤其特別注意autoload是on的項目

該表的 autoload 欄位用來決定某個選項是否會在每次頁面請求時自動載入到伺服器端執行 PHP 的記憶體中

當 autoload 設為 yes 時，這些選項會被一次性載入到記憶體，無論該次請求是否實際需要這些資料。這樣設計的目的是讓常用設定能夠被快速存取，減少資料庫查詢次數；但若自動載入的資料過多，則會增加伺服器記憶體消耗，進而影響網站效能

除了透過phpMyAdmin外，也可以透過外掛的Advanced DB Cleaner（需付費）達成

可透過Advanced DB Cleaner來移除已不需要的項目

不管哪個方式，都務必要先備份再處理

尤其是有些東西不小心刪除後會造成整個WordPress系統崩潰，所以務必先備份後再處理

9. 究極處理方式 - Headless WordPress --- 免費/付費

傳統的 WordPress 架構是前端與後端緊密結合，並且核心依賴 PHP。由於 PHP 在大多數情況下是單線程運作，每個請求都需要一個 PHP worker 處理，這限制了伺服器同時處理多個請求的能力，可能導致網站回應速度較慢

而採用 Headless WordPress 後，前端與後端分離，WordPress 僅負責內容管理與 API 提供，前端則可用現代 JavaScript 框架（如 React、Vue.js、Angular 等）打造。這些框架能利用非同步資料載入、元件化設計與 Web Workers 等技術，讓前端渲染更快、更流暢，並減少伺服器負擔，進而提升整體網站效能

採用 Headless WordPress 後，內容編輯者雖然仍可在 WordPress 後台進行內容管理，但前端顯示介面需完全由開發者以現代框架自行打造，無法像傳統 WordPress 那樣直接透過主題或可視化編輯器即時預覽。若要實現所見即所得或即時預覽功能，則需額外開發前端專屬的編輯介面，開發難度與成本相對提高。可以說，除了原本的內容資料可以沿用外，前端外觀介面幾乎等同於從零開始設計與開發算是最大的問題

但採用了這種方式的話，速度和安全方面可以算是有保證性的提升就是；如果說你有相當毅力，不妨可以自己嘗試，但如果真的想要追求效能，不妨去付錢來打造這種高效能的網站（但不便宜就是…）

以上為**[WordPress]如何提升網頁顯示速度**，希望能夠對你有所幫助

參考資料

11 Ways to Speed Up WordPress Website in 2024

字體優化（英文字型部份，但中文的部分有一部份可流用參考）

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

使用 Headless WordPress 釋放您網站的潛力

幾個提升網站速度的小技巧

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

PHP版本更新到8以上
安裝優化以及快取外掛（是否要優化CSS和JS要依據狀況調整，有時候不調整反而比較好，但最基本的Minify處理，基本上會影響的可能性較小，但還是會有影響的時候；最終都是要花時間一一確認版面以及效果是否正常）
圖片的優化（減少體積）

[WordPress]透過Bricks Builder處理搭配自訂文章類型（CPT）的動態資料

Tue, 26 Nov 2024 10:31:19 GMT

最近在嘗試把公司的網站內容複製下來，接下來轉移到其他地方

主要原因有2點

公司網頁管理沒有主導權：如果想要自己更動一些圖片版型，這就會被收費用；以前因為還不太懂的關係，所以就放任網頁公司這樣
發現公司網頁應該並非WordPress架構，而是由Bootstrap所建構起來

綜合以上2點，我動了用WordPress來複製公司網站版型的念頭，目前個人首選是這幾年竄紅的Bricks Builder來處理

那麼來分析一下網站架構吧

基本上一個公司網站會有幾個項目

最新消息：裡面可能會包含一般消息、獲獎消息以及參展消息等
關於公司：例如母公司、分公司訊息（分開）
產品：可能有多類型的產品
小知識：不限於單一項目的內容
不同語系：在不同語系下可能會有不同的管理方式（顯示或不顯示）

雖然還有個聯絡我們（表單），但基本上這頂多只有不同語系的差異

那麼看出來這裡麻煩的地方在哪裡了嗎？就是有相當多的分類差異，如果用WordPress內建的文章分類功能，那包準累死你

這時候，我們可以透過Custom Post Type（中文翻做為自訂文章類型，日文稱為カスタム投稿タイプ）來做簡單的分類

而Custom Post Type（自訂文章類型），後續將以CPT來稱呼

至於CPT的設定，可以參考之前的文章

[WordPress]使用Custom Post Type UI（外掛）建立自訂文章類型一般來講，如果僅是文章的產出（可能頂多包含稍微不同類型文章），基本上使用WordPress內建的分類系統就足夠使用例如我們發佈文章，網址列一般來講都會依照以下的順序排列這是一般我們設定的路徑基本上如果有其他頁面的話，網址排列應該也會是 yourdomain.com/頁面名稱（首頁的話不會顯示頁面名稱）如果希望文Cyrians · 站內文章

那麼以下為幾個部份做解說

初始設定

在進行操作前，我們先把之前製作的CPT先關連到Brick Builder內

到Bricks Builder的設定，並把製作的CPT開關都打開後儲存

關於Bricks Builder的概念

我先聲明，我並沒有認真使用全部的編輯器（因為我幾乎是套版為主），但我想概念應該都會是類似的

就好比Bricks Builder和Elementor這兩個頁面編輯器是很接近的使用方式，唯獨在性能的部分大概會是Bricks Builder大勝（因為採用Vue.js的前端框架）

那麼為什麼會有動態資料（Dynamic）的產生呢？

講白了就是為了節省時間處理類似的格式

例如這樣格式類似的多數資料

我們可以用

這樣一個格式就可以產生

這樣的一個格式來產生，只要條件設定好的話，那麼就可以輕鬆顯示出一開始我們的圖

地盤觀念

在Bricks Builder的觀念中，會有Section、Container的概念；簡單來講，Section算是最上層的概念，就當作國家吧，而Container則像是縣市，裡面可以甚至進一步包含Block甚至div（像是鄉鎮的感覺）

那麼如果在上層的套用特定規則下，基本下面的都會按照上層套用的規則（除非在該層有特別指定要用什麼規則）

講比較現實的舉例就是：例如在美國的話一些行為在某些州會判有期徒刑，但有些州可能會判死刑；這樣類似的概念之意

實際操作

首先我們需要準備文章

這個是範例用的文章

以上文章僅是ChatGPT產出的文章，只是要拿來做為範例解說用的

這個是使用Bricks Builder的範例（套用FancyBox）

接著我們刪除不必要的格式，讓其剩下一個即可

使其剩下需要重複的項目

我們會需要輸入動態資料的項目

項目標題的操作

說真的這裡可以考慮直接輸入，但也可以動態資料輸出，輸出方式參考下面

這個欄位得知由「Heading One」的Block所負責

我們在這裡需先定義，這裡要顯示的是由哪裡來的，這時候按下Query loop的開關

Post Type選擇「最新頁面」，「Posts per page」填入1，Terms(Include)選擇一般消息（消息分類）

這樣的說明是：

我選擇了最新頁面的文章類型（Post Type）
如果不是填入1的話，有多少篇文章就會重複出現多少個標題
限定顯示一般消息

在下層的Heading標題，也要將原本內容刪除，按下閃電的符號後選擇資料來源的類型

這樣就會顯示「一般消息」的標題（雖然感覺是很沒必要的操作，但這是個觀念就不妨記下）

卡片內容的重複操作（例如我想顯示最新消息頁面的「一般消息」）

同樣找出需要重複顯示的Block，並處理相關選項

我想要這裡顯示「最新消息」頁面裡面的「一般消息」項目；在稍早有提到已經準備相關資料，這就是拿來用的

這裡地盤定的規則區塊是「Card」這一個Block

而Post Type選擇「最新消息頁面」，Posts per page輸入「6」的原因是頁面出現6個項目即可（輸入9就會有9個），這裡的Terms(Include)我則是選擇「一般消息（消息分類）」※

※這個都是CPT，可以參考之前的文章操作看看（雖然當時是以產品為主）

文章標題的操作

找到文章標頭的區塊並點選修改

由於在之前「Card」區塊下已經定義是使用哪一個文章類型的資料（最新資料→一般消息），所以這裡我們的標題原本的資料先清除，然後再按旁邊閃電按鈕，並且選擇「Post Title」項目，就會出現下面的資料

{post_title}

如果你希望後續點選這個地方能夠直接進去內容的話，按照下面形式即可

{post_title:link}

如此文章標題部份就搞定了

文章要約的部份

在本來文字的部分將內容刪除，然後選擇相關選項

將原本內容清除後，依據「Post」→「Post excerpt」的順序選擇，最後把Words limit填入1（個人覺得這個長度比較好，其他數字都太長了）

這樣結果如下

會顯示顯示文章的要約

精選圖片的操作

同樣點取該區圖片

點選該區圖片後並取消圖片顯示，然後選擇動態資料（Dynamic Data）的欄位

完成效果

這樣就完成了，剩下的就是一些美化處理

以上為[WordPress]透過Bricks Builder處理搭配自訂文章類型（CPT）的動態資料，希望能對你有所幫助

參考資料：

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

[WordPress][NginX]CloudPanel功能介紹

Sat, 23 Nov 2024 09:26:06 GMT

這篇是繼之前的安裝篇以及建立WordPress網站篇對於CloudPanel網站管理面板本身功能會有較多的著墨

[VPS][NginX]CloudPanel安裝篇鑑於上篇的Webinoly後，這篇講解的是使用圖形化介面的CloudPanel 說實在命令列不是不好，就只是有時候對我來說還要去找相關指令，會不如圖形介面的直觀所以在WordPress的社群中有其他前輩推薦這款圖形介面的面板，經過一輪使用下來，真的算是很容易上手且有相當功能的圖形面板安裝方式真的很簡單更新系統到最Cyrians · 站內文章

[VPS]CloudPanel建立網站篇繼上篇CloudPanel的安裝篇後 https://cyrians.com/cloudpanel-installation/ 接著是建立網站篇。當然，這裡的範例也是以WordPress為主，還請做為參考新增網站按下「+新增網站」按鈕建立網站類型我們這裡選擇「創建一個WordPress網站」填入WordPreCyrians · 站內文章

其實像是這種網站管控面板，我覺得最重要的不外乎幾點

佔用資源少
僅必要的功能（沒必要的功能不需要內建）
介面簡單明瞭
能持續更新並改善不足處
穩定不會隨時出問題

就到目前為止使用的感想（差不多兩個月）來講，只要我沒有手賤去試驗一些我想要的功能造成停機外（如去動到NginX的內核），其他幾乎沒有什麼狀況發生

以下我就以幾個方面來稍微介紹功能的部分

登入畫面

這是我們在輸入主機IP:8443會出現的登入畫面

目前受到CloudPanel管控（安裝）的網站

這裡顯示透過CloudPanel安裝並管控的網站

我們可以點擊控制台的訊息

顯示目前主機的狀況

這裡顯示目前目前主機的狀態

附帶一題，CloudPanel控制面板有使用他的主機規格條件（包含作業系統）

Operating Systems :
Debian 12 and 11 (x86 & ARM64)
Ubuntu 24.04 and 22.04 LTS (x86 & ARM64)

Cores :
Minimum 1 Core
Minimum 2 GB of Memory
Minimum 10 GB Disk Space

以近期ARM核心的伺服器也有增加的傾向（可能因為核心相對便宜且功耗較低？）

所以CloudPanel能夠支援也算是難能可貴

我們接著到右上角的管理區標籤看一下

網站備份

CloudPanel具有網站備份的功能

我這裡就挑比較重點的幾個地方講，其他可以自行摸索看看

首先CloudPanel控制面板包含網站備份功能；時常備份是很重要的習慣（以免哪天遭遇不測就GG），這裡有提供多個存儲提供者，可依據你的習慣去做網站備份

簡易防火牆

安全性的分頁，這裡算是簡易防火牆的規則（允許開放哪些端口（Port））

使用自訂網域登入面板

在這個設定分頁，我們可以定義哪一個網域可以進入這個控制面板

簡單來講，例如我這邊輸入https://cp.cyrians.com的話，我就可以進入這個控制面板，而不是每次都要從主機IP:8443進入這個控制面板；上方有IPV4公共IP，可以記錄下來待會使用

網域登入面板DNS設定（以Cloudflare為例）

我們用A位置輸入稍早說要記錄下的IPV4地址

這裡我們名稱輸入之前控制面板寫的內容，至於Proxy狀態是否需要開啟，這個依據你的狀態去做調整，如果說待會沒辦法使用的話，這裡的Proxy狀態改成僅DNS即可

如果設定上沒問題的話，這裡按下「儲存」按鈕後，就會顯示「CloudPanel自訂網域已保存」的訊息

網站管理設定

PHP相關的設定

在設定這個分頁，有包含PHP的相關設定

我們會在這裡看到常見的PHP必要設定（如版本控制或是上傳檔案容量限制），至於運行頁面速度是針對Google的PageSpeedInsight的跑分加成，我個人覺得跑分只是帳面上看起來比較爽，實際上給人的體感會比較來的重要些

使用phpMyAdmin

資料庫的分頁，我們甚至可以在這裡使用phpMyAdmin

phpMyAdmin的畫面

反向網站快取（Varnish）的啟用

這裡我不講解太深，簡單來講，就是由「主機層級」做快取，而非透過WordPress的外掛等來做快取（會稍慢且較消耗資源），對於快取理論有興趣的人，可以在最後的參考資料去看看；另外也可以去網路上找看看關於Server Page Cache，Varnish就是屬於這一類的

SSL管理

SSL/TLS分頁這裡在之前架設網站時就有提到，可以從這裡操作

更精細的安全設定

安全性分頁，這裡提供了更較精細的設定

這裡提供了更加精細的安全設定，如果你的相關設定使用的也是Cloudflare的CDN，這邊就可以開啟；如果你有使用這裡的CDN，這裡務必關閉

檔案管理功能

這裡提供了檔案管理，可以當作FTP的管理功能以防特殊狀況進不來

定時功能（取代WordPress的Wp-Cron）

這裡就是主機端的任務時間表（crontab），你可以透過按下「新增排程作業」按鈕

依據你的需求（可從「範本」選擇），然後按下「新增排程作業」按鈕就完成

這樣就設定好任務時間表（crontab），幾乎不用輸入指令（除非你想微調時間的間距）

我們可以點擊右上角的圖示，然後選擇「設定」

二階段認證登入面板功能

進入到安全性分頁後，點選「啟用二階段身分認證」按鈕

基本上CloudPanel的功能就介紹的差不多了

PageSpeed Insights的測試

WebPageTest的測試

分別PageSpeed Insights和WebPageTest的測試

為什麼特別提出這兩個跑分的比較，其實我想講的是最重要還是消費者端的體驗，即使我PageSpeed Insights分數超低，但在WebPageTest實際測試下來卻也是相當不錯的成績（更何況我網站還加載了中文字體）

結語

其實就以免費的主機控制面板來講，個人覺得真的不錯，雖然也有其他家免費控制面板還有寄送郵件的功能

但說真的，我覺得網頁伺服器歸網頁伺服器，郵件伺服器歸郵件伺服器；比較不會因為郵件伺服器的問題去干擾網頁伺服器，等到出問題的時候需要抽絲剝繭確認問題花極大的時間，那就得不償失了

所以我覺得還是各司其職比較重要

至於你說我對於CloudPanel有什麼期待的部分？我會覺得希望除了NginX之外，也能加入OpenLiteSpeed的網頁伺服器功能作選擇，畢竟真的蠻方便的（雖然OpenLiteSpeed有CyberPanel，但我覺得那個已經走的有點商業化且最近不少問題的樣子）

以上為[WordPress][NginX]CloudPanel功能介紹，希望對你有所幫助

參考資料

極限加速！Web 開發者不能不知道的 Cache 大補帖！

禁用 WordPress 的 wp-cron 計畫

[WordPress]使用Custom Post Type UI（外掛）建立自訂文章類型

Fri, 22 Nov 2024 12:27:02 GMT

一般來講，如果僅是文章的產出（可能頂多包含稍微不同類型文章），基本上使用WordPress內建的分類系統就足夠使用

例如我們發佈文章，網址列一般來講都會依照以下的順序排列

這是一般我們設定的路徑

基本上如果有其他頁面的話，網址排列應該也會是

yourdomain.com/頁面名稱（首頁的話不會顯示頁面名稱）

如果希望文章加上分類的話

yourdomain.com/頁面名稱/分類/文章名稱

永久連結會需要做些改變（選擇自訂結構）

yourdomain.com/%category%/%postname%/

一般來講其實這樣就OK了

但如果你想要自虐點，加入Custom Post Type（自訂文章類型）時，不妨參考我以下的做法

在那之前，我先Copy ChatGPT 的內容，來說明什麼時候需要Custom Post Type（自訂文章類型）

什麼時候需要Custom Post Type（自訂文章類型）？

1. 內容結構複雜，需分門別類

如果你管理的內容超出了標準的「文章」(Posts) 和「頁面」(Pages) 的範疇，需要更有條理地分類和展示時，就適合用 CPT。例如：

產品展示：如你的網站需要專門展示各類型的鞋墊產品。
案例展示：如作品集、客戶案例或成功故事。
常見問題 (FAQ)：如果需要統一格式展示問題與解答。
活動管理：像是展覽或線上活動，需要包含日期、地點等特定屬性。

2. 需要自定義字段 (Custom Fields)

當某些內容需要專門的屬性時，例如：

產品頁面：產品名稱、價格、規格、材質等。
文章型內容：如「新聞」的發布日期、分類標籤（如獎項類、展覽類）。
技術文章：可能需要附加參數或資料下載連結。

3. 需要與主題分離，維持擴展性

使用 CPT 可以避免將功能和主題寫死在一起，方便日後切換主題或擴展功能。
可與Pods、ACF (Advanced Custom Fields) 或 CPT UI 插件配合，靈活新增欄位和管理資料。

4. SEO 需求與特定內容展示需求

CPT 可幫助網站更精準地組織內容，有利於 Google 對不同內容類型的抓取和排名。
配合自定義模板或設計工具（如 Bricks Builder），可針對不同 CPT 設計特別的頁面佈局，提升用戶體驗。

5. 多語網站結構需求

你的網站包含多語功能（中文、英文、日文），需要在不同語言下統一管理結構，CPT 讓內容更具層次感：

不同語言的「產品」頁面可以共享同一 CPT 模板。
避免混亂，將「新聞」、「產品」、「製作小知識」等內容分類清楚。

6. 範例應用場景

你正在開發的網站：需要「產品」、「新聞」、「製作小知識」這些分類，每個分類的結構和屬性都不同，可以使用 CPT 為每個分類提供專屬的設計和管理方式。
靜態內容管理：例如公司歷史、認證與介紹，可能需要固定格式的 CPT。

總結

當你發現網站內容需要特定的分類結構、屬性設定或更靈活的管理方式時，Custom Post Type 是不可或缺的工具。它能確保網站內容結構化、方便擴展，且易於後續維護！

以下是比較自虐的做法，如果真的要踏進來的話就會有很多的麻煩接踵而來，包含你可能會需要自己再建立一個頁面給這內容使用（這裡得要用頁面編輯器了）

而下面最終目的其實就僅是達成文章路徑會是

yourdomain.com/頁面名稱/自訂名稱的分類/文章名/

以及多了分類的管理介面（不像之前在文章做較單純的管理）

我這裡舉例：例如在產品頁面（頁面名稱為products），我想要增加鞋墊和健康小物的分類項目

Step 01. 安裝創建Custom Post Type相關的必須外掛

安裝外掛的搜尋部份填入「Custom Post Type」

這裡我們需要安裝Custom Post Type UI和Custom Post Type Permalinks的兩個外掛

※後續關於Custom Post Type的詞，將會使用CPT做為縮寫代稱

Step 02. 創建CPT

我需要增加CPT的文章類型，這裡選擇Add/Edit Post Types

然後內容按照圖內的方式輸入

Basic settings處的資料填入

如同你所看到的欄位的部分所反映的項目

輸入的欄位顯示反映的效果

要注意一點：Post Type Slug的名稱不可以和頁面名稱同名，但是可以透過後面的選項「Rewrite Slug」來覆寫成為和頁面一樣名稱（就當作檯面上顯示跟頁面名稱一樣，但私底下卻是一回事就好）

Additional labels選項部份比較偏向介面的顯示，這裡僅針對「All Items」和「Add New Item」的項目做調整

調整我覺得需要部份（讓我覺得看起來比較順眼些XD）

這裡說明對應的欄位部份

Additional labels的設定

最下面的Settings設置

這裡我僅提出需要留意的部分

Rewrite: True

//這裡就是我所提到的可以改寫路徑名稱的部分
Custom Rewrite Slug: products

// 這裡我選擇False原因是不想被其他不相關的顯示干擾
With Front: False

Menu Icon我有選擇是因為看起來可以讓側邊的控制台看起來美觀點（不會只有文字而已）

最後的Taxonomies選項在這個階段不會出現，但是後面創建了Taxonomy後務必要和這裡做連接（打勾）

以及最重要的就是不要忘記按下「Save Post Type」按鈕，不然剛剛的東西可沒有存起來

Step 03. 創建Taxonomy（分類）

Taxonomy和WordPress裡面的Category有什麼不同？

基本上沒什麼不同，但是WordPress的Category就只能針對WordPress內建的文章（Post）部份使用，而Taxonomy則沒有限制

所以Taxonomy在分類的部分會比Category靈活些（但也代表相對的麻煩）

添加Taxonomy的方式：Add/Edit Taxonomies

填入相關的資訊

Taxonomy相對應的欄位說明

Taxonomy的相關資料填入

Taxonomy的Additional labels，這邊基本上我沒有去動他

這邊我僅列出需要更改的地方，整理如下

Rewrite: True

//原本這個Taxonomy的slug（名稱）
Custom Rewrite Slug: product-category

同樣記得按下「Save Taxonomy」按鈕

最後記得再到創建的CPT去連結這個Taxonomy

Step 04. 更新永久連結（Permalink）

進行到這裡，我們先對剛剛建立的CPT和Taxonomy做永久連結更新（只要有連結更新都務必要做永久連結更新，不然不會生效）

依序點選「設定」（Settings）→「永久連結」（Permalink）

拉到下方會看到稍早建立的「product」的CPT（另一個news是其他的CPT）

想要讓文章的路徑維持

yourdomain.com/頁面名稱/自訂名稱的分類/文章名/

這樣形式的話，會是以下的寫法

yourdomain.com/原本的頁面名稱（這裡已被我們規則覆寫）/%自訂的CPT slug%/%postname%/

最後記得按下「Save Changes」保存設定

我們接下來就來增加分類吧

Step 05. 增加分類

透過我們新增的CPT（產品項目頁面）→產品分類

填入項目名稱，slug的部分盡可能不要有重複，否則會無法開啟

最後記得按下「Add new 產品」按鈕（這裡其實就之前的一些介面可以做修改，我就沒特意去修正了）

一共加入兩個分類做測試

這時候滑鼠游標點到產品上面會有無數選項跑出，這裡選擇「View」並點擊進去

可以正常進入並顯示（雖然看起來有點怪，但這是正常動作沒錯）

Step 06. 添加產品

點選創建的CPT（產品項目頁面）→「新增產品」

輸入必要的內容並勾選「產品分類」（必做，因為Taxonomy沒有像是WordPress內建的Category有著uncategorized項目）

隨意填寫完畢後記得按下右上角的「發佈」（Publish）

我們可以在建立的CPT裡面的產品分類看到該分類被歸類於鞋墊項目

我們接著點選稍早發佈的產品連結

依據創建的CPT→所有產品的順序進入

顯示沒有這個網頁，但明明就看的到這個產品啊？

會發生這個原因是，Taxonomy和CPT互相在搶誰能夠使用products這個路徑名（而通常分類會比文章的權限還要高，因為分類的網址是排在屬於前面，而文章通常都是排在最後面的）

這時候我們就只能透過改寫function.php才能改善這問題了

而通常這最好是在子佈景主題下使用會比較好，不然在佈景主題更新後，這些設定就被覆蓋消失了

關於子佈景主題，每家佈景主題都不太一樣，以前這個網站也有寫類似的應用，不妨參考看看

[WordPress]Astra子佈景主題的應用在之前的文章中，有提到為什麼要安裝子佈景主題（Child theme）的說明由於這個網站採用的是「Astra」的佈景主題，所以這裡也將以修改Astra的微調設定為主 1. 禁用astra.woff astra.woff是Astra主題內建採用SVG（向量圖形）圖示顯示用的字體，如果你是用Astra的內建主題的話，Cyrians · 站內文章

我們從「外觀」（Appearance）→「佈景主題檔案編輯器」（Theme File Editor）進入

點選右邊的「Theme Functions（function.php）」

填入判別式的程式碼

以下程式碼供參考，需以你實際的狀況作調整

//產品（products）的 URL 路徑解析程式碼
// 在 WordPress 初始化時掛載自定義 Rewrite 規則，解決產品的 URL 衝突
add_action('init', function () {

    // 規則 1：確保產品分類 (Taxonomy: products-category) 的 URL 正常匹配
    // 解析 URL 格式：yourdomain.com/products/分類名稱/
    // 當匹配到這種 URL 格式時，將其轉換為正確的 query vars 以解析分類頁面
    add_rewrite_rule(
        '^products/([^/]+)/?$', // 正規表達式匹配 "products/分類名稱"
        'index.php?products-category=$matches[1]', // 重寫為分類查詢參數
        'top' // 優先級設為最高，確保優先匹配這條規則
    );

    // 規則 2：確保產品文章 (Post Type: product) 的 URL 正常匹配
    // 解析 URL 格式：yourdomain.com/products/分類名稱/文章名稱/
    // 當匹配到這種 URL 格式時，將其轉換為正確的 query vars 以解析文章頁面
    add_rewrite_rule(
        '^products/([^/]+)/([^/]+)/?$', // 正規表達式匹配 "products/分類名稱/文章名稱"
        'index.php?product=$matches[2]', // 重寫為文章查詢參數
        'top' // 優先級設為最高，確保優先匹配這條規則
    );
});

真的不知道怎麼寫的話，就丟給AI，請它幫忙協助吧；貼上後最後記得存檔，然後再到永久連結去更新一次（只要有儲存動作即可，不用調整任何東西）

Step 07. 結果確認

我們這時候回到產品頁面來確認動作正常與否吧

點選創建的CPT→「所有產品」

滑鼠游標停留產文章上面會出現「View」的選項並點選

如果看的到內容就代表路徑設定正常了！

恭喜你，完成了自虐的第一步，而且是僅完成

yourdomain.com/頁面名稱/分類/文章名稱

內建的WordPress也可以達成的功能

但我這邊還是要提到的是，如果你要有更多的層次下去的話，那就勢必要透過Taxonomy然後去做Hierarchical（繼承上個階層）的概念才能達成

CPT的應用說真的不是只有這些，這邊舉個例子

紅框內容的都可以是CPT的欄位（包含影像）

我們可以透過創建一個CPT，裡面裝載這些紅框內的資料，之後再透過一個版型，例如固定不變的部分會是「屬名」、「分類」、「行為」、「發現地」。然後在我們創建文章的時候，僅輸入內紅框的資料，之後再透過編輯器讀取這些動態資料來呈現即可

以上為[WordPress]使用Custom Post Type UI（外掛）建立自訂文章類型，希望能夠幫到你

參考資料

客製化文章版面：結合CPT UI及ACF的Elementor Pro實作教學

【カスタム投稿タイプとは】WordPressカスタム投稿の作り方

WordPress カスタム投稿タイプ【徹底解説】

【超初心者でも丸わかり】WordPressのカスタム投稿タイプを初心者のために解説！

誰でも分かる Custom Post Type UI（CPT UI）でカスタム投稿タイプの作り方

カスタム投稿タイプのパーマリンクを変更する『Custom Post Type Permalinks』

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

[VPS]CloudPanel建立網站篇

Wed, 13 Nov 2024 09:34:18 GMT

繼上篇CloudPanel的安裝篇後

接著是建立網站篇。當然，這裡的範例也是以WordPress為主，還請做為參考

新增網站

按下「+新增網站」按鈕

建立網站類型

我們這裡選擇「創建一個WordPress網站」

填入WordPress後台相關資訊

這裡填寫登入WordPress後台相關資訊

跟WordPress後台直接有關的僅為「管理者使用名」和「管理員密碼」，至於上面網站使用者還有網站用戶密碼到底是什麼還有點摸不著頭緒；且網站使用者不得與其他網站的網站使用者名稱重複到，所以不妨這裡填寫網站名稱也無妨？

WordPress網站創建完成

網站創建的部分這樣就結束了

網站創建的部分雖然這樣就結束，但是SSL這時候也要來設定，不然會造成以下的錯誤（使用自簽SSL憑證錯誤）

使用自簽SSL憑證錯誤

添加SSL憑證

到SSL/TLS分頁

按下「操作」按鈕

分別有使用Let's Encrypt Certificate憑證和自己的特別憑證（如Cloudflare的）

使用Let's Encrypt Certificate的DNS要求

這時候要在像是Cloudflare的部分填入這裡要求的網域名稱

這是個別特殊SSL要填入的訊息畫面，填寫完畢按下「匯入和安裝」按鈕

SSL憑證安裝完成

可開啟網站了

以上為[VPS]CloudPanel建立網站篇，希望對你有所幫助

參考資料

Hosting Control Panel - CloudPanel

Add Site

[VPS][NginX]CloudPanel安裝篇

Tue, 12 Nov 2024 14:28:36 GMT

鑑於上篇的Webinoly後，這篇講解的是使用圖形化介面的CloudPanel

說實在命令列不是不好，就只是有時候對我來說還要去找相關指令，會不如圖形介面的直觀
所以在WordPress的社群中有其他前輩推薦這款圖形介面的面板，經過一輪使用下來，真的算是很容易上手且有相當功能的圖形面板

安裝方式真的很簡單

更新系統到最新狀態
安裝圖形介面腳本
結束…（對，就這樣而已）

目前CloudPanel支援的作業系統僅Ubuntu 24.04 LTS、Ubuntu 22.04 LTS、Debian 12 LTS、Debian 11 LTS這四個版本，其他版本的作業系統可就沒辦法了

Step 01：更新系統到最新狀態

接下來我這裡是以Ubuntu 24.04 LTS為例，首先來更新系統

輸入系統更新指令

apt update && apt -y full-upgrade && apt -y install curl wget sudo

Step 02：安裝圖形介面腳本

接下來的腳本，我會建議到官方網站去找適合你的腳本

官方網站

選取適合自己的腳本

之所以會說去官方網站下載的原因是，系統不同、資料庫系統不同的狀況下，腳本的位置也會有些許的不同。而我這裡點選的是目前Ubuntu 最新的LTS版本，然後再搭配MariaDB的最新版本

輸入安裝圖形介面的腳本

curl -sS https://installer.cloudpanel.io/ce/v2/install.sh -o install.sh; \
echo "2aefee646f988877a31198e0d84ed30e2ef7a454857b606608a1f0b8eb6ec6b6 install.sh" | \
sha256sum -c && sudo DB_ENGINE=MARIADB_10.11 bash install.sh

總之這時候可以稍微休息一下，因為都是自動安裝的

安裝結束

安裝結束，並且看到後台的登入地址

登入後台（以下為Firefox的操作）

這時候會看到警告畫面，按下「進階」按鈕

點選「接受風險並繼續」按鈕

畫面雖然是英文的，但下面有「Language」下拉式選單可以選擇臺灣的中文

調整成中文後便輸入要登入時的一些資訊，使用者名稱就是後台登入用的用戶名稱，密碼為後台登入用的密碼

輸入要登入後台的相關資訊

後台登入畫面，輸入剛才填入的用戶名稱以及密碼

登入成功

這樣面板的部分就完成了，下篇再來介紹CloudPanel的相關設定

補充：腳本的更新

因為考慮到後續腳本還會更新（如更新CloudPanel的核心或是資料庫升級之類，像是PHP8.4也最近要釋出了，這種升級都會對網站效益有所幫助）

clp-update

以上為[VPS][NginX]CloudPanel安裝篇，希望對你有所幫助

參考資料

Getting Started

[VPS][WordPress]透過Webinoly安裝WordPress

Tue, 17 Sep 2024 11:49:15 GMT

由於最近主機的契約快到期了，目前也在思考轉移到其他地方中

因為按照現在這主機要續約的價格，那真的是我乾脆直接上VPS都有相當高的規格了，所以不得已開始物色相關主機中

由於FB的WordPress社團裡有前輩提到了Webinoly這東西，所以我就開始研究，並重新複習了一下以前的文章和指令了解（畢竟Webinoly屬於命令列操作）

其實講白了，如果操作熟的話，10分鐘內就可以把一個WordPress的網站搞定（當然不包含內容，僅到純WordPress設定而已）

這篇文章撰寫的就是我安裝的過程，廢話不多說就開始吧

網頁伺服器架設

首先我們要準備VPS，我個人的話推薦Vultr，機房多之外也有相當多的服務；但要注意一點的是，Vultr屬於無協助管理式的VPS，也就是說網站出了什麼事情，一切都要自己處理

如果說想要有人問可以幫忙解決問題的VPS廠商，那大概就還是Cloudways和Scalahosting做為首選吧（但相對價格也貴的多）

畢竟在一般的共享主機，雖然號稱什麼無限空間還有無限流量，實際上根本是另類的詐騙

主要騙人的方式為：

檔案數量被限制
IOPS被限制

但…因為大家都是貪便宜其實也無可奈何，而共享主機的話，除了A2hosting之外，chemicloud和HostArmanda可考慮看看

拉回本主題的部分，接下來是以Vultr的操作做說明

進入Vultr首頁

到「Products」頁面

按下右上角的「Deploy」按鈕後選擇「Deploy New Server」

依據你的需求去調整設備以及機房位置

我因為自己需求，所以開了一個美國洛杉磯的機房，實際上以各位的需求去做調整

把這裡的IP和帳號密碼都記錄起來吧

連線到網頁伺服器主機

我們使用「PuTTy」來連接剛剛建立好的伺服器

第一次連上時會出現警告訊息，這時候選擇「Accept」

如同之前提到的，這裡帳號填入「root」

同樣輸入Vultr提供的密碼；注意，這裡不會顯示輸入與否，僅能自己小心輸入

輸入完畢後就會進入這畫面

安裝Webinoly

系統更新

安裝Webinoly之前，我們需要先把系統更新到最新狀態（這裡採用的是Ubuntu，Debian也可通用該指令）

系統更新

sudo apt update && sudo apt -y upgrade && sudo apt -y autoremove

這樣系統就會是在最新的狀態

重新啟動

更新完畢後建議重新啟動系統，這裡輸入

reboot

更新完畢後建議重新啟動系統

如果說有些VPS不提供root的權限，那就用本帳號提升到root規格權限之後再執行一遍

取得root的權限

sudo su -

安裝Webinoly

輸入以下指令

wget -qO weby qrok.es/wy && sudo bash weby

安裝完畢

其他調整

打開 HTTP Authentication

httpauth -add

簡單來講，沒有輸入這個指令的話，後續就算你安裝了WordPress也沒辦法進去，所以就是先設置起來

輸入自訂的帳號以及密碼

在之後安裝好WordPress後，進入到網站時會出現的警告視窗

增加SFTP的帳號

透過這SFTP，可以後續進入到網站修改一些檔案（假如出問題的時候…）

新增一個 SFTP帳號的用戶，在新增站點時才不會出現錯誤

sudo webinoly -login-www-data=on

//下面是設定SFTP的密碼，但我個人比較建議使用SSH來登入就是，這樣也不需要設定密碼
sudo passwd www-data

安裝WordPress

安裝WordPress的指令

sudo site 你的網域名稱 -wp -cache=on

解除HTTP Authentication

這時候就可以把HTTP Authentication解除掉，第一次進入網站雖然還是會出現警告視窗，但是輸入完後就不會再煩你

解除HTTP Authentication

sudo httpauth 你的網域名稱 -wp-admin=off

解除成功

安裝SSL

安裝SSL有分兩種方式，1個是直接透過Let’s Encrypt SSL，1個則是自己的SSL（有可能這是Cloudflare的，也或者是企業級的SSL）

在那之前需要先設定DNS的部分

DNS設定（以Cloudflare為例）

到SSL/TLS頁面的「原始伺服器」

點選「建立憑證」

點選下方「建立」按鈕

將「原點憑證」（PEM或CRT）以及「私密金鑰」（KEY）的內容複製下來

自訂SSL的安裝

安裝自訂的SSL有相當的手續，但按照下方步驟即可搞定

1. 建立域名的SSL憑證資料夾

建立域名用的憑證資料夾

sudo mkdir -p /etc/nginx/certs/網域代稱/

2. 建立指定網域的原點憑證存放位置

建立並編輯指定網域的cert.crt

命令列輸入

nano /etc/nginx/certs/網域代稱/cert.crt

例如稍早使用Cloudflare建立的原點憑證內容貼上（按滑鼠右鍵即可）

如果不小心複製錯誤的話，可以用Ctrl+K的方式直接來做一行的刪除，貼上之後按下Ctrl+X離開

出現是否儲存，輸入Y之後按下Enter

按下Enter

回到原本命令列畫面

3. 建立指定網域的私密金鑰存放位置

建立並編輯指定網域的cert.key

這時命令列輸入

nano /etc/nginx/certs/網域代稱/cert.key

編輯cert.key

貼上私密金鑰內容後，按Ctrl+X離開

按下Y離開

按下Enter鍵

回到一般命令列

將網站套用原點憑證和私密金鑰即可

這裡我們可以把剛剛的原點憑證和私密金鑰的路徑一同做連結

sudo site 指定網域 -ssl=on -ssl-crt=/etc/nginx/certs/網域代稱/cert.crt -ssl-key=/etc/nginx/certs/網域代稱/cert.key

如此一來網站就套用了SSL了

Let’s Encrypt SSL的安裝

Let’s Encrypt SSL的安裝就相對簡單

輸入以下命令即可

sudo site 你的網域 -ssl=on

如果想要更改SSL認證的話，只要輸入

sudo site 你的網域 -ssl=off

這樣你網域的SSL就被卸除了，然後看你是要安裝自己的SSL都可以

接下來我們只要輸入你的網域/wp-admin的話就可以進入WordPress安裝流程

進入WordPress安裝畫面

Webinoly已經連同你的資料庫設定都省略了，只要輸入你的WordPress登入的帳號和密碼就可以

結語

這裡講的僅是Webinoly的基礎部份，網路尚有相關資料可以研究

像是安裝之後的系統優化也是很重要

例如在命令列輸入

bash <(curl -sL kejilion.sh)

這是屬於大陸的一鍵優化相關腳本（請自行斟酌使用）

個人會針對

13 系統工具裡面的

22. Fail2Ban→安裝
26. 修复OpenSSH高危漏洞

做調整，可以參考看看

2024年最新VPS调优教程全面优化各项性能

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

一键自动安装并开启BBRv3加速让VPS网络性能飙升！

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

以上為[VPS][WordPress]透過Webinoly安裝WordPress，希望能夠幫到你

參考資料

Webinoly 最新版快速安裝

Webinoly 安裝 VPS 教學 – 進階版

webinoly 安裝紀錄

[Cloudflare][WordPress]Cloudflare的更進階防護 - Zero Trust

Tue, 10 Sep 2024 12:27:57 GMT

在之前的文章中我透過了Cloudflare的WAF規則設置了幾個措施減少不必要的騷擾（直接被Cloudflare擋下），但對於登入頁面來講之前的規則似乎又有點嚴苛（如登入頁面或是admin-ajax.php等服務限定IP才能登入）

有興趣的人可以翻翻之前的文章，而這篇文章是進一步做了調整，針對/wp-admin以及/wp-login.php這兩個都是登入頁面作進一步的防護（防止沒必要的人登入）

[Cloudflare]使用Cloudflare的規則設定達成網站的安全防護CloudFlare對於架設網站的人來講，還真是擁有不少功能從DNS的操作、CDN、防火牆安全防護、郵件路由、發行SSL…等眾多功能這裡要介紹的是如何不安裝安全方面的Plugin 單純使用CloudFlare的一些規則就可以達成安全方面Plugin的防火牆功能Cyrians · 站內文章

鑑於之前的防護篇，我這裡寫更新版的規則部份（更進階，但其實也是靠AI互相對照就是）

這裡還是會稍微講解WAF的設置（大略提示）

前置作業（必要）

這邊還是要嘮叨一番，如果DNS設定沒有源IP達成「透過Proxy處理」狀態的話，這些功能都沒辦法用

務必確認網站的A記錄是「透過Proxy處理」狀態

WAF規則設置手續

域名的首頁點選「網路安全」

點選「WAF」後再去找「自訂規則」的分頁

點選「+建立規則」按鈕

WAF自訂規則篇

防止未知的BOT來爬網站

我這裡就不多做解釋，直接以運算式預覽結果表示

允許爬蟲的規則

以下為我個人的規則參考（可以直接複製然後用編輯運算式的方式直接貼上）

(cf.client.bot) or (http.user_agent contains "Metorik API Client") or (http.user_agent contains "Wordfence Central API") or (http.request.uri.query contains "wc-api=wc_shipstation") or (http.user_agent contains "Better Uptime Bot") or (http.user_agent contains "ShortPixel") or (http.user_agent contains "umbrella bot") or (http.user_agent contains "qcbot") or (http.user_agent contains "Swift Performance")

簡易說明：
Cloudflare所認知較常見的BOT和列出來的其他特殊BOT流量進來時，便可以通過這個規則；如果是未知的爬蟲則會被攔截下來

阻斷不當存取特定路徑或檔案

第一道線是防止未知的爬蟲進來，接著第二條線則是防止對特定資料夾或是檔案訪問的不速之客

封鎖不必要或是未經許可的訪問

同樣以下為我的寫法供參考

(http.request.uri.path contains "/.env") or (http.request.uri.path contains "wp-config.php") or (http.request.uri.path contains "/.htaccess") or (http.request.uri.path contains "/wp-content/debug.log") or (http.request.uri.path contains "^/wp-includes/.*\\.php$" and not http.referer contains "cyrians.com") or (http.request.uri.path contains "/wp-admin/install.php" and not http.cookie contains "wordpress_logged_in_") or (http.request.uri.path contains "/adminer.php") or (http.request.uri.path contains "/phpinfo.php") or (http.request.uri.path contains "/cgi-bin/.*") or (http.request.uri.path contains ".sql") or (http.request.uri.path contains ".bak") or (http.request.uri.path contains "/.git/.*") or (http.user_agent contains "sqlmap") or (http.user_agent contains "nikto") or (http.user_agent contains "w3af") or (http.user_agent contains "nessus") or (http.request.uri.path contains "/wp-settings.php") or (http.request.uri.path contains "/xmlrpc.php" and not http.cookie contains "wordpress_logged_in_")

以上為放行以及封鎖的規則

WAF限速規則篇

我們在使用WordPress的時候，還是有些服務我們會用的到，但用上面的規則似乎又會有點太嚴苛，那麼這時候就可以採用WAF的限速規則（算是減緩那些短時間大量訪問特定檔案的攻擊）

只是因為我的Cloudflare是免費版本，所以WAF限速規則僅只能一條且有相當的限制性（付費版應該可以詳細設定的部分會更多）

在WAF頁面選擇「限速規則」分頁後按下「+建立規則」按鈕

這裡只有當速率超過…的「要求（必須）」可以輸入數值，其他沒有選項可以選擇；我這裡輸入值為「30」

由於/wp-json/*（WordPress REST API）和admin-ajax.php會時不時用到，所以我這邊的規則是

(http.request.uri.path contains "/wp-json/*") or (http.request.uri.path contains "/wp-admin/admin-ajax.php")

對於1個IP速度做了10秒內持續要求30次，這會判定為異常而封鎖

正常來講，一個IP在一分內要求100次的處理已經相當的多，這已經多達一分鐘180次要求，可以認定為惡意訪問了

以上為限速規則的部份

透過Cloudflare的Zero Trust加強登入頁面的防護

關於WordPress的登入頁面，基本上為wp-login.php和wp-admin這個路徑，所以只要針對這兩個路徑設定好由Cloudflare把關動作即可，這時候我們可以靠Cloudflare的Zero Trust功能來達成

※很抱歉前面Zero Trust設定的部分似乎一次就設定完，沒辦法再走一次，這地方建議走一遍看看，接下來的文章就先以設定好Zero Trust搭配設定來保護進入登入的頁面

進入Zero Trust的介面後，選擇左側的Access選項

「Applications」選項裡，點選「Add an application」按鈕

選擇「Self-hosted」選項

「Session Duration」的部分可以選擇「1 month」，否則每次要進入後台都要重新認證

其他像是Application domain的地方，Path內容分別填入wp-login.php和wp-admin（可以用下方的+Add Domain增加），填完後基本一路往下按下「Next」按鈕

同樣「Session Duration」的部分選擇「1 month」

Include項目，Selector選擇「Emails」，Value則是填入信箱（可以多個信箱配置，以因應多名人員登入），同樣設定好就往下按下「Next」按鈕

一路往下然後按下「Add application」按鈕

回到「Access」的「Applications」畫面，有剛剛增加的應用程序

我們這時候可以對進入/wp-login.php或是/wp-admin的頁面時，做一點畫面編輯

點選左側的「Settings」後，選擇Custom Pages

點選Login page的「Customize」按鈕

可以稍許編輯畫面的樣式

進入login.php或是wp-admin路徑時的畫面

輸入設定收信的郵箱

指定的信箱收件，輸入代碼或是點選連結

進入帳號密碼的登入畫面

進入後台畫面

這樣對wp-login.php和wp-admin的登入畫面做的防護，這樣也不用想破腦袋搞一些規則作限制

以上為[Cloudflare][WordPress]Cloudflare的更進階防護 - Zero Trust的介紹，希望能對你有幫助

參考資料：

利用 Cloudflare Access - 打造个人私密站点

[Day26] Access — 30 天入門 Cloudflare

[WordPress]網站搬移外掛 - Migrate Guru介紹

Sat, 24 Aug 2024 11:01:16 GMT

你是否對於WordPress網站搬家感到煩惱呢？Migrate Guru這個外掛就可以說是你的救世主也說不定

基本上只要新舊主機都安裝Migrate Guru這個插件，把新的主機端裡面的Migration Key複製出來就好

這邊將簡單介紹使用方式來搬移你的網站

DNS設定

這裡的設定都會是以Cloudflare為主，如果不是使用Cloudflare的話，基本上的操作原理也是很近似，所以還請包涵

指定A記錄（IP記錄）到新網站的IP

原則上新網站的IP在你購買該空間的時候，就一定會有提供

注意紅框「Shared IP Address」

如果使用的主機有使用cPanel的話，就會在上面圖片的紅框處看到

所以回到Cloudflare的畫面，就是把A記錄指向新主機的IP

安裝Migrate Guru外掛

接著我們在新主機上安裝Migrate Guru外掛

依序儀表板介面的「外掛」→「安裝外掛」進入

搜尋「Migrate Guru」按下「立即安裝」按鈕

按下「啟動」按鈕

出現「Migrate Guru」選項並點選進去

資料轉移

轉移的方式很多種，這裡我僅舉出使用Migration Key搬移和VPS的FTP搬移兩種

Migration Key搬移

點擊「Migration key?」處

複製文字下來（可按「Copy」按鈕）

調整DNS，指向回原本的舊主機然後進入Migrate Guru畫面

輸入通知你的信箱，並打勾「I agree to Blogvault」的選項後按下「Migrate Site」按鈕

選擇適合的服務，我自己較習慣選擇「Other Hosts」

可以選擇「I Have Migration Key」選項

把稍早在新網站上複製的「MigrateGuru Migration Key」貼到這個欄位後按下「Migrate」按鈕即可

開始進行網站搬移

自動進行中，就算關掉這個網頁也會持續進行

結束的時候就會從稍早輸入的信箱通知已經搬移完成

最後記得再把DNS設定的主機IP再指向新的主機喔

VPS的FTP搬移

在選擇要搬移網站的服務時選擇「Other Service」

先設置好FTP相關帳號設定並記錄下來

輸入相關資訊

出現這個狀況時，先確認Directory Path是否正確，裡面有無wpconfig檔案

沒問題的話就會開始進行網站搬移

同樣為自動進行，這個網頁出現狀況下關掉也沒關係

大功告成！

確認網站搬移後狀況

搬移網站時發生錯誤？

可能在少數的狀況下搬移網站發生嚴重錯誤如下圖

這個網站發生嚴重錯誤

這個很有可能是將資料轉移到「不同域名」的網站時發生的，然後很不巧的你外掛就會因為域名不同發生衝突

可以參考以往的文章

[CyberPanel]WordPress重大錯誤的解決方式對於使用WordPress常常在做一些嘗試調整網站的朋友們，我想應該或多或少都會遇到一個狀況。這個網站發生重大問題！！只不過是動了外掛的一些調整而已，哪知網站就會變成這樣。不管是網站本身，或是想要進入網站後台看有無機會救看看，其實都出現這樣的一個畫面但就以會發生這個畫面來講，幾乎是九成以上是因為外掛造成的Cyrians · 站內文章

以上為[WordPress]網站搬移外掛 - Migrate Guru介紹，希望對你有所幫助

參考資料

Migrate Guru：WordPress 搬家外掛介紹利用 Migrate Guru 外掛進行 WordPress 網站搬遷的方式。wpointer.com · 前往原始文章wpointer.com

[Windows]電腦意外地重新啟動或發生意外的錯誤。Windows無法進行安裝

Wed, 21 Aug 2024 11:13:19 GMT

標題這個是我自己本身遇到的問題。簡單來講是在安裝Windows完，重新啟動後進展到某個程度就又重新啟動，就這樣差不多了快三次，變會出現下面這該死的畫面

無法繼續下去且不斷重新啟動

我也很納悶怎麼換新的零件後（我購買了Intel Arc A750顯示卡替換舊顯卡），怎麼會搞這種烏龍？

其實我後來蒐集網路上的解法，最後才找到適合自己的（這篇文章是自己留做記錄用的，因為其他地方可能會因為特殊狀況文章就不見了），至於最可能的原因，就這篇文章的後面來描述

解法大致上分幾種

從Windows的官方網站下載官方安裝檔
在錯誤畫面下輸入指令
進入BIOS關掉主機板的網路功能

從Windows的官方網站下載官方安裝檔

使用官方的MediaCreationTool算是最正統的做法，只是這裡的更新不是最新就是，如果用像是UUP dump服務做成最新更新的ISO檔，再搭配像是Rufus等工具安裝的話，不保證一定能夠穩定安裝

基本上準備個8GB USB隨身碟就夠用，就請自行準備

在錯誤畫面下輸入指令

在出現這個畫面下，不要按下「確定」按鈕（因為就會重開機了）

這時不要按下「確定」按鈕

這時鍵盤shift + F10輸入便會跳出命令提示字元，接著輸入下面指令後按Enter鍵

cd windows/system32/oobe

輸入cd windows/system32/oobe

接著輸入下面指令後按Enter鍵

msoobe

接著就是輸入離線帳戶和密碼後重新啟動電腦

如果這時候還有問題的話，也就在出問題的畫面同樣鍵盤shift + F10輸入便會跳出命令提示字元，這時候輸入regedit跳出註冊表

輸入regedit

尋找HKEY_LOCAL_MACHINE\SYSTEM\SETUP\STATUS\ChildCompletion下的SETUP.EXE，設定成3

將HKEY_LOCAL_MACHINE\SYSTEM\SETUP\STATUS\ChildCompletion下的SETUP.EXE的數值設定成3

這樣應該就沒問題了

進入BIOS關掉主機板的網路功能

前兩個方法是比較偏向解決沒錯，但會發生的根本原因，可能就是主機板上的Intel網路晶片（主機板的有線網路孔或是無線網路）造成的，所以關掉的確是可以解決的；應該正確來講，是Windows對於Intel網路晶片似乎驅動程式沒寫好，所以會造成這個狀況（因為我安裝Linux系統的Zorin OS就沒這問題）

這邊能夠做的有兩點

1.關掉主機板的網路功能（不管有線無線）

這個方式基本上沒問題，我也試驗過了，只是安裝Windows 11H2以後版本，似乎會強制要求你連網和微軟帳號綁一起

我個人是建議看

在安裝 Windows 11 時跳過網路設定、使用本機帳號 – vimL Blog (nchc.org.tw)

這篇文章

而關掉主機板的網路功能，就算整個安裝完開啟Windows，勢必還是要把網路功能開啟，但很糟糕的是通常一開啟後就開始連連當機重啟，要碼就是先抓好最新的驅動程式並安裝好，不然我比較建議下一個方法

2. 把主機板的網路功能關掉，並安裝獨立網路卡

我想這個方式是最保險的做法，因為就算安裝好最新的驅動程式，還是蠻常出紕漏，我自從安裝獨立網路卡後，就沒有出現這問題了

以上為[Windows]電腦意外地重新啟動或發生意外的錯誤。Windows無法進行安裝，希望能夠幫助你

參考資料

windows 無法完成安裝若要在此電腦上安裝windows 請重新啟動安裝程式

如何解決「Windows 無法完成安裝」錯誤

在安裝 Windows 11 時跳過網路設定、使用本機帳號 – vimL Blog (nchc.org.tw)

【問題】自組電腦，裝完Windows 10發生錯誤 @電腦應用綜合討論哈啦板 - 巴哈姆特 (gamer.com.tw)

【問題】intel i226-v這網卡一直有問題?? @電腦應用綜合討論哈啦板 - 巴哈姆特 (gamer.com.tw)

@電腦應用綜合討論哈啦板 - 巴哈姆特 (gamer.com.tw)

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

[WordPress]網站裡中文字體的處理 - 進階篇

Tue, 20 Aug 2024 11:18:33 GMT

以往的文章裡雖然已經提過對於中文字的處理，但僅限於把必要字拆出然後顯示，而這一篇的目的，則是可以讓網頁完整顯示該字體

這裡處理的步驟為

字型子集化：僅取出常用的字，沒有包含在這裡面的字將會被正常顯示（可能取用系統的Serif類字體，像是臺灣就新細明體之類）
分割字體：將woff2字體自行切割成數個小檔案，之後壓縮採woff2字體
使用CSS語法：使用CSS語法將這些字體讀取後並顯示到網站上

基本上的流程為這樣，而這種做法是可以讓網站流量佔到最小（因為之前我使用的方式本來大約8MB的字體縮小至約880KB，也就是說減少了將近90％的大小），但我在這篇文章的做法，會是偏向頁面上有什麼字，就會讀取該字出來，所以說相對之前的做法，網站的流量會增加（也就是說這裡就必須靠CDN來減輕網站的負擔）

那麼在這篇文章的處理流程基本如下：

分割字體：這個服務是由中文网字计划提供，可以在這裡做字體的切割，並提供必要的檔案（包含CSS檔案以及.woff2字型）
上傳檔案到網頁主機
在HTML和CSS寫入相關設定並確認效果：這裡是本篇最難的地方，必須要有點HTML和CSS基礎（搭配開發者工具）才能達成，將相關設定分別寫入<HEAD>標籤內（可以使用插件）以及附加的CSS內

由於上面有提到最好有些HTML和CSS基礎相關知識，在處理上會比較順利些，但如果嫌麻煩的話，就還是建議參考之前的文章來做中文字型的處理方式吧

分割字體：

首先，你必須要自己準備「合適」的字體

為什麼我要特別強調「合適」的字體的原因是，可能網路上會有提供字體下載，但不見得「合法」，如果使用在網頁上顯示並使用的話，是會觸犯法律的；所以說找的字體最好是免費且允許可以商業使用，這樣才算最保險

例如全新 HarmonyOS 字体：這個字體是來自華為的HarmonyOS字體，可以拿來商業使用，所以用在網站上沒問題

如果真的有特殊糾結情感的話，cjkfonts 全瀨體我覺得也是個不錯的選項

上面的字體基本上已經涵蓋了亞洲語系，如果說你只有繁體中文內容的話，那我會建議饅頭黑體

接下來就是介紹如何利用「中文网字计划」服務來做字體切割

Step 01：進入 中文网字计划網頁

進入在线分包網頁

Step 02：將字體拖入紅框處

點擊或是將字體拖入紅框處

Step 03：選取要分割的字體

選取要分割的字體

Step 04：點擊「点击开始进行字体分包」按鈕

點擊「点击开始进行字体分包」按鈕

Step 05：開始處理字體分割

開始處理字體分割，並壓縮字體成.woff2格式和提供其他必要檔案

Step 06：分割完成！

要注意的是，要看到最後產出result.css、index.html、reporter.json檔案才算完成，記得按右下角的「压缩下载.zip」

Step 07：儲存至本地端

將壓縮下載的zip檔案存到本地端電腦內

Step 08：記住字體名稱

將壓縮包解壓縮後，裡面會有個「result.css」檔案，直接點擊開啟，我們要看的是fontFamily的內容

我們可以得知這個字體叫做「cjkFonts 全瀨體」，字體名稱務必記住，因為後面將會要使用到

上傳檔案到網頁主機

接著是上傳檔案到主機上

上傳壓縮包的所有檔案至網頁主機內

選取所有檔案

在WordPress版本6.53之前，上傳壓縮包裡的檔案（包含副檔名.woff和.json格式）是沒問題的

但是到6.6.1版本之後，就無法上傳上述檔案了

上傳時出現錯誤

如果遇到這狀況，那就來求助外掛（Plugin）吧，修改wp-config.php有點麻煩就是（若後續沒有特別需求的話再移除就好）

解決無法上傳特定格式檔案

Step 01：尋找「WP Add Mime Types」的外掛並安裝

尋找「WP Add Mime Types」的外掛並安裝

Step 02：進入設定

從「設定」→「MIME 類型設定」的順序進入

Step 03：增加支援上傳的檔案格式

拉到畫面下方

Step 04：輸入相關資訊

內容輸入以下資訊（可直接複製）

proto = application/octet-stream
bin = application/octet-stream
css = text/css
woff2 = font/woff2

輸入完畢後最後記得按下「儲存」按鈕，不然就等於做白工了

接著壓縮包內的所有檔案就都可以上傳到網頁伺服器了

在HTML和CSS寫入相關設定並確認效果

接下來這個是大魔王關卡，為什麼這麼說有一個最大原因是：要覆寫背景主題CSS的部分是最困難的，因為每個佈景主題的字型家族（font-family）放置方式也會不一樣的，我這裡會舉目前使用的佈景主題（Blocksy）和以前使用的佈景主題（Astra）來做說明

首先我分成兩個部份來講解，分別是HTML和CSS的資料輸入

HTML輸入的資料

HTML輸入的部分相對簡單，只要透過可以處理Snippet的外掛就行，只要在<HEAD>標籤的地方填入

<link rel="preconnect" href="https://cyrians.com" crossorigin />
<link rel="stylesheet" href="https://cyrians-media-cdn.b-cdn.net/wp-content/uploads/2024/08/Newresult.css" />

這邊稍微講解一下

原則上，我們是務必採用CDN來傳輸我們的文字檔案，使其能夠更快顯示出來；因為我們使用的主機，不會比CDN傳輸資料來的好

是為了能夠讓一般使用者輸入cyrians.com後就能預先快速連線載入（並連動CDN內容）

這裡的路徑最好是對應CDN的路徑，這樣才能第一時間載入這個CSS檔案

我這裡是有更改CSS檔案名稱成為Newresult.css，其實這有其他用途，會在下面描述

基本上，HTML輸入的資料這邊就結束了，緊接著是重頭戲的CSS資料輸入

CSS輸入的資料

接下來CSS要輸入的資料我再分兩類，一個是務必輸入的，另一個則是依據不同的佈景主題而增加的CSS

必輸入的CSS

我們可以透過附加的CSS功能加入

從「外觀」→「自訂」進入

點選「附加的CSS」

輸入必要的程式碼

我這裡的程式碼僅供參考，實際上得依據你CSS檔案的檔名還有路徑去做修正（甚至是搭配CDN的路徑）

@import url('https://cyrians-media-cdn.b-cdn.net/wp-content/uploads/2024/08/Newresult.css');

依據不同的佈景主題而增加的CSS

接下來是本篇的大魔王，前面的步驟其實很快就可以處理好（雖然文章整篇看起來有點長），但是接下來要寫入的CSS是必須搭配瀏覽器的開發者工具才能完成

我這裡的範例以Edge瀏覽器的開發者工具為主，然後再分Blocksy佈景主題和Astra佈景主題略做講解

Blocksy佈景主題加入的CSS程式碼

這時候我們開啟瀏覽器的開發者工具（鍵盤快捷鍵F12）

點選地方，然後下方篩選器內容輸入「font-family」來加快查找我們要找的地方

以HTML的概念中，字體相關設定都會是在<body>的標籤內，所以我們就是先點選<body>的區塊，接著下方篩選器內容輸入「font-family」來快速找我們想要看的地方

這時候我們可以看到有「font-family: var(—theme-font-family);」這一句，然後把稍早記下來的「cjkFonts 全瀨體」輸入※

※輸入成’cjkFonts 全瀨體’」或是「“cjkFonts 全瀨體”」都可以

輸入後看的出來畫面上的文字都變化了

很明顯的整個畫面的文字都和之前不一樣了，所以這裡的CSS程式碼可以寫

body, h1, h2, h3, h4, h5, h6, pre, kbd, code, samp, label, figcaption, .wp-block-quote, .wp-block-pullquote, .ct-label, .site-title, .entry-meta, .ct-menu-badge, .entry-excerpt, .ct-post-title, .ct-breadcrumbs, .ct-header-text, .ct-product-sku, .author-box-bio, .author-box-name, .ct-contact-info, .site-description, .page-description, .mobile-menu a, .menu .ct-menu-link, .comment-reply-title, .ct-footer-copyright, .ct-language-switcher, :is(.entry-summary,[data-products],.ct-trending-block,.ct-added-to-cart-product) .price, .woocommerce-tabs .tabs, .woocommerce-tabs .ct-accordion-heading, .woocommerce-result-count, .ct-header-account-dropdown, .ct-module-title:is(p,span), .related-entry-title:is(p,span), .woocommerce-loop-product__title:is(p,span), .woocommerce-loop-category__title:is(p,span), .ct-shortcuts-bar, .ct-widget>*, .ct-dynamic-data-layer, .ct-dynamic-filter, .ct-search-results, .tutor-ratings, .tutor-meta>*, .tutor-course-details-title, .tutor-course-details-actions>a, .ct-language-switcher ul[data-placement] {
	font-family:"cjkFonts 全瀨體";
}

但如果仔細看的話，其實會發現按鈕部分的文字沒變化，而且上面的CSS感覺又臭又長的

那麼是否有可能可以再減少這麼長的程式碼呢？答案是可以的

「font-family: var(--theme-font-family);」這段，會發現--theme-font-family可以點擊

點擊進去後，會看到一堆字體在這裡

同樣把後面的字型改成「"cjkFonts 全瀨體"」之後，畫面的文字包含剛才的按鈕文字都改變了

所以這裡的CSS程式碼

/* 覆蓋全站字體，可能依據佈景主題不同改變內容 */
:root {
  --theme-font-family: 'cjkFonts 全瀨體';
}

然後按下「發佈」按鈕儲存後就大功告成！

Astra佈景主題加入的CSS程式碼

就如同前面所述，每個佈景主題，他們的CSS寫的語法會不同，這裡特別拿Astra的佈景主題來講解

同樣的方式，開啟開發者工具，然後點選，篩選器輸入「font-family」，可以找到相關的font-family

這裡CSS程式碼可以輸入

/* 版面全體字型 */
body, button, input, select, textarea, .ast-button, .ast-custom-button{
	font-family:"cjkFonts 全瀨體";
}

但是也可以簡化成

/* 版面全體字型 */
body{
	font-family:"cjkFonts 全瀨體";
}

只是這個寫法是只可以用在Astra佈景主題上，Blocksy佈景主題沒辦法這樣使用

接著對文章的標題還有側邊工具列的標題做修正

雖然大部份的文字已經修改過，但是文章主題的標題，還有側邊工具列的標題還是一樣，所以我們這邊還要再做一些修正

我們先挑選文章主題的元素，找到該font-family

同樣在font-family後輸入「"cjkFonts 全瀨體"」便會更改文章標題的字型了

這邊的CSS程式碼為

/* 文章標題字型 */
.blog .entry-title, .blog .entry-title a, .archive .entry-title, .archive .entry-title a, .search .entry-title, .search .entry-title a{
	font-family:"cjkFonts 全瀨體";
}

儲存後就會看到文章標題字型改變了，緊接著我們挑選側邊工作欄的標題並找出目標的font-family

同樣輸入「"cjkFonts 全瀨體"」就會看到側邊工作欄的標題字型也改變了

這邊的CSS程式碼為

/* 側邊工作欄標題字型 */
.secondary .widget-title, .woocommerce-page #secondary .widget .widget-title{
	font-family:"cjkFonts 全瀨體";
}

同樣的，將這些CSS都寫入後就大功告成！

結語

其實如果說夠熟練的話，基本上10分鐘就可以搞定，但由於這屬於教學的關係，所以會看起來有點多

至於你說和以前的子集化和搭配HTTP/2併發下（同時傳送檔案），速度會慢很多嗎？

我想就實際拿PageSpeed Insights和WebPageTest的測試結果來看吧

PageSpeed Insights的行動裝置測試結果

PageSpeed Insights的電腦版測試結果

WebPageTest的測試結果

整體來講，其實不能算太差，只是主機不夠力也是事實（使用的是共享主機A2hosting的Turbo Boost Web Hosting方案）

如果說主機效能再好些的話，或許狀況會再好些

真的要講缺點的話，就是流量會比以前大（加上他字型約每6～70KB就分割，所以會看到讀取很多檔案）

而上面有提到所謂使用不同的CSS檔案名稱的用意，其實是為了如不同地方（如文章標題等）所使用的，一個CSS檔案，就只能對一個字體系列作處理；如果是為了複數地方要放不同的字體，那也就是需要複數個CSS檔案來達成，而這些CSS檔案不會是同樣的名稱來做區分

所以說有特別需求的話，不妨可以自行嘗試看看做調整

以上為[WordPress]網站裡中文字型的處理 - 進階篇，希望能夠幫助你

參考資料：

中文网字计划

中文网字计划（GitHub）

HarmonyOS 字体

cjkfonts 全瀨體

Google Fonts 加持的高级中文字体子集化实现

解決 WordPress 登入身分沒有上傳這個檔案類型的權限當你在 WordPress 上傳某些類型檔案時發生以下錯誤「很抱歉，目前的登入身分沒有上傳這個檔案類型的權限」。make9.tw · 前往原始文章make9.tw

[WordPress]網頁中文字型瘦身-①相信一些架站的朋友們，總會看到一些令人心動的中文字型總會想要應用在自己的網站上，但中文字體很夭壽的大（基本上都5M起跳），有些比較誇張的甚至可以達到20M，那麼採用了這樣的字型代表了什麼？就是你的網站讀取速度會變慢，這裡將介紹如何為你的網頁字型瘦身Cyrians · 站內文章

[WordPress]關於網頁中文字型瘦身-②在上一篇的[WordPress]網頁中文字型瘦身中，我們知道了所謂的「字體子集化」是透過擷取需要的字，來做到縮小字體體積，然後進一步加速網站的文字顯示。就如同之前文章中提到的，雖然已經將本來將近8MB左右的字體檔案壓縮到800多KB（剩下1/10），剩下的就是研究如何再把字體分割化傳輸Cyrians · 站內文章

[WordPress]關於網頁中文字型瘦身-③（完結）這篇是總結對於中文字型瘦身的文章，要延續上篇[WordPress]關於網頁中文字型瘦身-②文章，並透過HTTP/2做多執行緒傳輸（同時間做多路傳輸）Cyrians · 站內文章

[郵件系統]郵件系統的備援 - Email Routing篇（免費）

Mon, 19 Aug 2024 07:53:15 GMT

這篇文章是接續上篇的[郵件系統]關於郵件系統備援方式 – 微付費版的內容

[郵件系統]關於郵件系統備援方式 - 微付費版會有這篇文章的產生其實原因是我自己本身有架郵件伺服器，後來發生了未知的郵件伺服器中斷事件，於是衍生出尋找替代的備援機制這篇文章出來Cyrians · 站內文章

最後提到了所謂的Email Routing（使用Cloudflare達成）的方式可以達成備援，其實意外的相當簡單；就如同之前的文章提到，只要能夠有MX記錄和TXT記錄的相關DNS設定，基本上就沒問題了

而Email Routing的設定，可參考之前的文章

Email Routing設定

[Cloudflare]利用Cloudflare的電子郵件路由（Email Routing）功能，使Gmail可以寄送自我網域的郵件這裡介紹的，是利用Cloudflare的電子郵件路由（Email Routing）功能，再透過Gmail來收發自己網域的信件※，且發出的郵件都會顯示以自己購買的域名名義發送Cyrians · 站內文章

這裡我們參考如何開啟Cloudflare電子郵件路由功能的部分，但在那之前，我建議先對目前的DNS設定先做備份

DNS設定的備份方式（Cloudflare的DNS設定備份）

Step 01：到Cloudflare的DNS記錄介面

到Cloudflare的DNS記錄介面

Step 02：點選「匯入與匯出」功能

點選「匯入與匯出」功能，並點選「匯出DNS記錄」

Step 03：匯出檔案

匯出檔案

這樣一來DNS設定就備份成功了

其他設定的部分就還先參考之前的文章所提到的設定方式，但最主要的是「要無視Cloudflare的警告」

因為雖然畫面會顯示目前停用中，但其實還是有在動作的（只要你有填入Cloudflare的各項DNS記錄）

顯示電子郵件路由已停用

顯示DMARC找不到預設RUA

停用電子郵件路由步驟（表面上）

這裡並非要真的停止電子郵件路由，而是做個形式（不然會無法增加MX記錄）

沒有解除Email Routing功能的話會顯示無法增加MX記錄

所以我們這裡就進行「表面上」的解除Email Routing功能

Step 01：進入電子郵件路由介面

進入電子郵件路由介面，並選擇「設定」分頁

Step 02：點選「…」的地方

點選「…」的地方

Step 03：點選「正在停用」

點選「正在停用」（這個要點下去喔，可能是翻譯上的關係，沒有點下去不會停用的）

Step 04：選擇解除並保留DNS記錄

選擇「解除並保留DNS記錄」後，按下「解除鎖定記錄並繼續」按鈕

Step 05：可以輸入其他的MX記錄

這時候我們就可以輸入其他的MX記錄了

Step 06：依據優先順序填入

這裡的寫法是主伺服器優先，其次為Email Routing，最後採Zoho

以上的寫法是有些誇張（二重備援機制），基本上Email Routing的轉信功能如果是寄到Gmail或是Outlook的話，這類服務會中斷的可能信很小，甚至到第三重的Zoho的機會應該是非常之低；但由於這是連串的文章，所以將這樣的寫法寫出供大家參考

追加部份：DKIM、DMARC、SPF的寫法

其實這部份算是有點一時興起想寫，真的要我講原理還真的沒辦法，但依據我這邊的狀況，稍微說明一下寫法

基本上，DKIM、DMARC、SPF在DNS設定的配置上如果能完成，基本上寄信會被當作垃圾郵件的可能信可以大幅降低（雖然還有推行啥MTA-STS、TLS-RPT還有BIMI之類的，但設置上相當麻煩；然後BIMI的話還要一年花個3、4萬費用就只是為了寄信能夠看到你的品牌圖案）

但我這裡還是單純以DKIM、DMARC、SPF的寫法做初步說明

DKIM寫法：

一個網域裡可以有多個DKIM記錄，因為像是遇到不可抗的狀況造成停機時，會由另一台郵件伺服器寄送，那麼那台郵件伺服器也會有個DKIM記錄；也就是說DNS設定裡面的DKIM記錄，和郵件伺服器上的DKIM記錄會是一致的

我們可以參考DKIM Record Generator這個網頁，DKIM selector一般來講我是填入default，而DKIM key length的部分則是填入2048※

※DKIM key length這個長度部份取決於郵件伺服器是否支援到這個長度，通常越長越好，以現在標準來講最好是2048起跳

DKIM的寫法

DMARC寫法：

建議把相關記錄寫在一起，可以參考DMARC Record Generator這個網頁

我個人的寫法是

DMARC的寫法

類型：TXT
名稱：_dmarc
內容："v=DMARC1; p=none; rua=mailto:admin@cyrians.com,mailto:rua@dmarc.brevo.com,mailto:dmarc_agg@vali.email"

SPF寫法：

基本上會需要將相關記錄寫在一起，但特殊情況下可分開寫（如SendGrid會要特別寫），可以參考SPF Record Generator這個網頁

我個人的寫法是

SPF的寫法

v=spf1 a mx ip4:郵件伺服器的IP include:_spf.mx.cloudflare.net include:zohomail.com -all

以上為DKIM、DMARC、SPF的寫法

結語

關於郵件系統備援機制的文章，也就此到一個段落，不管是付費或是免費的方式，都僅是在特殊情況下使用。如果屬於大公司大量的郵件帳號，這方式並不適合（畢竟要搞一堆帳號），還是得回歸正常的備援機制（例如雙伺服器甚至是三伺服器都有可能），我想這種備援機制會比較合適低於20人內就是

以上為[郵件系統]郵件系統的備援 - Email Routing篇（免費），希望能對你有所幫助

[郵件系統]關於郵件系統備援方式 - 微付費版

Sun, 18 Aug 2024 05:21:50 GMT

會有這篇文章的產生其實原因是我自己本身有架郵件伺服器，在今年（2024年）的5月中旬發生郵件伺服器中斷；但由於我本身工作的關係算是一年將近一半的時間都不在國內的關係，變成這種狀況下可說是無助啊（也想不到合適的解決方案）

最後就是等到6月回國後，開始研究有什麼備援機制可以解決這窘況；但很意外的，似乎國內找不到這些相關文章，那我就只好從國外文章下手，就只是可能我英文也沒那麼好，搜尋到了解的關鍵字也有限，最終自己摸索搭配AI使用以下方式來解決

申請Zoho帳號

Step 01：到Zoho網站申請帳號

進入Zoho網站後，點擊「Mail」

Step 02：點擊上方Pricing的部分

點擊上方Pricing的部分

Step 03：選擇下方的「Forever Free Plan」

選擇下方的「Forever Free Plan」並按下「SIGN UP NOW」按鈕

Step 04：輸入相關資料後按下「註冊」按鈕

輸入相關資料後按下「註冊」按鈕

Step 05：輸入驗證註冊碼（到信箱或是手機）

輸入驗證註冊碼（到信箱或是手機）後按下「驗證」按鈕

Step 06：點選「Add an existing domain」的部分

點選「Add an existing domain」的部分，並點選「Add now」按鈕

Step 07：輸入欲使用的網域名稱以及其他資料

輸入欲使用的網域名稱以及其他資料

Step 08：註冊完畢

註冊完畢！接著要進入設定篇，按下「Proceed domain verification」

DNS相關設定

接下來是Zoho的DNS設定，這時候要搭配自己的網域商（或是你有用Cloudflare）來處理DNS的設定部分，以下的部分是使用Cloudflare介面操作，其他的網域商應該也會有類似操作方式才對

Step 01：將此設定複製下來，並在Cloudflare增添相關資料

把該設定複製下來，並在Cloudflare輸入儲存後，按下「Verify TXT Record」

Step 02：按照上方內容輸入資料後並按下「儲存」按鈕

按照上方內容輸入資料後並按下「儲存」按鈕

Step 03：稍早按下「Verify TXT Record」後，進會進入這個畫面

稍早按下「Verify TXT Record」後，進會進入這個畫面，這時按下「Create」按鈕

Step 04：點擊下方的「Proceed to Setup Groups→」按鈕

點擊下方的「Proceed to Setup Groups→」按鈕

Step 05：點擊「Proceed to DNS Mapping」按鈕

由於我們主要只是要郵件功能，其他就先不管。這裡點擊「Proceed to DNS Mapping→」按鈕即可

Step 06：這裡需要進一步做DNS的設定

這裡需要進一步做DNS的設定，我這裡點選「Configure manually」

Step 07：同樣這些設定需要填入到Cloudflare的DNS設定裡

同樣這些設定需要填入到Cloudflare的DNS設定裡，填好後再按下「Verify all records」按鈕

Step 08：SPF記錄的寫法可做調整

SPF記錄的寫法可做調整，因為我有複數個SPF記錄，可以參考這裡的寫法作調整

Step 09：Cloudflare的DNS設定

Cloudflare的DNS設定請參考圖做設置，我故意把優先順序做調整（數值變大）

Step 10：在Step07步驟中按下「Verify all records」按鈕後出現的畫面

在Step07步驟中按下「Verify all records」按鈕後出現的畫面。這個畫面中我們要確認背景有兩個綠色的勾後，按下「Proceed to Email Migration→」按鈕

Step 11：資料轉移（可跳過）

由於資料轉移不是這篇重點，所以跳過按下方的「Proceed to Go Mobile→」按鈕

Step 12：提示有手機的APP可用

提示有手機的APP可用，我們直接按「Proceed to Setup Completion」按鈕

Step 13：大功告成！

這樣就大功告成了！

測試驗證方式

這裡要先說聲抱歉的是，你現在所看到的這篇文章已經是第二次重新撰寫（因為備份不周造成原本這篇文章要重新寫），所以我就單純這邊描述測試的驗證方式。主要也因為之前確認過這樣方式是沒問題的，所以還請各位包涵

將主郵件伺服器主機關閉電源
從私人信箱寄信到該郵件伺服器內的信箱（這時主郵件伺服器已關閉，應該會寄到Zoho那邊的信箱）
確認Zoho是否有收到信件，有的話則回信到私人信箱
確認私人信箱是否收到來自Zoho寄出的郵件
開啟主郵件伺服器主機電源
把私人信箱剛剛收到從Zoho寄出的郵件，再度回信給主郵件伺服器的信箱
確認主郵件伺服器信箱是否收到郵件（一方面也可確認Zoho是否收到同一封郵件，正常來講應該不會收到），有確認到的話再度回信給私人信箱
確認私人信箱是否收到來自主郵件伺服器的郵件，確認有收到的話代表以上步驟設置正確且正常動作

結論

如果說你本身就是Google的Workspace或是微軟的Outlook付費信箱（都會有可以自訂網域功能）使用者的話，這篇對你的幫助或許沒那麼大，畢竟搞郵件伺服器就是一個折騰（雖然我就還是搞了一個起來）

這篇主要的受眾還是以有自行架設郵件伺服器的人員為主，在遇到特殊狀況人又沒辦法即時處理的時候，這個技巧我覺得很重要

有幾點要強調：

Zoho免費版本僅5GB，且不支援POP/IMAP（意思就是說沒辦法用Outlook/Thunderbird之類的郵件軟體）
這些服務商，會有可能隨時中斷服務，所以要有其他的備案（會在下一篇文章解說使用Cloudflare的Email Routing功能來達到同樣功能）
這僅是應急機制，最終還是回到郵件伺服器上的處理

其實整體下來可以發現到一件事情，就是只要服務商有提供MX記錄（以及TXT等相關DNS記錄設定），幾乎都可以搞定，唯獨MX記錄的優先順序調整就好

當然，你也可以用微付費的方式來獲得可以客製化網域的服務（也會有MX等相關DNS記錄），你可以選擇直接用那些服務當主郵件信箱或是備援機制，這取決於你的需要

這裡依據價格做排序

iCloud+：臺灣僅30 NTD就有50G的共享空間（並可以有5個自訂域名），且iCloud本身空間不大（5G），有使用iPhone的人應該不少人有使用這服務？

50G的共享空間和5個自訂域名

Zoho（本次的付費服務）：由於採用美金付費的關係，依據匯差來算比iCloud+稍貴，但比較免費版多出了可以使用郵件軟體收信功能（容量不變就是）

價格比iCloud+稍貴（因為匯差），但一個月差不多30多塊也是相當實惠的價格

3. namecheap：雖然他們本業是網域商，但是也有提供信件服務，促銷價格為0.83美金/月，但一年後會回復到1.24美金/月（5GB），不管怎麼說，還是相當實惠（只要你勤快點把信都收下來就好）

第一年促銷0.83美金/月也相當優惠

以上為[郵件系統]關於郵件系統備援方式 - 微付費版，希望這個能夠幫助你

參考資料

如何用自己的網址收信？ 5 分鐘教你用 Migadu 免費建立網域信箱 | WebLai

Use GMail as secondary/fallback MX for self-hosted mail server? : r/selfhosted (reddit.com)

[WordPress][Windows]關於本站的圖片優化部份

Fri, 26 Jul 2024 08:41:49 GMT

在之前的文章提到有關於備份時發現容量不正常的大小，於是乎就開始整理以前的文章和圖片

就如同之前的文章提到

網站升級調整最近有考慮寫一些文章卻發現網站狀況不太好，於是開始去回顧一些狀況，在後續的校正調整將會以網站整體瘦身為主，並將一些細部做統一調整。也感謝一直以來有看這個網站的人你們的支持Cyrians · 站內文章

因為WordPress內建功能搞出了一堆不必要的Thumbnails（縮圖），所以造就了容量佔用的狀況（有些圖的解析度比原圖低，但弄出來的縮圖容量卻比原圖大）

這裡我參考了金城事務所的文章，有幾篇我覺得不錯的文章分別為

如何幫你的 WordPress 圖片優化，瘦身媒體庫空間

Caesium Image Compressor：免費也最強的圖片優化軟體

以下是我個人建議的幾點

1. 安裝Disable Generate Thumbnails外掛防止產生縮圖

這個外掛是防止WordPress產生不必要的縮圖圖片

尋找並安裝Disable Generate Thumbnails外掛

Disable Generate Thumbnails的設定，把WordPress會產生縮圖的選項一一關閉

雖然以金城大的文章寫到還是要留150*150解析度的縮圖以防萬一，我個人比較偏好都不留就是※

※這樣講也不是沒原因，例如這邊都沒有設個縮圖之類的話，像是有使用Swift Performance這類網站優化外掛時，會莫名其妙生成20*20的縮圖（在嵌入內容縮圖就是會硬選這個解析度），就算刪除了還是會被自動產生，這時候的我就使用LiteSpeed Cache的話就沒這問題

執行這一步的原因是避免後續產生不必要的縮圖

2.安裝Thumbnail Cleaner外掛刪除非必要的縮圖

這個外掛可以偵測WordPress產生的縮圖並可以進行大量刪除。雖然有六年沒有更新，但就算目前WordPress版本6也是可以使用，記得使用前務必備份網站（因為可能會影響到網站的一些圖片顯示）

安裝Thumbnail Cleaner外掛

使用前務必先備份網站，後續依據「Start Analyzing」→「Delete Thumbnails」等步驟進行縮圖刪除

這裡有個但書，就是這動作僅會刪除系統產生的.jpg或是.png圖片，如果是透過第三方外掛產生的.webp或是.avif之類的圖片就刪除不到

執行這一步的原因是刪除現有的非必要縮圖

3. 規範圖片的解析度的寬高設定

這個比較偏向我個人的喜好設定，我會設定寬邊（長邊）：不超過1500 px；高邊（短邊）：不超過1080 px

為什麼我會這樣設定的理由為現金顯示器基本上FHD還是為主流，寬邊1500 px已相當夠用，當然相較於4K顯示器來講確實就小了點，但就算這樣還是夠用；同樣的1080 px的高度也綽綽有餘了

除非你是攝影者相關的網站非常在意圖片解析度，不然還真的沒必要搞那麼大的解析度，且顯示時會拖累網站的顯示速度

執行這一步的原因是避免沒必要的解析度造成非必要的圖片大小

4. 圖片的副檔名格式決定

以前我一直都是上傳PNG格式（因為屬於無損畫質）後搭配ShortPixel外掛再轉.avif，後來想想不對啊，我的網站又不是啥攝影網站，有必要追求啥圖片要完美無缺嗎？

後來想想也就釋懷些了，因為我只是單純教學網站，使用的圖片只要不是太大片的馬賽克看不清楚就好（至少知道每個步驟是怎麼進行的）

當然，除了我們常見的.jpg以及.png外，網路上常用的影像格式還有.webp以及.avif
我這邊順便提供目前webp和avif目前瀏覽器的可使用率吧

.webp格式囊括了世界96.91%的瀏覽器可使用率

.avif格式囊括了世界93.63%的瀏覽器可使用率

其實對我來說，.webp或是.avif都是可以選擇使用的影像格式，但就以壓縮率來講，那勢必會贏過.png以及.jpg的
特別是現在講求網站速度的話，這兩種格式其實都不錯

唯獨就是是否要去對應早期電腦的瀏覽器這點而已，但就我個人觀點來看，是沒有去迎合這一小群用戶的必要性，畢竟使用低於Windows 7的電腦，絕大部份都是特別需求的電腦（如不得不採用早期作業系統的工具軟體），要拿來上網說實在的有點不合理，所以對我而言是直接放棄這群用戶即可

最後，想要了解對於圖片格式評測，不妨參考

JPEG XL、AVIF、WebP 2 · 次世代图片格式评测

近年來的影像無損壓縮(Lossless)、有損壓縮(Lossy)格式比較 — PNG, JPEG, WebP, AVIF, JXL

等文章

執行這一步的原因是有更佳壓縮的圖片格式，不一定要拘泥於.png或是.jpg

5. 上傳圖片前先使用Caesium Image Compressor優化圖片後上傳

該說這是在FB社團「WordPress 社群生態普查與研習 - 網站迷谷」裡，金城大有貼「如何幫你的 WordPress 圖片優化，瘦身媒體庫空間」這篇文章讓我有感而發

因為裡面有提到JPEGmini這套軟體但要付費
講白了可能當下我有點起對抗心，所以我就去找了類似的軟體

最後沒想到在GitHub找到Caesium Image Compressor這一套免費的軟體（壓縮率高且有相當選項微調的軟體）
這一套軟體不只Windows版，連MACOS都照顧到，可真的說是佛心軟體，如果有餘力的話，不妨付點費用支持原作者，讓原作者更有動力創作

Caesium Image Compressor的軟體介面

以下我有用幾款圖片優化軟體做比較 - 包含了Caesium Image Compressor（GitHub）、Imagine（GitHub）、JPEGmini（付費）、SpaceSaver（付費）、XnConvert（免費），使用的圖來自Wikimedia Commons的圖（格式都為.jpg；一開始的設定都是jpg本身的優化，後面才加入轉.avif和直接轉.webp的比較方式

使用各軟體比較圖片優化率

就以這樣的結果來看，其實可以得到幾個結果

直接使用Caesium Image Compressor轉.webp格式優化率最佳
較為明亮系的圖片中，.jpg的優化和直接轉.webp或是中轉.avif等新世代圖片其實相差不大（大約2％點內）
較為暗色系的圖片中，.webp或是中轉.avif等新世代圖片和.jpg的差距就會比較大了（接近5％）

由於軟體本身有繁體中文化，所以我覺得不太需要詳細解說使用的部分，以下我只針對幾個重點使用

1) 圖片尺寸

我這邊會設定「長邊固定」在1500px，或是你要設定「短邊固定」在1080px亦可；最後記得「不要放大」要勾選

2) 輸出選項

檔案夾部份盡量不要和原檔同一資料夾，「若輸出體積大於源文件則跳過」打勾、格式選擇你需要的格式

執行這一步的原因是可以直接處理上面提到的解析度寬高部份，甚至進一步想要轉的格式

至於ShortPixel或是EWWW之類的外掛還有必要嗎？說真的我也很難回答
畢竟透過這類外掛再壓縮容量也是有可能的，至於畫質部份比較，我想還是透過Caesium Image Compressor來優化還是略勝一籌吧

以上為[WordPress][Windows]關於本站的圖片優化部份，希望能對你有所幫助

參考資料

如何幫你的 WordPress 圖片優化，瘦身媒體庫空間

Caesium Image Compressor：免費也最強的圖片優化軟體

JPEG XL、AVIF、WebP 2 · 次世代图片格式评测

近年來的影像無損壓縮(Lossless)、有損壓縮(Lossy)格式比較 — PNG, JPEG, WebP, AVIF, JXL

[WordPress]關於本站的圖片燈箱效果

Wed, 19 Jun 2024 09:05:04 GMT

在之前網站經過整頓之後（主要是把一堆Thumbnails縮圖刪掉），也算是從700 MB的大小縮小到260 MB左右，或許在後續會稍微說明我之前奮鬥的過程。

雖然不是要炫耀自己技術多好，但是看到一些改變的話（主要針對網站速度），其實心情也會變好

例如：

5月底最佳化完畢剛開始

這邊看的出來網站載入時間為2.3秒，要注意一點，這是採用「中文字型」的網站，沒採用特定的中文字型，搞不好一秒內就搞定

如果來看首頁瀑布圖的話…

Cyrians首頁的瀑布圖

對我來講，這可能接近共享主機的極限（但或許還有可以優化的部分，例如BunnyCDN的Offloader功能）

隔一週後從2.3秒降到2.1秒

最新一週降到1.54秒

在共享主機有限的資源能達成這樣，其實對我來說也有點成就感（有人來訪問固然高興，但能夠有進一步的技術進步記錄其實我更開心）

有點扯遠了

最主要還是因為之前嘗試去做網站的速度優化，那麼就是對於一些外掛開始去做慎選

像是我之前的燈箱外掛是Simple Lightbox，這也是不錯的插件

Simple Lightbox Vs Lightbox for Gallery & Image Block

Simple Lightbox外掛與Lightbox for Gallery & Image Block的效能對決

就僅是在一些部份來講，Lightbox for Gallery & Image Block更加輕巧罷了

只是Lightbox for Gallery & Image Block並沒有像Simple Lightbox有較多的設定

例如

我現在圖片的燈箱效果

這樣的效果其實是有調校過的，不然原本的效果會是

非常平淡無奇的燈箱效果

但這個可以用CSS去做調整，不妨動手看看，或許會有更好的呈現效果也說不定

以下是我的添加CSS的內容

/* 針對圖片下方標題(Caption)的調整 */
figcaption {
	font-size: 15px;/* 圖片下方標題字體大小 */
}
/* 針對燈箱內的內容調整 */
#baguetteBox-overlay .full-image figcaption {	
	font-family: inherit;/* 燈箱內文字繼承網站字體*/
	font-size: 20px; /* 燈箱開啟時內文字體大小 */
	bottom: 4%;/* 燈箱開啟時下方標題從底部往上距離 */
	color: #FFF;/* 燈箱開啟時標題字顏色調整 */
	background-color:rgba(250, 135, 0, .8);/* 燈箱開啟時標題背景顏色調整 */
	box-shadow: 0 0 10px rgba(255,255,255,0.8);/* 燈箱開啟時圖片周遭影子 */
}

其實這撰寫方式也是參考AI，然後搭配瀏覽器的開發者模式抓出想要修改的地方即可

最後，要啟用圖片的燈箱功能，務必要做一件事情

連結至圖片檔案

務必連結到圖片的檔案，沒設置的話燈箱效果不會出現喔

以上為[WordPress]關於本站的圖片燈箱效果，希望能夠幫到你

參考資料

WP Hive - A Better WordPress Repository

Lightbox for Gallery & Image BlockAdds a simple & lightweight Lightbox to the standard WordPress Gallery & Image Block. No lock in and no dependencies.wordpress.org · 前往原始文章wordpress.org

Lightbox for Gallery & Image Block的Github原始碼

[Cloudflare]使用Cloudflare的電子郵件路由（Email Routing）功能在Gmail收信，並搭配第三方服務寄信（自網域）避免變成垃圾信件

Mon, 03 Jun 2024 08:07:22 GMT

繼前篇[Cloudflare]利用Cloudflare的電子郵件路由（Email Routing）功能，使Gmail可以寄送自我網域的郵件不會變成垃圾郵件

前篇這裡寫到最後遲遲沒有能夠避免寄的信件會被收件方丟到垃圾郵件堆裡

這次做了一些調整，總算可以不會寄信送到垃圾郵件堆，那就是透過第三方服務（Brevo）來寄信，同樣也是可以用自己網域來寄信（使用Gmail）
只是這樣的服務有幾個限制

一天上限寄300封信（現階段），若是一天會寄送超過300封信的話，建議最好還是花錢弄專業的信箱比較好
尚未能夠用Outlook等收信軟體用自己域名寄信，僅能在網頁介面上收發信沒問題
使用Cloudflare的Email Routing功能，便無法加入其他的MX記錄（只能取消）

這裡稍微講解一下以上這幾點

關於一天上限300封信，是現階段第三方服務商（Brevo）的額度，或許後續就會減少這個額度也說不定（如Sendgrid的額度為100封信/天，這也就是為什麼我會選Brevo的原因）

而目前收信軟體在收信方面沒問題（就使用Gmail帳號收信），但是寄信的部分（自我網名）卻還沒搞定，或許還要花點時間來看看是否能解決

雖然乍看下Cloudflare的Email Routing很完美，但我一開始的用意其實是自身有郵件主機，只是希望Cloudflare的Email Routing功能在郵件主機出問題時才切換到Cloudflare的Email Routing動作

很可惜的，這點Cloudflare很霸道，就是不能改MX記錄，否則就可以寫順序，讓Cloudflare的功能排在自有郵件主機故障時的備用希望破滅，就只能找其他方式來替代（我想這會後續再寫一篇就是）

那麼回到正題，這次要怎麼設定呢？

Brevo設定

我們先到Brevo註冊個帳號，註冊方式我就不介紹，直接跳到如何使用服務

Step 01 進入儀表板

選擇右上的按鈕，然後選擇「Senders, Domains & Dedicated IPs」選項

Step 02 選擇Domains（網域）

選擇Domains選項

Step 03 加入新的Domain（網域）

按下右上角「Add a domain」的按鈕

Step 04 輸入你的自網域（Domain）

這裡輸入你希望使用Email的網域後，記得按下「Save this email domain」按鈕

Step 05 確認相關設定

點取「View configuration」的部分

Step 06 複製畫面上的設定到Cloudflare的DNS設定

將設定都複製到Cloudflare後，再按下Check configuration按鈕即可

Step 07 設定Senders

回到稍早畫面，點選「Senders」選項

Step 08 加入寄信者

點選右上角的「Add a sender」按鈕

Step 09 輸入寄信者名稱

From name的欄位填入你希望對方看到你的顯示名稱，From email則是我們希望的域名email

Step 10 確認狀態是否過關

確認我們在Cloudflare的DNS設定是否已經都生效了

Step 11 進入SMTP ＆ API選項

回到一開始，這次點選「SMTP ＆ API」選項

Step 12 創建新的SMTP key（簡單來說就是寄信用的密碼）

點選右上角的「Generate a new SMTP key」按鈕

Step 13 取個名稱，盡量讓自己知道這個SMTP是對應哪個帳號的

「Name your SMTP key」的欄位輸入自己好記的名稱，輸入完按下「Generate」按鈕

Step 14 系統產生密碼並複製

Brevo會產生一連串密碼，這時複製後要好好保管，否則就要重新生成

Step 15 屆時要填入Gmail寄信的相關設定

屆時要填入Gmail寄信的相關設定，先不要關閉這個網頁

以上為Brevo的部分，接著是在Gmail的設定

Gmail的設定

Step 01 進入察看所有設定

右上角的齒輪符號按下去後，點選「查看所有設定」選項

Step 02 從「帳戶和匯入」分頁進入設定

從「帳戶和匯入」分頁進入後，選擇「新增另一個電子郵件地址」的選項

Step 03 輸入相關資料

這裡輸入稍早Brevo選項Step 15提到的資料（使用者名稱是你Brevo帳號，而密碼就是SMTP key）

Step 04 資料輸入正確

資料輸入正確就會進到這個畫面

Step 05 收到確認信

這時Gmail應該也收到需要驗證信

Step 06 按下驗證連結

按下驗證連結做最後確認

Step 07 按下確認按鈕

這裡一定要按下「確認」按鈕，否則沒有完成喔

Step 08 可以使用了

顯示可以你的網域來傳送郵件了

Step 09 最後的設定

剩下最後設定，把你網域的寄件郵件地址要做更改

Step 10 嘗試寄信看看吧

嘗試寄信看看吧

Step 11 確認到不是垃圾郵件

確認到不是垃圾郵件，且SPF、DKIM、DMARC狀態都是PASS

以上為[Cloudflare]使用Cloudflare的電子郵件路由（Email Routing）功能在Gmail收信，並搭配第三方服務寄信（自網域）避免變成垃圾信件，希望能夠幫到你

參考資料

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

網站升級調整

Sun, 26 May 2024 14:15:24 GMT

最近有考慮寫一些文章卻發現網站狀況不太好，於是開始去回顧一些狀況

首先是雖然網站都有在備份，但發現備份的大小不太正常
從一開始的1、200 MB，一直到最近備份時已經破700 MB
其實這算是不太正常的狀況

因為我不是放什麼大量圖片（目前放最多的圖片文章也才不到50張）
這樣的容量暴增說實在很可疑
所以就開始去找一些原因

後來發現了原因

無路用的縮圖…

簡單來講，WordPress有個功能，就是你傳超過多少像素的圖時，它就會很雞婆幫你弄一些縮圖
有些縮圖切一切反而還比原圖大（你可以仔細去看我的圖）
也因此這樣，怪不得我的網站積了一堆沒必要東西

所以藉由這次網站的狀況，我也開始把以前到現在的文章全部整理
並且把不必要的圖刪掉

這邊先做個記錄
透過WordPress的縮圖在「永久刪除」的狀況下，是會被一同刪掉的
但是如果靠其他外掛產生的圖（如avif這類）
是只能自己手動刪除的

所以那些產生的不必要縮圖再加上外掛產生的如webp或是avif的圖
全部加一加就很可觀了

附帶一題，我稍早備份的資料（已經刪除一些圖了）
從原本700多MB，已經降到300MB不到了

如果按照這樣繼續下去瘦身
應該有機會整個網站資料備份可以不到200 MB

另外也發現以前一些圖整個全部跑掉
所以也得一點一點的全部校正回歸（雖然也才40多篇文章，但也很累人啊）
然後還針對圖片的燈箱部份也做了調整
中文字體的分割讀取部份技術也有新的發現突破
希望這樣的作業能夠半個月內搞定

也感謝一直以來有看這個網站的人
其實當初也沒特別想過會有多少人來看（畢竟有點像是自己的技術筆記）
往後回來看時，真的會覺得這是一個很珍貴的回憶就是

[Excel]核取方塊(Checkbox)+進度條(Progress bars)的呈現

Sun, 28 Apr 2024 04:28:51 GMT

最近打算開始作跨境電商的事業，所以自己就開始做進度表之類
所以有個視覺化的進度條(Progress bars)呈現，當然美觀外，也可以更清楚掌握目前的狀況

以下即是製作的步驟，不妨參考看看

製作核取方塊

建立條件式（True or False）

關於核選方塊的部分怎麼開啟我就不特別說明，網路其實蠻多教學的（主要必須開啟開發人員選項）

在儲存格中插入核取方塊，並把後面文字刪除

第一個核選方塊完成後，再選擇該核選方塊的儲存格，並直接用拖拉方式完成你想要的項目數量

對某核取方塊點選後按右鍵，選擇「控制項格式」

點選「儲存格連接」裡面的欄位

將「儲存格連接」對應到該儲存格欄位（這裡不強制一定要同一個儲存格，單看你的應用想怎麼放）

當核選打勾的時候，背景會出現True的字眼

當我們取消核選時，則會出現False字眼

由於儲存格出現TRUE或是FALSE有點礙眼，但這幾個字其實是後面函數會用到判別式的條件之一，所以下面我們來維持這個儲存格的條件，但又可以讓他不顯示

使儲存格保有內容，但不顯示出來

對該儲存格按滑鼠右鍵，並選擇「儲存格格式」

直接跳到「自訂」項目，類型（T）:下面的欄位填寫「;;;」（三個分號）後按下「確定」按鈕

如此一來就會發現FALSE的字沒有顯示，但儲存格內還是有顯示

其他的核選方塊也請按照同樣的方式比照辦理

填入必要資料

我分別輸入了項目名稱（項目一～項目五），還有其他名稱

接著做細部項目填寫

這裡分別做細部項目填寫，但這裡並非用手動，而是可以套入公式讓Excel自動計算

「總項目」下面儲存格的公式為：
=COUNTA(D5

)
使用COUNTA的原因是，只要儲存格內非空白，都會被計算到
加上我們總項目幾個欄位，就算幾個數字的意思

「已完成」下面的儲存格公式為：
=COUNTIF(C5

,TRUE)
這裡條件代表意思是，如果有被計算到TRUE的時候則會顯示出有多少數量
※打勾時的狀態代表TRUE

「未完成」下面的儲存格公式為：
=COUNTIF(C5

,FALSE)
這裡條件代表意思是，如果有被計算到FALSE的時候則會顯示出有多少數量
※未打勾時的狀態代表FALSE

製作進度條資料

同樣我們也先完善一些格式

我們再加入進度條需要的文字，注意，進度條最好用好幾個儲存格來顯示，如果只弄一個儲存格看起來會有點短

其中「完成度」下面這個儲存格的百分比數字是怎麼顯示的
其實很簡單，只要「已完成」/「總項目」的數字後去轉百分比就可以
也就是說這裡儲存格輸入
=G3/F3
即可

百分比格式可以在常用的這個位置選擇「百分比」

點選進度條的儲存格後，點選常用頁面裡，「條件式格式設定」→「新增規則」

選擇「根據其值格式化所有儲存格」，裡面的「格式樣式(O):」選擇「資料橫條」

最小值的類型選擇「數值」，值填入0；最大值的類型選擇「數值」，值填入1

完成度100％的時候

完成度60％的時候

當然，你可以依據你的喜好去做美化動作

以上為[Excel]核取方塊+進度條的呈現，希望能對你有所幫助

參考資料：

Excel中制作每日重要事项跟踪清单，完成进度动态可视化！

▶播放 YouTube 影片

影片尚未載入前往 YouTube（備援）

[Cloudflare]使用Cloudflare更改標頭內容

Wed, 21 Feb 2024 01:25:23 GMT

這篇文章和以往的調整Header文章其實沒太大的差異，唯獨就是這裡是用Cloudflare來達成目標
以往調整Header的文章可參考

[OpenLiteSpeed]讓WebPageTest的Security Score達成A+在追求網站速度的站長們，相信對於PageSpeed Insights和WebPageTest都不陌生才對。其中在WebPageTest的測試中有個Security Score的部分，正常來講都沒特別設定的人這邊分數基本上都是F，這裡將分享如何讓Security Score變成A+的設定Cyrians · 站內文章

[cPanel]透過修改.htacess檔案讓Header的Security Score達成A+這篇是「[OpenLiteSpeed]讓WebPageTest的Security Score達成A+」的衍生文章 https://cyrians.com/webpagetest-securityscoreaplus 原本在之前透過的是OpenLiteSpeed Server的WebAdmin功能（圖形介面）就可以完成的Cyrians · 站內文章

首要條件

調整之前，務必要讓主機的IP必須設定為「通過 Proxy 處理」狀態，否則以下的規則都會無法正常動作

域名的部分務必要讓Proxy狀態成為「通過Proxy處理」

加入的語法

進入到網站管理，選擇「規則」項目

進入細項的「轉換規則」後，選擇「修改回應標頭」分頁

點選「建立規則」

加入圖中的規則

這裡我將圖裡的規則文字化讓大家可以直接複製貼上參考

	標頭名稱	值
移除	X-Powered-By
設定靜態	Access-Control-Allow-Origin	*
設定靜態	Content-Security-Policy	upgrade-insecure-requests
設定靜態	Cross-Origin-Opener-Policy	same-origin-allow-popups
設定靜態	Cross-Origin-Resource-Policy	cross-origin
設定靜態	Permissions-Policy	camera=(), microphone=(), geolocation=(), accelerometer=(), gyroscope=(), autoplay=(), magnetometer=(), usb=(), bluetooth=(), fullscreen=(self “https://cdn.cyrians.com”)
設定靜態	Referrer-Policy	strict-origin-when-cross-origin
設定靜態	X-Frame-Options	SAMEORIGIN
設定靜態	X-Permitted-Cross-Domain-Policies	none
設定靜態	X-XSS-Protection	1;mode=block

以上為個人調試出來自己可行的方案，實際上還是得依據網站的型態作調整

剩下的如Strict-Transport-Security、X-Content-Type-Options等的調整，則是可以在其他地方調整

回到主要網站頁面，選擇「SSL/TLS」選項

選擇「邊緣憑證」後，找尋「HTTP強制傳輸（HSTS）」選項後，並按下「變更HSTS設定」按鈕

這裡將「我瞭解」打勾後，再按「下一步」按鈕

這裡按照圖片上的設定，最後按下「儲存」按鈕即可

最後我們來測試看看，我們可以透過Security Headers這個網站來確認剛才設定的結果

最後可得到A+的結果

以上為[Cloudflare]使用Cloudflare更改標頭內容，希望能對你有所幫助