WP Test 測試 WordPress 最棒範例內容,填充各種內容協助開發佈景主題

17{icon} {views}

每次建立一個全新 WordPress 網站進行測試前,總得先部署適合開發的環境,以往我都是使用 WordPress 官方提供的佈景主題開發測試範例元件(Theme Unit Test),能快速匯入一堆測試內容(也就是範例內容),這個範例檔其實藏得非常隱密,如果平常沒有閱讀說明文件的習慣可能很難馬上找到,後來我又陸續發現其他適用於 WordPress 的範例測試檔案,若你有開發上的需求,想要填充內容到新網站,可以試試看其他人準備好的檔案。

本文要介紹的「WP Test」從字面上的意思就知道是用於 WordPress 的測試資料,後來被新的擁有者收購成為 Post Status Labs Project ,WP Test 是一套非常詳盡、完整的測試檔案,可以作為開發外掛和佈景主題使用,它以 Theme Unit Test 為基礎,結合超過四年的課程經驗匯集而成的一個測試內容。

在 WP Test 中收錄各式的範例內容,包括各種文章、分類、標籤、媒體庫、頁面、迴響、選單和帳號等等,只要透過 WordPress 匯入工具匯入 .xml 檔即可快速建構出充滿各種測試內容的網站。值得一提的是 WP Test 開放原始碼,資料部分會隨著時間不斷更新,以符合各種版本階段的開發需求(不像 Theme Unit Test 可能很少更新),亦可透過 WP-CLI 指令列模式快速安裝測試內容。

網站名稱:WP Test
網站鏈結:http://wptest.io/

使用教學

STEP 1

首先,先從 WP Test 網站點選「Download」下載封裝好的測試檔,解壓縮後有一堆資料,我們只需要其中的 wptest.xml 檔案即可。

點選左側「工具」中的「匯入」,找到 WordPress 匯入器,點選「立即安裝」。

STEP 2

安裝好匯入器後,別忘記「啟用匯入器」,這功能最初內建於 WordPress,後來改以外掛方式下載安裝,使用後可以從外掛頁面將它停用、完整刪除。

STEP 3

接著在 WordPress 內容的頁面中,點選「選擇檔案」然後找到剛才下載的 wptest.xml,選好後點選下方的藍色按鈕,會將文字部分內容匯入。

STEP 4

匯入作者頁面不要做任何更動,匯入前別忘記勾選「下載並匯入檔案附件」才不會讓某些圖片或媒體檔案無法看到,匯入時需要一段時間,請不要把分頁關閉,等待匯入工具跑完。

出現全部完成的提示訊息後就能返回控制台。

STEP 5

你會發現原有的 WordPress 多出很多文章,這些就是 WP Test 提供的範例內容,可以測試各種文章、不同佈景主題樣式的呈現效果,包括橫式和直立圖片、藝廊、Twitter、特色文章和摘要等等。

媒體庫裡也會匯入許多圖片,用以開發測試版面設計。

STEP 6

回到 WordPress 前台,這些預設好的內容就會依照你的佈景主題設計而變得不同,比較特別的是在 WP Test 也有提供測試用的選單,包括長選單及空白選單,如果你想在 WordPress 開發佈景主題或外掛,可能會需要填充一些內容進去測試,那麼 WP Test 就會很有用,可惜這些內容仍是以英文為主。

因為已經用不到了,匯入後別忘記到「外掛」功能中把 WordPress 內容匯入程式停用、刪除,這就是最簡單最基本的 WP Test 使用方法。

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

自行創業 缺乏曝光? 下一步”網站設計“幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包”嚨底家”

為 Facebook Comments 留言外掛程式加入延遲載入 Lazy Load 功能教學

17{icon} {views}



Copyright : dolphfyn / 123RF Stock Photos

幾天前在「CommentBox.io 沒有廣告、不追蹤用戶隱私的網站留言系統」一文有提到當今網站或部落格使用的幾種留言服務,而目前最多網站使用就屬 Facebook Comments 臉書留言外掛程式,可透過幾行程式碼快速串接,也不用自己建置相關系統或資料庫,整合使用者的 Facebook 帳戶在管理上更容易,我在幾年前就已經將 WordPress 內建的迴響功能關閉並替換為臉書留言外掛,在資源耗用和安全性方面更為理想。

雖然 Facebook Comments 速度還算快,但對於網頁載入時間也會有些影響,一開始我只把這段程式碼擺在文章頁面下方,後來發現每次打開網頁、不管有沒有要留言都會花時間載入 Facebook 相關 .js 檔,於是就研究了一下應該怎麼改善這個問題。

預設的 Facebook Comments 外掛程式沒有延遲載入,也就是每次開啟網頁只要有這段程式碼就一定會載入留言功能,因此可以加入一個判斷視窗高度的參數,當拖曳到留言框位置時才會載入相關檔案。這段程式碼修改自 Lazy Facebook Comments Plugin,原本使用於 Ghost,但稍微調整一下後 WordPress 也可使用,而且不用額外安裝外掛。

使用教學

STEP 1

首先,你必須先去 Facebook 自行建立一個新的應用程式,然後獲取應用程式 ID,這部分我就不多做介紹,網路上已經有很多完整教學,也或許你本身已經在網站上安裝過留言功能。

為了讓 Facebook Comments 具有留言審核工具功能,要在網頁的 前加入這兩行宣告代碼,同時將 YOUR_FACEBOOK_USER_ID 設定為你的臉書使用者 ID,YOUR_APP_ID 設定成應用程式 ID ,這部分通常可以從佈景主題的 header.php 檔案進行修改。

STEP 2

接著打開佈景主題 single.php(或相關檔案),找到跟迴響相關的程式碼片段,例如:comments_template() ,將它完整移除以關閉內建留言功能。複製以下程式碼貼上,以 Facebook Comments 作為預設的留言工具。

這邊要注意的是 YOUR_APP_ID 必須改為你的應用程式 ID,同時確認 sdk 版本是否過時,如果直接使用這段代碼,已有 Lazy Load 也就是延遲載入的功能內建其中,而獲取留言的方式是使用該頁面的固定網址。

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

自行創業 缺乏曝光? 下一步”網站設計“幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包”嚨底家”

不習慣 WordPress 5.0 Gutenberg 編輯器?Classic Editor 回歸傳統編輯器

32{icon} {views}

WordPress 已有一段時間沒有跨版本的大更新,依照釋出時間表來看,距離上次 4.9 已經超過一年,對於 WordPress 更新歷程來說是從未出現過的。5.0 預定釋出時間不斷往後延遲,多半是卡在全新編輯器 Gutenberg,推出後確實也如預期褒貶不一,許多使用者紛紛湧入外掛頁面給一顆星評價以表達不滿,不過任何大改版一開始勢必都會有段陣痛期,尤其是對現有網站會不會造成影響,外掛、佈景主題能不能跟上等等都是要考慮的問題。

如果你還沒辦法適應 WordPress 5.0 以後的 Gutenberg 編輯器,或者有某些原因而希望可以繼續使用舊版編輯器(例如可能某些格式會因此而跑掉),現在還是有機會能回到過去,官方提供一款「Classic Editor」傳統編輯器外掛功能,只要安裝就能將 WordPress 5.0 恢復成舊版的編輯器,當然也可以交叉互用。

假如你的 WordPress 網站擁有多個作者,Classic Editor 允許管理員為所有使用者選擇預設的文章編輯器,或是交由使用者自行選擇,亦能指定在不同文章、頁面中使用特定編輯器。

外掛名稱:Classic Editor(傳統編輯器)
外掛鏈結:https://tw.wordpress.org/plugins/classic-editor/

使用教學

STEP 1

將 WordPress 更新到 5.0 版以後,預設的編輯器會變成 Gutenberg,將每一個部分都當成區塊(Block)處理,對於新手來說降低入門的難度,統一內容插入方式,同時讓「所見即所得」發揮得更透徹、更淋漓盡致。

為了避免升級後舊有內容發生問題,因此會將舊文章包在傳統編輯器的區塊中,未來的新文章將能夠陸續支援 Gutenberg。

STEP 2

如果想回復舊版編輯器,只要從外掛中點選「安裝外掛」,輸入 Classic Editor 就能找到傳統編輯器功能。

將它安裝、啟用就能在網站開啟相關設定選項。

STEP 3

在「設定」的「寫作設定」中,會有全站預設編輯器的選項,可調整為傳統編輯器或是區塊編輯器,也就是新的 Gutenberg 編輯器。如果你的網站有多個使用者,想讓每個人依照自己的習慣選擇,亦能開始讓使用者自行切換編輯器。

開放自行切換編輯器,在文章或頁面列表中原有的「編輯」功能會被取代,可選擇使用區塊編輯器或是傳統編輯器開啟編輯功能。

STEP 4

下圖就是在 WordPress 5.0 後使用傳統編輯器的樣式。

即使如此,適應新的編輯器是遲早的事,安裝外掛也只能延長這段轉換的時間(根據外掛頁面說明該專案會維護至 2021 年),並不建議一直停留在舊版或不進行更新,不過如果你有這需要,那麼安裝 WordPress 官方外掛會是最妥善的解決方式。

推薦閱讀:

本站聲明:網站內容來源免費資源網路社群https://free.com.tw,如有侵權,請聯繫我們,我們將及時處理

【精選推薦文章】

自行創業 缺乏曝光? 下一步”網站設計“幫您第一時間規劃公司的門面形象

網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司,幫您輕鬆架站!

評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

台北網頁設計公司這麼多,該如何挑選?? 網頁設計報價省錢懶人包”嚨底家”