如果在 WordPress 中撰寫一些程式相關的內容，通常我們都會希望程式碼的文字格式和一般文章會稍微有點不一樣，讓程式碼的閱讀性更佳。以本網站來說，目前使用了 Enlighter Sourcecode 這個外掛套件來存放程式碼的內容。不過當網站在小螢幕的裝置上閱讀的時候，會發現預設的格式是不會出現水平卷軸的，而是以斷行的方式呈現，這對程式碼來說在閱讀上實在有些的不方便。 ▍ 只需調整 CSS 屬性讓水平卷軸自動隱藏或出現，不讓畫面切斷程式碼 調整的方法很簡單，只需要修改 .enlighter-default 的 CSS Code： 調整 overflow 和 white-space 這兩個屬性，並且其中 !important 可以視情況選擇要不要加入，調整完後就會自動視螢幕大小出現水平卷軸了！ Reference Horizontal scroll on small screen | EnlighterJS / Plugin.WordPress Copyright announcement:Photo by Rishabh Pammi on Unsplash
架設網站的步驟其實非常容易，概念也淺顯易懂，但是細節卻有點小複雜。整個教學系列是使用 WordPress Bitnami 把網站架設在 Google Cloud Platform (GCP) 伺服器上。架設網站可以歸納為八個步驟： 在 GCP 上佈署 WordPress Bitnami (教學一) → 安裝 gcloud SDK (教學二) → 架設 FTP (教學二) → 更改預設密碼 (教學三) → 設定靜態 IP (教學三) → 設定 Domain Name (教學四) → 設定 SSL 加密連線 (教學五) → 建立子主題修改網站外觀樣式 (教學七) 本篇作為一個目錄將所有的 WordPress 教學文章整理起來，方便讀者直接參考需要的文章。 WordPress 快速架站指南 如果讀者已經熟悉 Linux Debian 指令、Apache 伺服器參數設定、WordPress...
本篇介紹關於 WordPress Bitnami 的基本檔案及目錄的結構簡介，還有預設的檔案權限設定。檔案權限對於伺服器是一個非常重要的設定，它攸關了網站是否能正常運行與檔案能否存取的設定，如果在架設網站的過程當中遇到存取權限錯誤等問題，或是工具程式無法正確執行等等，很有可能就會是權限設定出錯造成的。 WordPress 檔案結構 Bitnami 系統檔案結構 使用 Bitnami 部署的 WordPress 網站，所有的檔案、應用程式、資料庫及 Apache 伺服器都會建立在 /opt/bitnami 這個目錄之下： WordPress 根目錄：apps/wordpress/ Apache 伺服器、 MySQL 資料庫及相關工具程式：apache2/, mysql/, postgresql/, apache-tomcat/ 憑證及相關檔案：licenses/ 關於程式語言和套件：php/, python/, ruby/, tcl/ 指令集 (common library)：common/ WordPress 根目錄檔案結構 根目錄名稱預設是 wordpress (上方紅字)，而 WordPress 根目錄的主要檔案結構是： 網站根目錄及內容：apps/wordpress/htdocs/ 參數設定：apps/wordpress/conf/ 工具程式：apps/wordpress/bnconfig 移除整個應用程式 (網站)：apps/wordpress/uninstall 網站根目錄 (htdocs) 的檔案結構 wp-admin：關於 admin 的工具與程式，主程式是 admin.php。例如與資料庫的連線、後台介面、前端呈現及主要核心程式等。 wp-content：佈景主題...
WordPress 已經有很多免費的主題可以直接套版使用，甚至還有付費的主題提供更完整、更美觀的外觀介面可以套用，直接到 WP 的後台就可以設定。不過通常我們還是會希望套用了現成的主題樣式之後，我們還能自己調整部分的樣式。本篇會先簡介佈景主題的檔案結構，再告訴大家直接修改外觀樣式的方式及如何建立子主題 (child theme)。另外還有一些其它常見的網站外觀介面調整，如刪除 Bitnami Info Page Banner。 佈景主題的檔案結構 在前一篇的檔案結構簡介中有稍微提過佈景主題的檔案存放在 htdocs/wp-content/themes/ 的目錄下，每個主題以各別的資料夾分別儲存。如果你想要自己完全建立一個全新的佈景主題或者你想要詳細的手動調整網站每個位置的樣式設定，那麼你可能得了解整個版型 (template) 的結構及名稱，還有所有的程式及樣式設定。下面有幾個說明文件可以讀一下： 樣式主題的完整說明文件：Theme Handbook | WordPress.Org 網站結構：Site Architecture 1.5 | WordPress Codex 頁面及版型結構：Stepping into Templates | WordPress Codex 開發者說明文件：WordPress Codex 開發者說明文件：Developer Resources | WordPress.Org Understanding the WordPress Theme Structure Understanding WordPress Template Hierarchy for Faster Development 我們假設你沒有要完整開發一個新的佈景主題，只是要套用現有的版型再調整成自己想要的樣子。所以我們只對佈景主題的檔案結構做簡單的介紹，讓你知道調整外觀樣式應該修改哪個檔案，至於網站的版型結構及名稱就自己用像是 Chrome 開發者工具...
本篇快速架站教學是給已經熟悉 GCP、Linux 指令、Apache Server 和 WordPress 的朋友一個快速查詢指令與設定方式的文件，省略所有細節的解說直接把指令和參數一個步驟、一個步驟詳列出來。也可以搭配教學系列的文章閱讀，查詢詳細的說明。 環境說明與範例假設 在所有的教學文章當中，我們都是用 WordPress Bitnami 架設網站，目前 (2019.09) 的作業系統是 Linux Debian 9，並且使用 Google Cloud Platform (GCP) 的伺服器架設，目前有第一年免費試用的額度可以使用。主要架站的步驟大約是： 建立 GCP 專案並佈署 WordPress Bitnami，並安裝 Google Cloud SDK 以 SSH 連線的方式控制遠端伺服器 架設 FTP Server 更改 MySQL Administrator 密碼、設定外部靜態 IP 位址 設定 Domain Name 及 Apache Server 參數 申請 SSL 憑證，建立網站加密連線 步驟一：使用...
設定完各網站的網址之後，接著就要來設定 SSL 連線。他的設定方式與單一 WordPress 的設定方式幾乎相同，關於 SSL 的詳細說明可以參考 WordPress / 架站教學五：設定 SSL 加密連線，讓網站連線更安全 (以Apache為例) ，本篇就不再多做說明。 申請 SSL 憑證 本篇教學是用免費的 Let’s Encrypt 申請 SSL 憑證。 ▍安裝 Lego Client 下載 Lego 安裝檔，放在 /tmp 當中。並以 ls 指令確認下載回來的版本，像我下載的是 lego_v3.0.2_linux_amd64.tar.gz。 記得把 X.Y.Z 換成你所下載的版本、解壓縮，建立資料夾並將 Lego 移過去。 ▍停用 Apache server ▍產生密鑰並向 Let’s Encrypt 申請憑證 將 EMAIL-ADDRESS 改成你的 email。將 DOMAIN 改成你要申請的網址，可以同時申請多個 domains，以--domains="DOMAIN" 作為參數放進去即可。Lego...
架設好第二個網站之後，預設是用子目錄的方式連結到網站。到底該用子網域還是子目錄作為新網站的網址好，這會考量到 SEO、品牌經營、網站結構或甚至個人偏好等眾多因素。另外，SSL 加密連線也是現在網站必備的安全性設定。如果有看過 WordPress 系列的架站教學，我提過好多次由於 Bitnami 對系統的優化及模組化管理的考量，讓整個 Apache server 的參數設定疊床架屋，變得非常複雜。接下來兩篇教學會告訴你如何正確的設定 domain name 和 SSL 連線，步驟其實非常簡單，只是當初我花了非常多的時間爬了很多文件和參考資料，try and error 最後才成功的設定。 網站的 Domain Name 設定，採用子網域 設定 domain name 主要只有四個步驟：取消預設 prefix 模式 → 引入各網站的 virtual host 參數檔案 → 設定個網站 virtual host 參數 → 更新 WordPress 參數及資料庫 環境說明 伺服器架設在 Google Cloud Platform (GCP) 使用 WordPress Bitnami 部署 網站根目錄位置：主站：/opt/bitnami/apps/wordpress副站：/opt/bitnami/apps/newblog Domain...
如果你想要架設兩個甚至更多個 WordPress 網站，有 Multiple WordPress 和 WordPress Multisite 兩種選擇。本篇建議使用 Multiple WordPress 架設多個 WP 網站，以下會先稍微比較一下兩種版本的差異，接著教學 Multiple WordPress 的安裝方法，以 Bitnami 的版本部署在 GCP 上為例。 Multiple WordPress 和 WordPress Multisite 的差異 Multiple WordPress 和 WordPress Multisite 雖然字長得很像，但由上圖應該可以清楚的看出兩種網站截然不同的結構。 WordPress，原生 WP 的版本之一 首先先提一下 WordPress Multisite (右邊)，如果你上網搜尋架設多個 WordPress 肯定會找到很多關於 Multisite WordPress 的資訊，那是因為在原生的 WordPress 當中分為一般的 (Single) WordPress 和 WordPress Multisite 兩種版本。Single WordPres...
前面有提到關於 WordPress 網站連線有兩件重要的事，一是 domain name 網址的導引，這在前一篇已經談過。本篇要來談另外一個重要的事情，那就是網站的安全性。 SSL 憑證與 https 加密連線 早期的 http 連線是瀏覽器存取網站的通訊協定，最早期是在 1898 年由歐洲核子研究組織 (CERN) 所提出，在當時這樣的通訊協定已經可以滿足通訊的需要。http 它是一個沒有經過加密的明文通訊傳輸，隨著網路的發展以及駭客們的鼓勵 ?! 安全性的問題日漸被重視。 明文通訊的資安風險非常的高，因為你無法得知和你通訊的人 (伺服器) 是不是你想像中應該的那個人？而伺服器也無法得知目前的 client 端是否是可以信任的那個人？就算雙方身份都正確，亦無法確認你們兩個之間的通訊是否有被擷取、竄改、攔截。所以 https 就這麼誕生啦～ https 的全文是 HyperText Transfer Protocol Secure，安全超文本通訊協定。和原始的 http 不同的地方是，它透過雙方的認證 (handshake，交握) 過程，確認彼此的身份，並藉由 SSL 或 TSL 憑證加解密通訊內容。 所以簡單來說，申請了一份 SSL 憑證就能讓伺服器以 https 的方式通訊，讓網站的連線更加安全。 SSL 連線的基本流程概述 在建立 SSL 連線前，首先要先知道一個重要的角色以及幾個檔案： CA (Certificate Authority，憑證簽發機構) CRT 憑證 (也就是...
關於連線到我們網站的網址，有兩件重要的事情要設定：指定 Domain Name和設定安全的 SSL 連線 (下一篇)。 本篇前半段花了一些篇幅簡單介紹了 domain name 和 DNS 的運作方式和基本需要知道的概念，如果讀者已經對這部分熟悉或是就想直接查詢設定方式可以直接跳到 指定 Domain Name 給本地端 server 這一節。 另外，架站教學系列是針對單一 WordPress Bitnami 的教學，多站 (Multisite WordPress) 的設定會遠比單一網站複雜得多，可以參考多站教學系列文章。 Domain Name 簡介 在網路的世界當中 IP 位址就好像是每個裝置的地址，但那是給電腦看的，要人類記得一長串的數字 xxx.xx.xx.xx 實在是不容易也不好辨識，所以才有了 Domain Name 的出現。Domain name 就像我們常看到的網址，通常是由一個 domain 加上尾綴組成，像是 .com, .org, .com.tw, .co.uk 等等。 以這個網站為例，charlestw.com 就是我的 domain name。那麼前面的 note 呢？它就是 sub domain (子網域)。在註冊網域名稱的時候，只會註冊後面的...
