這一篇要討論的是關於一些安全性相關的設定。在前兩篇當中我們已經架設好我們的 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
幫整個網站搬家其實是一件非常繁雜的一件事情,除了搬移 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 架設的網站預設右下角都會有一個 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 設定時,你可能會發現一種狀況,就是前後兩個 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更新)
▍照片、圖片庫 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 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的檔案權限設定包含兩個部分:一是網站的根目錄 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 當中有定義一些偽元素選擇器 (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 有一個 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
Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表
蘋果因為有 Retina 螢幕之後,我們想知道我們最後呈現在 Macbook 或 iPhone 畫面上的樣子都非常的麻煩,因為他有好多種解析度。例如我們在做手機的 UI 設計、網頁前端畫面、顯示在手機上的照片等等,都會需要注意到解析度的問題。 大多數的狀況來說,幾乎目前的 APP 都不支援 Retina 的呈現,也就是說 Retina 高解析度的畫面輸出只支援少部分的軟體,像是系統原生的照片瀏覽 APP 在顯示照片、影片時就是以 Retina 的解析度在顯示的。 而 Safari 或其他瀏覽器則都不支援 Retina,我猜原因應該是因為目前主流網頁的設計還是沒有以蘋果的 Retina 螢幕做設計,並竟還是有大多數非蘋果的用戶。所以在瀏覽器的設計上,蘋果還是維持原本傳統的解析度輸出。 iPhone iPhone 把畫面顯示到你的螢幕上總共會經過三個 (或四個) 過程,我們可以看到下表有三種解析度,其中最重要的是 Points,我們在做網頁設計或任何不支援 Retina 的 APP 時就會使用到這個解析度。 iPhone Points(logical resolution) Rendered Pixels(resolution) Physical Pixels 像素密度 螢幕尺寸 2G, 3G, 3Gs 320 x 480 320 x 480...