Charles

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 上，他預設只有...

Tech 科技WordPress

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 會顯示。我們把它設定為...

CSSFront-end 網頁前端ProgrammingTech 科技

CSS / margin 邊界重疊

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

Computer 電腦Design 設計Tech 科技

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

Tech 科技WordPress

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

Tech 科技WordPress

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

Computer 電腦CSSFront-end 網頁前端ProgrammingTech 科技

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

Computer 電腦CSSFront-end 網頁前端ProgrammingTech 科技

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

我們在網頁當中加入表格的時候常常會遇上一個問題，就是當表格的寬度已經超過螢幕的寬度要怎麼辦？尤其是手機版的頁面更是容易遇上這樣的問題。還記得 CSS 有一個 overflow 的屬性，但只設定這個屬性是不夠的，還需要對表格的加入以下屬性：首先要先讓 table 這個物件變成 block 物件，然後在水平方向的 overflow 讓它自動判斷是否有超出寬度的內容，自動加入水平捲軸。最後是 white-space: nowrap 這個屬性，讓文字不會因為寬度自動斷行，除非內容真的有斷行 存在。這是另一篇文章 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

Computer 電腦Front-end 網頁前端Life Tech 生活科技Tech 科技

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

Front-end 網頁前端HTMLProgrammingTech 科技

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

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