[WordPress] 使用 wordpress 架設官網

WordPress 是一個以 PHP 和 MySQL 為平台的自由開源的部落格軟體和內容管理系統。WordPress 具有外掛程式架構和模板系統。截至 2018 年 4 月，排名前 1000 萬的網站中超過 30.6% 使用 WordPress。WordPress 是最受歡迎的網站內容管理系統。WordPress 是目前網際網路上最流行的部落格系統。☞ Wordpress 處理中文檔名上傳

製作網站，使用 WordPress 與客製化，如何抉擇？整體來說 Wordpress 是利大於弊。若企業不願花數十萬的預算打造網站，又不願意選擇一個將就可以使用的網站，wordpress 整體而言仍是相當方便使用，又易於網站管理及擴充的。☞ 前IBM工程師分析給你聽【Wordpress架站缺點】

Step 1: 確認環境 系統需求 ☞ 建議採用符合以下規格的主機
■ PHP 7.3 或更新版本
■ MySQL 5.6 或更新版本、MariaDB 10.0 或更新版本
■ 已安裝 mod_rewrite 模組的 Nginx 或 Apache
■ 支援 HTTPS

Step 2: 至官網下載WP，並解壓縮放到網站根目錄 下載最新釋出的WordPress ☞ 取得 WordPress

Step 3: 建立 wordpress 的資料庫 安裝文件 ☞ How to install WordPress

Step 4: 安裝 wordpress 安裝文件 ☞ WordPress 安裝

1. 拷貝 wp-config-sample.php，另存新檔為 wp-config.php
2. 修改 wp-config.php：

define('DB_NAME', '資料庫名稱');
define('DB_USER', '資料庫使用者名稱');
define('DB_PASSWORD', '資料庫密碼');
define('DB_HOST', '資料庫主機位址');
define('DB_COLLATE', 'utf8_general_ci');
$table_prefix  = 'wp_'; //資料表前置詞

Step 5: 登入 wordpress 後台 ☞ 安裝 WordPress 後你應該做的 25 件事

wordpress佈景主題檔案所在位置：wp-content/themes  載點1  載點2  載點3

首先，任何情況下你都不要去修改 WordPress 的核心檔案，也就是你下載 WordPress 解壓後，wp-content/ 目錄以外任何地方的「程式碼」都不應該被更改 (wp-config.php 裡的設定可修改，但它就是作為設定用)，因為你改了核心檔案，之後你的網站 WordPress 要升級，就會把你修改的核心檔案都蓋掉，所以這不是一個正確的客製方式。☞ 如何在 WordPress 頁面上寫 PHP 程式碼？快速理解 WP 客製的第一步!

Step 6: 建立子佈景主題

早期的作法是直接修改在佈景主題裡的樣式檔，所以當佈景主題程式更新時，很多朋友會因為麻煩或其他原因選擇不更新。建立子佈景主題，原佈景主題（也稱做父佈景主題）可以隨時跟著佈景主題開發者的更新而更新，不會影響自己所有的修改設定，也易於網站的管理。☞ Child Theme Plugin – 子佈景主題製作外掛程式推薦

關於在 style.css 中使用 @import 的方式來載入父主題的 CSS，官方已經建議不要這樣使用，style.css 會透過 functions.php 來載入。☞ 如何建立 WordPress 的子主題

1.在 /wp-content/themes 底下建立一個新資料夾，使用原佈景主題名稱加上-child為名稱，例如：storefront-child。
2.在「storefront-child」目錄之下新增 style.css 檔案，讓自訂的佈景主題，繼承原佈景主題（parent theme）的樣式，內容為：

/*
Theme Name: Storefront child
Template: storefront
*/

3. 在「storefront-child」目錄之下新增 functions.php 檔案，讓佈景主題的相關 CSS 檔案載入到網站中，內容為：

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

4. 在「storefront-child」目錄之下新增 screenshot.png 檔案，方便在WordPress後台管理佈景主題。
5. 登入 WordPress 管理介面後，到外觀 > 佈景主題，這時就會看見建立好的子佈景主題，啟用它。

參考文件：
☞ 建立子佈景主題
☞ Child Theme（子佈景）自訂佈景主題

Woocommerce 樣式修改參考文件：
☞ Woocommerce content-single-product template override wont work
☞ How to Customize Your WooCommerce Account Page
☞ Override Woocommerce template files in a plugin
☞ How To Customize WooCommerce Shop Page In 5 Minutes Without A Plugin

Step 7: 安裝外掛(主要)

外掛：Rename wp-login.php (啟用安裝數: 10萬+)：更改後台登入網址

使用 WordPress 架站的站長們都知道，要進入WordPress網站管理後台，是在網站網址末端輸入 “wp-admin” 或者 “wp-login.php“，這就造成有心人士想進行後台是相當容易。☞ 網站安全 更改 WordPress登入 網址 – 防止 WordPress後台 被破解!

1.後台> 外掛> 安裝外掛> 搜尋外掛中，下載「 Rename wp-login.php 」並「啟用」它
2.重新命名 wp-login.php

☞ 【WordPress教學】如何更改後台登入網址
☞ [WordPress] 後台登入網址修改(wp-login.php) – 使用 Rename wp-login.php

外掛：Limit Login Attempts Reloaded (啟用安裝數: 1 百萬+)：限制登入WordPress後台次數

Limit Login Attempts 限制 網站登入 次數 封鎖IP 防止 入侵網站 !

外掛：Disable XML-RPC (啟用安裝數: 10萬+)：停用 XML-RPC

1. XML-RPC 服務連線測試工具 ☞ WordPress XML-RPC Validation Service
2. 停用 XML-RPC 服務的方法
方法一：安裝外掛> Disable XML-RPC
方法二：修改functions.php> 增加指令 add_filter('xmlrpc_enabled', '__return_false');

☞ WordPress 如何關閉 XML-RPC 服務，避免資安攻擊風險
☞ 關閉 WordPress 的 XML-RPC 支援，避免可能的資安風險
☞ A Complete Guide on xmlrpc.php in WordPress (What It Is, Security Risks, How to Disable It)
☞ 如何使用xmlrpc.php對WordPress進行暴力破解攻擊
☞ WordFence Security 教學：強大 WordPress 安全性資安外掛（完整設定）

外掛：Antispam Bee (啟用安裝數: 50萬+)：防止垃圾留言

1.後台> 外掛> 安裝外掛> 搜尋外掛中，下載「 Antispam Bee 」並「啟用」它
2.後台> 設定> Antispam Bee> 直接採用預設設定，就可以開始使用了
3.如果想要在後台看見防垃圾信的統計資料，可以勾選 More 選項下的 Statistics on the dashboard 與 Spam counter on the dashboard。
☞ 如何防止垃圾留言

外掛：WP Super Cache (啟用安裝數: 2百萬+)：運用網站快取及預先載入優化網站速度 ★ 建議配合 Autoptimize 一起用

1.後台> 外掛> 安裝外掛> 搜尋外掛中，下載「 WP Super Cache 」並「啟用」它
2.後台> 設定> WP Super Cache
● 簡易模式> 開啟快取> 設定完後記得在下方點選「更新狀態」
● 進階選項> 將「建議選項」全部打開> 設定完後記得在下方點選「更新狀態」
● 進階選項> 過期時間與垃圾回收> 建議的做法是計時器的時間與 Cache 有效時間相同> 變更過期時間
● CDN> 啟用 CDN 支援
● 預先載入> 可以產生已發布頁面的 Cache
3.檢查設定成功
● 檢查網站根目錄中的 wp-config.php 存在：define('WP_CACHE', true);
● 後台> 設定> WP Super Cache> 簡易模式> 測試快取
● 前台> 右鍵> 檢視網頁原始碼> 在 <html> 的下方如果有找到以下文字，就表示 WP Super Cache 已經正常運作了
<!-- Dynamic page generated in ... -->
<!-- Cached page generated by WP-Super-Cache on ... -->
4. 使用測速網站測試一下網站載入速度
Google PageSpeed Insights
GTmetrix
Pingdom
特記
● 進階選項> 接受的檔案名稱和拒絕的 URI
進階選項中也可以指定網站哪些頁面不要 Cache ，或者加入相同規則網址中的共同字串，在外掛中都有說明，設定這裡的選項是為了當要修改特定頁面時，可以暫停該頁面的快取功能，讓變更的內容可以即時反應在網站上。

☞ WP Super Cache 設定教學 – 運用網站快取及預先載入優化網站速度
☞ 如何測試WordPress網站速度
☞ WordPress網站速度很慢怎麼辦？ 10種方法提高網站速度
☞ WordPress 加速！WordPress 網站速度優化方法

外掛：Yoast-SEO (啟用安裝數: 5百萬+)：網站內容 SEO 優化工具，幫助被google搜尋引擎收錄

1.後台> 外掛> 安裝外掛> 搜尋外掛中，下載「 Yoast-SEO 」並「啟用」它
2.後台> 已安裝的外掛> Yoast-SEO> 設定> 特色
3.XML Sitemap> 點選問號> 選擇See the XML sitemap> 可看到自己的XML sitemap的畫面
4.在將自己的Sitemap的網址複製下來→到Search Console頁面→點選Sitemap→由我提交→右上方的「新增/測試」→將自己的Sitemap的網址貼上提交
☞ WordPress架站後如何讓我的網站收錄在搜尋引擎裡？
☞ Yoast SEO 教學 – 只講重點，看完這篇還不會我也是跪了！

外掛：Insert Headers and Footers (啟用安裝數: 1百萬+)：頁首頁尾添加額外程式

1.後台> 外掛> 安裝外掛> 搜尋外掛中，下載「 Insert Headers and Footers 」並「啟用」它
2.後台> 設定> Insert Headers and Footers> 貼在Footer的欄位中

外掛：WPForms (啟用安裝數: 3百萬+)：網站聯絡單

1.後台> 外掛> 安裝外掛> 搜尋外掛中，下載「 WPForms 」並「啟用」它
☞ 5 Best Contact Form Plugins for WordPress
☞ WPForms表單外掛基本使用方式說明Compared
☞ 4 Ways to Create a Contact Form With Multiple Recipients (Step by Step)

設定 reCAPTCHA

1.取得 Site Key 與 Secret Key ☞ Google’s reCAPTCHA landing page
2.點擊「Admin console」> 註冊新網站> 選擇「reCAPTCHA v2」> 提交
3.複製網站金鑰與密鑰
4.後台> WPForms> Settings> reCAPTCHA
└── 選擇 Checkbox reCAPTCHA v2：在申請 Google reCAPTCHA 時，reCAPTCHA v2 類型要選擇「我不是機器人」的核取方塊
└── 選擇 Invisible reCAPTCHA v2： 在申請 Google reCAPTCHA 時，reCAPTCHA v2 類型要選擇「隱形 reCAPTCHA 標記」 Google 將自動判斷進入網站的顧客是否有機會是機器人或有心人士。如果系統判斷到的話會出現 reCAPTCHA 驗證，所以絕大部分的表單填寫是不會出現的喔！
5.貼上網站金鑰與密鑰
6.進到已建立好的WPForms> 將 Google reCAPTCHA 加入表單裡
☞ Google reCAPTCHA 註冊驗證｜顧客登入設定
☞ How to Set Up reCAPTCHA in WPForms
★ 外掛： Really Simple CAPTCHA (啟用安裝數: 70萬+)

(接續) 外掛：WP Mail SMTP by WPForms (啟用安裝數: 1百萬+)：設定SMTP

透過WP Mail SMTP設定來解決在Contact Form 7於WordPress裡無法收發郵件的問題

(新方法 2022/04/14)
1.登入Google帳戶> 安全性> 登入 Google> 兩步驟驗證> 啟用
2.登入Google帳戶> 安全性> 登入 Google> 應用程式密碼> 自訂應用程式> 複製應用程式專用密碼
3.後台> 外掛> 安裝外掛> 搜尋外掛中，下載「 WP Mail SMTP by WPForms 」並「啟用」它
4.後台> WP Mail SMTP> 設定> 郵件程式> 其他 SMTP
└─ 雖然是用 Google 的服務，但是請記得不要選「Gmail」的選項喔
5.後台> WP Mail SMTP> 其他 SMTP> 其他 SMTP> SMTP 密碼：Google 給你的應用程式密碼
☞ 你的 WordPress 收不到信嗎？安裝免費 SMTP 外掛 5 分鐘輕鬆解決。

(舊方法)
1.後台> 外掛> 安裝外掛> 搜尋外掛中，下載「 WP Mail SMTP by WPForms 」並「啟用」它
2.後台> WP Mail SMTP> 設定
3.後台> WP Mail SMTP> 電子郵件測試
4.登入Gmail信箱，確認是否有收到Google發的「已封鎖登入要求」的警告信。

5.Gmail啟用低安全性應用程式的存取權限 ☞ 低安全性應用程式存取權

6.修改完後，Gmail系統會再發一封警告信「低安全性應用程式存取權設定已啟用」

7.授權存取您的 Google 帳戶 ☞ DisplayUnlockCaptcha

8.後台> WP Mail SMTP> 電子郵件測試發送成功
9.接著你會在Gmail裡收到從WP Mail SMTP發過來的信
☞ [WordPress][架站] 08. 透過設定SMTP來利用Gmail寄送Email(包含微軟Outlook, Hotmail 替代方案)
☞ WordPress外掛表單與電子郵件結合
☞ 低安全性應用程式和您的 Google 帳戶

外掛：Smush (啟用安裝數: 1百萬+)：圖像壓縮

1.後台> 外掛> 安裝外掛> 搜尋外掛中，下載「 Smush Image Compression and Optimization 」並「啟用」它
☞ [WordPress] 用 WP Smush 自動將上傳的圖片瘦身

外掛：Woocommerce (啟用安裝數: 5百萬+)：購物車系統

1. 設定完成的購物車模組，包括：商店、購物車、結帳、我的帳號

• 商店頁面：https://mystore.com/shop
• 購物車頁面：https://mystore.com/cart
• 結帳頁面：https://mystore.com/checkout
• 我的帳號頁面：https://mystore.com/my-account

2. 啟用帳號註冊功能：WooCommerce> 設定> 帳號與隱私權>
3. 啟用帳號之後，會員註冊的資料會出現在：使用者> 使用者角色=客戶
4. 修改會員中心項目：wp-content/plugins/woocommerce/includes/wc-account-functions.php
5. 串接綠界金流：安裝綠界金流外掛→ WooCommerce> 設定> 啟用綠界→ 輸入特店編號、金鑰、向量
★ 外掛： ECPay Logistics for WooCommerce (啟用安裝數: 2千+)
★ 外掛： ECPay Payment for WooCommerce (啟用安裝數: 3千+)
★ 外掛： WooCommerce LINEPay Gateway
★ 外掛： WooCommerce Advanced Free Shipping (啟用安裝數: 4萬+)

☞ 修改我的帳號內容
☞ 跟著我的步驟走，阿公也會開設網路商店｜Woocommerce設定教學
☞ 【自架網站教學】看完連阿公都知道怎麼自架購物網站-金物流設定
☞ WooCommerce 購物車 ECPAY 金流模組
☞ WooCommerce 購物車 ECPAY 物流模組
☞ [WooCommerce] 結帳頁面設定欄位必填、非必填、隱藏或是移除欄位的方法

(接續) 外掛：Checkout Field Editor (Checkout Manager) for WooCommerce (啟用安裝數: 20萬+)：改變 WooCommerce 制定的訂單填寫表單

☞ WooCommerce 結帳欄位客製大全(陸續新增) ★
☞ Billing and Shipping Address Fields
☞ Reorder Checkout Fields in WooCommerce
☞ My Account Fields
☞ Remove phone from billing/shipping fields everywhere in Woocommerce?

(接續) 外掛：WP Product Feed Manager (啟用安裝數: 1萬+)：google購物廣告動態饋給

☞ Google Shopping（購物廣告）操作教程
☞ Google購物廣告設定

  Step 8: 安裝外掛(次要)

外掛：Blogger 內容匯入程式 (WordPress Importer)：把 Blogger 的資料匯入 WordPress

1.後台> 工具> 匯入程式> Blogger> 「立即安裝」並「執行匯入程式」

外掛：Advanced Editor Tools (之前的 TinyMCE Advanced) (啟用安裝數: 2百萬+)：進階文章編輯器

在WordPress發表文章的時候，會不會覺得「所見即所得編輯器」按鈕好像少了什麼，怎沒有字型大小、插入表格、分割線、日期與時間…等。只要安裝 「 TinyMCE Advanced 」就可以輕鬆新增這些功能按鈕，免動原始碼。

用不慣區塊編輯器，可以安裝 TinyMCE Advanced，但是它功能又顯得不足，所以可以再加裝 ★ 外掛：「 Classic Editor 」 (傳統編輯器) (啟用安裝數: 5 百萬+)

20220609補充：外掛：「 Classic Widgets 」 (傳統小工具)

外掛：Elementor Website Builder (啟用安裝數: 5百萬+)：WordPress 最棒的頁面編輯器

☞ Elementor教學 ：WordPress 最棒的頁面編輯器（完整指南）

外掛：SiteOrigin Widgets Bundle (啟用安裝數: 1百萬+)：版面配置

網頁設計工具

外掛：SiteOrigin Page Builder (啟用安裝數: 1百萬+)：頁面佈局

網頁設計工具

外掛：AddToAny (啟用安裝數: 50萬+)：社群外掛

1.後台> 外掛> 安裝外掛> 搜尋外掛中，下載「 AddToAny 」並「啟用」它
2.後台> 設定> AddToAny Share Settings

☞ WordPress外掛推薦 – 超好用社群外掛，快速安裝Line分享按鈕！

外掛：Fotorama (啟用安裝數: 5千+)：照片輪播

外掛：Tabby Responsive Tabs (啟用安裝數: 3萬+)：做出可以自適應的頁簽，並且頁簽裡的內容是放商品分類的商品

外掛安裝好之後，搭配語法：
[tabby title="頁簽名"]
[product_category category = "商品分類名" per_page = "50" columns = "4" orderby = "..." order = "ASC"]
[tabbyending]

09／

  Step 9: 其他問題

如何在WordPress更新和安裝外掛時，禁用FTP連線

編輯WordPress根目錄下的「wp-config.php」檔案，添加：define('FS_METHOD', 'direct');

☞ 如何在WordPress更新和安裝外掛時，使用或是禁用FTP連線？
☞ 「教學」WordPress 繞過 FTP 自動升級外掛與佈景主題

Unknown: file created in the system's temporary directory

請查看 php.ini 配置文件記載的「upload_tmp_dir 臨時文件存放目錄」，確保要保存內容的目錄是可寫的。

☞ Notice: Unknown: file created in the system's temporary directory in Unknown on line 0
☞ 文件上傳報錯：Unknown: file created in the system's temporary directory

資料上傳 FTP，安裝外掛失敗: 無法建立目錄

wp-content 資料夾需要有許可權。

移除WordPress 網站不必要的 meta-data

1.後台> 外掛> 佈景主題編輯器>
2.把這段代碼插入到主題的 functions.php 文件下，就可以清除 WordPress 頭部很多的冗余信息。
3.修改完成後記得要「更新檔案」。
4.檢查是否更新成功：前台> 右鍵> 檢視網頁原始碼> 搜尋 「<meta name="generator" content="WordPress」，找不到就是更新 OK

remove_action( 'wp_head', 'wp_generator' );   //WordPress版本信息。
remove_action( 'wp_head', 'parent_post_rel_link' );  //最后文章的url
remove_action( 'wp_head', 'start_post_rel_link' );  //最前文章的url
remove_action( 'wp_head', 'adjacent_posts_rel_link' );  //上下
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head');//上下文章的urlremove_action( 'wp_head', 'feed_links_extra', 3 );//去除評論feed
remove_action( 'wp_head', 'feed_links' );  //去除文章的feed
remove_action( 'wp_head', 'rsd_link' );  //針對Blog的離線編輯器開放接口所使用
remove_action( 'wp_head', 'wlwmanifest_link' ); //如上
remove_action( 'wp_head', 'index_rel_link' );  //當前頁面的url
remove_action( 'wp_head', 'wp_shortlink_wp_head' );  //短地址
remove_action( 'wp_head', 'rel_canonical');
wp_deregister_script('l10n');
remove_filter( 'the_content', 'wptexturize');  //禁用半角符號自動轉換為全角
remove_action( 'wp_head', array($wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style'));

☞ 移除WordPress的 wp_head 中多餘信息
☞ 安裝 WordPress 後你應該做的 25 件事
☞ WordPress PHP 教學 網頁修改及網站設定
☞ [wordpress技巧]優化wp_head 中無關緊要的代碼

Add Expires headers 過期時間的header報文

這個文件過期時間，其實就是通過header報文來指定特定類型的文件在瀏覽器中的緩存時間。有些文件(例如樣式表中調用的背景圖片和文章中調用的圖片)其實在很長一段時間內我們都不會對它們有什麼改變，這類文件可以設置非常長的緩存時間，這樣瀏覽器以後就不需要再從服務器下載這些文件而直接從緩存中讀取，從而大大加速網站的載入速度。

<IfModule mod_expires.c>
  ExpiresActive On
  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

# BEGIN Cache-Control Headers
<IfModule mod_expires.c>

  <IfModule mod_headers.c>

    <filesMatch "\.(ico|jpe?g|png|gif|swf)$">

      Header append Cache-Control "public"  

    </filesMatch>

    <filesMatch "\.(css)$">

      Header append Cache-Control "public"

    </filesMatch>

    <filesMatch "\.(js)$">

      Header append Cache-Control "private"

  </filesMatch>

    <filesMatch "\.(x?html?|php)$">

      Header append Cache-Control "private, must-revalidate"

    </filesMatch>

  </IfModule>

</IfModule>

☞ How to Add Expires Headers in WordPress
☞ YSlow 和 Page Speed 比較

啟動 Gzip 網頁壓縮

伺服器開啟 GZip 網頁壓縮功能之後，會將輸出到瀏覽網站者的數據進行壓縮處理，以提高網站瀏覽速度。
1. 測試網站的 GZip 壓縮功能是否有正常開啟成功 Gzip Test for Web Page Compression、GiftofSpeed.com、Testing compression
2. 利用 .htaccess 啟動 Gzip 網頁壓縮

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

或是你也可以使用以下程式碼規則啟用 GZIP 資料壓縮功能：

<IfModule mod_deflate.c>
  # compress text, html, javascript, css, xml:
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon

  AddType x-font/otf .otf
  AddType x-font/ttf .ttf
  AddType x-font/eot .eot
  AddType x-font/woff .woff
  AddType image/x-icon .ico
  AddType image/png .png
</IfModule>

☞ 如何快速在 WordPress 中啟用 GZIP 資料壓縮功能

製作部落格列表

☞ https://www.wpbeginner.com/wp-tutorials/how-to-create-a-separate-page-for-blog-posts-in-wordpress/

網址異動，從 A 網址變成 B 網址，從 http 變成 https

1.後台> 設定> 一般> 網址
2.phpMyAdmin> 資料庫> 搜尋 **先備份資料庫，再開始修改
3.語法範例：UPDATE wp_posts SET post_content=REPLACE(post_content,'舊網址','新網址');
4.從 A 網址變成 B 網址，影響表格：wp_posts、wp_options、wp_postmeta、wp_wc_admin_notes、wp_wc_admin_note_actions
5.google console> 從 A 網址變成 B 網址→新建資源+變更網址；從 http 變成 https→新建資源
6.google Analytics
☞ WordPress 網址異動、後台網址輸入錯誤資料庫修正方法
☞ [WordPress]使用SQL語法一次取代/替換/變更/更換不安全網址，部落格改網址也適用

WordPress版本更新

1. 在安裝好WordPress後，務必定期確認是否有新的版本需要更新，請勿安裝後就都不維護，這樣非常危險，因為這樣若有漏洞沒有修補，網站可能被破壞、被用於攻擊其他網站或是放置釣魚網頁..等等不法用途。
2. 在開始網站升級以前，第一個要做的工作就是備份。
3. 透過主機商提供的管理介面：(1)使用「檔案管理員」壓縮檔案後，下載〝所有的檔案〞備份到本機上。(2)使用「phpMyAdmin」匯出功能，下載〝完整的資料庫〞備份到本機上。
☞ WordPress Upgrade Guide – 升級步驟說明
☞ 如何更新WordPress版本?

如何為WordPress引入其他的 js檔 or css檔？

1. 後台> 外觀> 佈景主題編輯器> functions.php
2. wp_enqueue_style() 與 wp_enqueue_script()
☞ How to Properly Modify JavaScript Files in a Parent Theme
☞ WORDPRESS ENQUEUE SCRIPT – 如何置入自定義腳本

客製化留言迴響信件通知其他收件人

1.後台> 外掛> 佈景主題編輯器>
2.把這段代碼插入到主題的 functions.php 文件下，就可以通知多個 mail address。
3.修改完成後記得要「更新檔案」。

function mxp_comment_moderation_recipients($emails, $comment_id) {
    // 以此類推新增收件人
    $emails = array('user1@example.com', 'user2@example.com', 'user3@example.com');
    return $emails;
}
add_filter('comment_moderation_recipients', 'mxp_comment_moderation_recipients', 11, 2);
add_filter('comment_notification_recipients', 'mxp_comment_moderation_recipients', 11, 2);
             

☞ [WordPress] 客製化留言迴響信件通知其他收件人

  Google Search Console 調教

01／ 網頁不適合透過行動裝置瀏覽

1. 修改 robots.txt ，新增規則

Allow: /*.js*
Allow: /*.css*
Allow: /wp-content/*.js*
Allow: /wp-content/*.css*
Allow: /wp-includes/*.js*
Allow: /wp-includes/*.css*
Allow: /wp-content/plugins/*.css*
Allow: /wp-content/plugins/*.js*
Allow: /wp-content/plugins/*ajax*
Allow: /wp-content/themes/*.css*
Allow: /wp-content/themes/*.js*
Allow: /wp-content/themes/*ajax*
Allow: /wp-content/plugins/*/images/
Allow: /wp-content/uploads/
Disallow: /xmlrpc.php
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/
          

2. 使用 行動裝置相容性測試 做修改後測試。

☞ Discuz! 您的網頁不適合使用行動裝置瀏覽
☞ [筆記]解決Google Search Console的行動裝置可用性問題

---

Image Source

☞ Wordpress 處理中文檔名上傳