WordPress / 架站教學四:設定 Domain Name 及 Apache 參數 (單一WordPress)

WordPress / 架站教學四:設定 Domain Name 及 Apache 參數 (單一WordPress)

關於連線到我們網站的網址,有兩件重要的事情要設定:指定 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 (子網域)。在註冊網域名稱的時候,只會註冊後面的...

WordPress / 架站教學三:更改 MySQL Administrator 密碼、設定外部靜態 IP 位址

WordPress / 架站教學三:更改 MySQL Administrator 密碼、設定外部靜態 IP 位址

這一篇要討論的是關於一些安全性相關的設定。在前兩篇當中我們已經架設好我們的 WordPress 網站,不過看一下 GCP 的控制面板,還是有一些提示建議我們去做的:更改暫時性的密碼、設定外部的靜態 IP 位址。 更改 MySQL Administrator 的密碼 這裡指的暫時性的密碼,並不是我們前面更改過的 WordPress 預設 user 這個使用者的密碼,而是這個 server 的 root 密碼,也就是 MySQL Administrator 的密碼,預設也是面板上的那一組 Admin password (Temporary)。 在 Bitnami 建立的環境下,很方面的是很多常用的功能都已經被寫成 script 腳本,我們只需要執行腳本、加入參數,就能完成原本麻煩的步驟。根據官方文件的說明,更改 root 密碼只需執行一個腳本即可。 ▍ 首先我們先用 SSH 連上主機,並輸入以下指令: 前面的路徑是 Bitnami stack 的安裝路徑,如果你沒有特別更改過,上面這就是預設的路徑。後面的 theNewPasswd 則是新的密碼,這邊替換成你自己的新密碼。 按下 Enter 之後必須再輸入一次原始的密碼,root 密碼就更改完成啦! 關於更改 root 密碼的詳細說明可以參考官方文件:Modify the MySQL Administrator Password...

WordPress / 搬家教學:一個按鍵幫網站搬家,使用 All-in-One Migration

WordPress / 搬家教學:一個按鍵幫網站搬家,使用 All-in-One Migration

幫整個網站搬家其實是一件非常繁雜的一件事情,除了搬移 server 上的那些前後端檔案之外,還有整個 Database 的搬移。這中間還牽扯到 IP 位置的更改、domain name 映射、相對目錄的設定等等。即便是老手也有可能不小心就破壞到了原始資料,輕則要花很多的時間 debug,重則直接造成不能挽救的慘劇。 除了記得在搬家之前做備份好之外,還好 WordPress 有提供內建的搬家工具,也有人提供搬家的 Plugin 可以使用,讓網站搬家這件事變得非常容易。 目前比較多人使用的工具有 WordPress 內建的 Export & Import 工具、Duplicaotr 和 All-in-One Migration 這兩個 Plugin。WordPress 內建的輸出/輸入工具非常好用,可以把大部分的文章內容搬到新的網站去,不過他沒辦法把整個網站一模模一樣樣的重現,只能算是幫內容複製貼上而已。 本篇文章要使用的是 All-in-One Migration,它的使用方式非常簡單,只需要幾個按鍵就能完成。目前它的免費版在輸出/備份功能沒有任何限制,不過在輸入功能有檔案大小的限制,官方最大可以支援到 512 MB。 步驟一:安裝 All-in-One Migration 並提升檔案上限 1. 安裝 Plugin 在本文撰寫的時候,Bitnami 版本的 WordPress 已經有先預設安裝 All-in-One Migration,你只需要在 Plugin 設定當中啟用他就可以了。如果沒有的話,就去搜尋此一套件安裝,啟用它之後就會在左側面板看到選項。 記得新舊網站都要安裝喔!舊網站要用來輸出、新網站要用來輸入。 2. 增加免費版的檔案大小限制 就像文章開頭說的,免費版的輸出/備份功能使沒有檔案大小的限制,但如果你要將你備份好的網站整個輸入到另一個 server 上,他預設只有...

WordPress / 移除 Bitnami 圖示

WordPress / 移除 Bitnami 圖示

用 WordPress Bitnami 架設的網站預設右下角都會有一個 Bitnami 的圖示,它叫做 Bitnami Info Page Banner。點擊它會進入 Bitnami 的說明文件,告訴你一些實用的功能,不過在那邊顯然是有點礙眼。好在的是,Bitnami 也沒有這麼霸道,它是能直接下個指令移除的。 移除 Bitnami Info Page Banner 首先,要先用 SSH 登入我們的 server。如果還不知道怎麼登入的話,請參考這篇WordPress / 架站教學二:透過 SSH 連線遠端控制 GCP 並設定 FTP 伺服器 (使用 WordPress Bitnami)。 登入主機之後,輸入下列指令執行 bnconfig : 紅字的部分是 WordPress 的根目錄位置,這是預設的位置。如果你是直接在 Marketplace 安裝 WordPress Bitnami 那麼就會是這個目錄。 參數 –disable_banner 設定 Bitnami Info Page Banner 是否要顯示出來,預設是 0 會顯示。我們把它設定為...

CSS / margin 邊界重疊

CSS / margin 邊界重疊

如果你對你的網站有複雜的 CSS 設定時,你可能會發現一種狀況,就是前後兩個 block 元件的邊界會有重疊的狀況。前一個元件的下邊界 (margin-bottom) 會和後一個元件的上邊界 (margin-top) 重疊,只會保留兩個之中較大的那一個,這就稱之為邊界重疊 (margin collapsing)。 不過有兩種例外狀況,當元件有設定 float 或 position: absolute 屬性,就不會產生邊界重疊的現象。 會產生邊界重疊的狀況 ▍ 同一層的元件相鄰 兩個位在同一層的 block 元件相鄰就會產生邊界重疊,margin 只會取其中最大的一邊。就像下面的範例,前後兩個段落之間的邊界最後只會有 40px。 <p style="margin-bottom: 16px">First element</p> <p style="margin-top: 40px">Second element</p> ▍ 父元素的邊界與第一個/最後一個子元素的邊界重疊 當子元素的邊界與父元素的邊界重疊時,依然只會取最大的邊界。下面的範例當中,段落 (p) 是區塊 (div) 的子元素,父子元素間的上下邊界都有邊界重疊的情況。最終上邊界取子元素的 20px、下邊界取父元素的 80px。 <div style="margin-top: 15px; margin-bottom: 80px;"> <p style="margin-top: 20px; margin-bottom: 20px;"> this parameter...

Design / 免費照片、圖片、icon 分享,可用於平面、網頁、UI 設計 (2019.08更新)

Design / 免費照片、圖片、icon 分享,可用於平面、網頁、UI 設計 (2019.08更新)

▍照片、圖片庫 Unsplash 圖片、照片 Pexels 照片、影片 ▍UI 設計 Flaticon 向量 icon ▍字型 Google Fonts 各國語言字型 ▍綜合素材庫 Envatoelements 圖片、照片、影片、音樂、字體、簡報樣板、WordPress 主題 Freepik 向量圖檔、照片、圖片、向量 icon、平面設計樣板 Copyright announcement:the featured image: Photo by Jeff Sheldon on Unsplash

WordPress /  錯誤:Update Failed: Could not create directory.

WordPress / 錯誤:Update Failed: Could not create directory.

如果在安裝或更新 WordPress Plugin 的時候遇到這樣的錯誤:Update Failed: Could not create directory. 很有可能就是檔案權限設定錯誤造成的問題。 ▍ WordPress Bitnami 的預設檔案權限設定是: 所有的檔案及資料夾都被 bitnami 這個使用者所擁有,且都隸屬於 daemon 這個群組。 所有資料夾存取權限都是 775  所有檔案的存取權限都是 664 wp-config.php 這個檔案的存取權限是 640 ▍ 更改檔案存取權限的設定可以參考這篇文章:WordPress / WordPress Bitnami 正確的檔案權限設定 Copyright announcement:the featured image: Photo by Mr Cup / Fabien Barral on Unsplash

WordPress / WordPress Bitnami 正確的檔案權限設定

WordPress / WordPress Bitnami 正確的檔案權限設定

WordPress的檔案權限設定包含兩個部分:一是網站的根目錄 htdocs、二是 htdocs 以外的其他 WordPress 檔案。 檔案權限是伺服器當中非常重要的設定,它會牽涉到哪個使用者可以存取哪個檔案。沒設定好輕則網站無法瀏覽,重則資料被竊取、網站毀損無法恢復。當我們在架設網站的過程當中,有時可能會出現存取錯誤或權限錯誤,經常都是因為檔案權限的設定錯誤造成的。 網站根目錄 htdocs 的權限設定 htdocs 這個資料夾底下的權限設定比較單純,根據 Bitnami 的文件表示,所有 Bitnami 的應用程式 (包含 WordPress) 的預設權限設定如下: 所有的檔案及資料夾都被 bitnami 這個使用者所擁有,且都隸屬於 daemon 這個群組。 所有資料夾存取權限都是 775 所有檔案的存取權限都是 664 wp-config.php 這個檔案的存取權限是 640 ▍ 權限設定指令 要將所有檔案都改成這確的權限設定,只需要下列幾個步驟: 1. 首先先移到 htdocs 的目錄當中 2. 更改所有檔案的擁有者及存取權限 3. 更改 wp-config.php 的存取權限 其他的 WordPress 檔案權限設定 在 htdocs 以外的檔案權限設定比較複雜,其中牽涉到有些程式必須 root user 才能存取等,在此就不多做解說,直接附上所有檔案的預設權限: /wordpress...

CSS / 變更選取文字的背景顏色

CSS / 變更選取文字的背景顏色

在 CSS 當中有定義一些偽元素選擇器 (pseudo element selector),他是用兩個冒號 :: 表示指定元素的特定的狀態。例如下面這個 code 就表示所有段落 (p) 的第一行 (first-line)。 那麼要怎麼改變被選取文字的背景色呢?只需要使用 ::selection 這個偽元素就可以囉! 假設我們要改變所有段落中被選取的文字的背景色: 下面這段文字就應用了上面這段 CSS 屬性,被選取的文字背景色會是 #0ABAB5 這個顏色 (tiffany blue): Our deepest fear A Return to Love: Reflections on the Principles of “A Course in Miracles” — Marianne Williamson (1992) Our deepest fear is not that we are inadequate. Our...

CSS / 幫表格加入橫向捲軸,讓超出螢幕寬度的表格不會擠成一團

CSS / 幫表格加入橫向捲軸,讓超出螢幕寬度的表格不會擠成一團

我們在網頁當中加入表格的時候常常會遇上一個問題,就是當表格的寬度已經超過螢幕的寬度要怎麼辦?尤其是手機版的頁面更是容易遇上這樣的問題。還記得 CSS 有一個 overflow 的屬性,但只設定這個屬性是不夠的,還需要對表格的加入以下屬性: 首先要先讓 table 這個物件變成 block 物件,然後在水平方向的 overflow 讓它自動判斷是否有超出寬度的內容,自動加入水平捲軸。 最後是 white-space: nowrap 這個屬性,讓文字不會因為寬度自動斷行,除非內容真的有斷行 <br> 存在。 這是另一篇文章 Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表 有用到表格捲軸的範例: ▍ 關於上面三個 CSS 屬性的詳細說明可以參考 W3School 的說明: display: CSS display Propertyonferflow: CSS overflow Propertywhite-space: CSS white-space Property Copyright announcement:the featured image: Photo by The Journal Garden | Vera Bitterer on Unsplash