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

Tech / 蘋果 Macbook 和 iPhone 的螢幕解析度、尺寸比較表

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...

HTML / 網頁當中的六種空白字元 &nbsp; &ensp; &emsp; &thinsp; &zwnj; &zwj; 的差別

HTML / 網頁當中的六種空白字元 &nbsp; &ensp; &emsp; &thinsp; &zwnj; &zwj; 的差別

在HTML當中,空格 (space) 不僅僅就是空格這麼簡單的事,它其實有六種不同樣的空格。如果你有編輯網頁或在網路上寫文章的經驗,肯定會發現當你連續輸入好幾個空格的時候,它永遠都只會有一個空格,甚至是被當作”無內容”來解析。這是因為瀏覽器在遇到空格的時候,如果它認為這是一串字串,那麼空格就會被當作空格但不會累計,不管你輸入再多個空格它還是只會有一個。 空格在 HTML 當中被視為是特殊符號的一種,在網頁當中如果想要正確的加入空格,就必須用 HTML 的語法輸入。HTML 提供了六種不同種類的空格,其中最大的差異在於寬度上的不同。 1. &nbsp; 不換行空格 No-Break Space,不換行空格。這是最常見的空格,也是一般我們鍵盤按下空白鑑會出現的字元。大部分來說我們只會使用這樣的空白,輸入多次 &nbsp; 空格也會累計。&nbsp; 的空格寬度會受字體影響。 2. &ensp; 半形空格 En Space,半形空格。en 是一個半型字元寬度的單位,寬度為 em 的一半。例如當 16px 大小的字體,半形就是 8px 的寬度。就定義上來說,一個 en 就是小寫字母 n 的寬度,大約是半個中文字寬。 3. &emsp; 全形空格 Em Space,全形空格。和半形空格同概念,em 是一個全形字元的寬度,如果字體大小是 16px,一個 em 就是 16px,大約等於一個中文字寬。 4. &thinsp; 窄空格 窄空格,顧名思義就是寬度較窄的空格,大約是 1/6 個 em 寬。 5. ‌&zwnj; 全名是...

CSS / 透過 CSS 隱藏網頁上的元件方法,visibility: hidden 和 display: none 有什麼不同?

CSS / 透過 CSS 隱藏網頁上的元件方法,visibility: hidden 和 display: none 有什麼不同?

當我們想控制一個網頁上的元素要不要顯示出來,可以簡單地透過 CSS 的方式做到。隱藏元素的方式有兩種:visibility: hidden 和 display: none。 這裡有個範例,我們想隱藏文章的標題。先看看原本網頁應該長的樣子: ▍ 隱藏元素但保留元素的位置 visibility: hidden 使用 visibility: hidden 這個屬性會使得元素不顯示在網頁上,但它卻會保留元素的空白位置。 可以看到標題已經隱藏起來了,可是標題本身的位置也保留了下來,留下了一片空白。 ▍ 隱藏元素也不保留元素的位置 display: hidden 如果你想要把元素隱藏起來,連它的位置也不保留給它,就好像它完全不存一樣,那麼你就要使用 display: hidden 這個屬性。 需要注意的是,雖然我們把元素隱藏起來,好像它整個被移除了。但是實際上它還是存在在網頁上的,只需要打開 HTML 原始碼就可以看到,我們只是透過 CSS 的方式去控制它現在顯示的外觀狀態。 Copyright announcement: the featured image: Computer photo created by freepik – www.freepik.com

WordPress / 如何重啟 WordPress Bitnami 伺服器服務?重啟 Apache、MySQL、PHP-FPM

WordPress / 如何重啟 WordPress Bitnami 伺服器服務?重啟 Apache、MySQL、PHP-FPM

在 Bitnami 建立的環境之下要重啟服務只需要執行已經準備好的指令檔就行了!你可以輕易的開啟、停止、重新啟動任何一個服務。 ▍ 查詢伺服器服務狀態 這一指令會告訴你目前 Apache、MySQL 和 PHP-FPM 的執行狀態。 ▍ 啟動所有服務 啟動服務的指令,如果沒有指定要開啟哪個服務,它就回直接啟動所有服務。 ▍ 停止所有服務 同樣的,如果沒有給定服務的名稱,就會停止所有服務。 ▍ 重新啟動所有服務 ▍ 重新啟動 Apache 如果我們指定重新啟動 apache,它就會忽略其他服務的狀態,只重啟 Apache。這是非常常用到的指令,在我們調整過系統性的更改、修改伺服器的設定檔,或只是想要重設伺服器狀態,都會重新啟動一次 Apache 服務。

WordPress / 架站教學二:透過 SSH 連線遠端控制 GCP 並架設 FTP 伺服器 (使用 WordPress Bitnami)

WordPress / 架站教學二:透過 SSH 連線遠端控制 GCP 並架設 FTP 伺服器 (使用 WordPress Bitnami)

English Version: WordPress / Tutorial #2: How to setup FTP Server on GCP with WordPress Bitnami FTP, File Transport Protocol,檔案傳輸協定,是一個常見的檔案傳輸方式。透過 FTP 我們可以直接遠端連線到我們的 server 並且直接上傳、下載或管理遠端伺服器的檔案。 在上一篇我們已經介紹過如何在 GCP 上安裝部署 WordPress,雖然 WordPress 已經有很完整的圖形化介面可以對網站進行設定或修改,但為了做更進階的設定,我們可能必須抽換伺服器上的檔案,甚至修改檔案權限或除錯。此時就必須透過 SSH 連線和 FTP Server 去完成系統控制和檔案管理的任務。   透過 SSH 連線遠端控制伺服器 SSH 是一種加密的網路傳輸協定,最常見使用於遠端登入系統,透過指令控制系統。我們先前已經建立好的 WordPress Bitnami Server 是用 Debian Linux 作業系統建立的,所以我們可以輕易的用 SSH 連線用下指令的方式遠端控制我們的 server。 ▍ 使用 Google Cloud...

WordPress / Tutorial #1: How to install WordPress on Google Cloud Platform (GCP)

WordPress / Tutorial #1: How to install WordPress on Google Cloud Platform (GCP)

中文版:WordPress / 架站教學一:使用 Google 台灣主機免費架設自己的網站 (Mac/Win版) Many people attempt to build their own website, blog, or even business website, but they totally have no idea about how to do. We could find that there are lots of website building services online. Many of them are all free! Such as the website builders, wix.com, weebly.com,...