WP Rocket 外掛教學:WordPress 加速外掛簡介
新手一般看到 Google PageSpeed Insights 上的網頁版評分就會發現慘不忍睹,手機版的評分更加可能是「個位數字」,這其實都是滿常見的現象。事實上高分也不代表網站表現良好和能夠提高 SEO 的評分。不過其實市場上有不少解決方法,最常見就是安裝 WordPress 快取外掛,但如果安裝之後仍然很低分,可能新手不知道或沒聽聞過最強的快取外掛 WP Rocket?我們會製作一系列關於這個外掛的教學。
新手一般看到 Google PageSpeed Insights 上的網頁版評分就會發現慘不忍睹,手機版的評分更加可能是「個位數字」,這其實都是滿常見的現象。事實上高分也不代表網站表現良好和能夠提高 SEO 的評分。不過其實市場上有不少解決方法,最常見就是安裝 WordPress 快取外掛,但如果安裝之後仍然很低分,可能新手不知道或沒聽聞過最強的快取外掛 WP Rocket?我們會製作一系列關於這個外掛的教學。
喜歡音樂的朋友,如果希望透過 WordPress 網站分享自己或別人製作的樂譜 (Sheet Music) 於網絡或其他地方,從前沒有太多方法,常見是「轉換成 PDF 格式」的樂譜來共享資源。不過我們這次介紹的免費外掛 OpenSheetMusicDisplay 卻可以讓你實現在網頁裡呈現漂亮的樂譜,而且是自動適應網頁的寬度和尺寸,適合在手機閱讀。
常見的 WordPress 精選圖片 (Featured Image) 可以類比成我們人類在社交媒體上的個人「大頭照片 / Profile Image」或書籍的「封面 / Cover」等等。不過這是適用於 WordPress 網站裡的文章和頁面。因此,這是網絡上的訪客對這個內容的第一印象。
雖然 WordPress 系統沒有限制一定要使用精選圖片 (Featured Image),這個並非必須的設定,但我們強烈建議新手一定要認真思考這個步驟。新手如果不太懂使用像 Adobe Illustrator 和 Adobe Photoshop 等專業的網頁和平面設計工具,市場上不少知名部落格的文章,他們的圖片都是直接套用 免費圖片 的,並不需要任何額外加工和創作,重點是只要圖片能夠緊扣文章的主題即可。
當你的 WordPress 網站已有不錯的文章數量,約 50 篇至 200 篇左右,這時候你「必須停下來思考一個問題」。網站的主題應該繼續擴闊更多單元?寫更多的文章嗎?不少研究顯示不少的網站的內容深度是嚴重不足,代表文章數量很多,但又不夠深入報道主題核心。
這次我們介紹新手常常忽視的「HTML 錨點 (Anchor) 」的應用,這個存在已久的功能,配合文章裡的「相關文章的超連結」,可以讓你建立主題架構緊密的的文章系列和整理文章。
錨點 (Anchor) 的應用可以用於單篇內容或外部的內容,讓訪客快速找到自己需要的內容和資訊,而非漫無目的地從數千字的內容裡發掘目標內容。
跟據權威的《維基百科》記載和文獻,超連結 (Hyperlink) 是指超文字內由一檔案連接至另一檔案的連結。作用與論文中的參考或注釋類似,以方便讀者隨時參考某一詞彙的定義。
超連結有點像是文學作品中的參考資料列表,它可以結合電腦網路和適當的存取協定來追蹤資料的原始出處,並被儲存、檢視,或顯示為關聯檔案中的一部份。
超連結中,最為通行的形式就是在全球資訊網上使用的 URL。瀏覽器通常會用一些特殊的方式來顯示超連結。如不同的文字色彩、大小或樣式。而且,游標移動到超連結上時,也會轉變為手形指示出來。
超連結在大部分的瀏覽器裡是顯示為加上底線的藍色字體,當這個連結已經被快取過時,則轉為紫色。當使用者觸發超連結時 (例如,用滑鼠左鍵按下超連結),瀏覽器將會顯示出連結的目標。
若目標並非 HTML 檔案時,將依其檔案格式以及瀏覽器自身之外掛程式而啟動外部程式以開啟檔案。
跟超連結相關聯的是超文字 (Hypertext),它是一種可以顯示在電腦顯示器或電子裝置上的文字,現時超文字普遍以電子文件的方式存在,其中的文字包含有可以連結到其他欄位或者文件的超連結,允許從當前閱讀的文字直接切換到超連結所指向的所有文字。
大部分的 WordPress 站長並非工程師或程序員背景出身,並不能太輕鬆修改外掛或佈景主題的程式碼,當遇上要「移除」網頁裡的「某一個物件或元素」,就會顯得束手無策和感到無奈。所以我們這次介紹不懂程式的新手都可以移除「任何物件」的方法,而且非常簡單和快速就能做到,學習曲線非常低,但又可以在往後重複使用。
WordPress 有提供內建的「自訂 CSS 語法」的設定,但前題是站長應該要對 CSS 和 HTML 語法有基礎的認知和實作能力,才適合自行調整這個部分,因為如果操作不當,可能引起網站無法正常運作,是個具有一定風險的操作。
這篇教學是網站架設的基本功之一,協助「初學者」有效和快速查詢得到網頁的 CSS Class Name (名稱) 和 Id Selector (選擇器)。這是一個非常重要的「起手式」,在往後很多教學都要求新手懂得查詢到網頁裡的 CSS 名稱,不然我們無法指定一些 [新的 CSS 屬性] 給它們。這篇教學約 5 分鐘就可以學會,我們會以市場佔有率最高的 Chrome DevTools (開發人員工具) 作為學習工具,讓新手快速進入學習的狀態。
Favicon 是「Favorites 喜愛」+「Icon 圖示」的縮寫,亦被稱為 Website Icon (網站圖示)、Page Icon (頁面圖示) 或 URL Icon (URL 圖示)。Favicon 是與某個網站或網頁相關聯的圖示。網站設計者可以多種方式建立這種圖示,而目前也有很多網頁瀏覽器支援此功能。瀏覽器可以將 Favicon 顯示於瀏覽器的網址列中,也可置於書籤列表的網站名前,還可以放在標籤式瀏覽介面中的頁標題前。幫助用戶輕鬆識別您的部落格或企業。它可以幫助提高品牌知名度,甚至增強網站的用戶體驗 (UX) 等的好處。
世界上每天都有成千上萬人透過 WordPress 建立的網站,但暫時沒有一套機制,讓所有的使用者可以輕鬆 [保存 Saved]、[重用 Reused] 和 [共享 Shared] 網站製作的元件,例如版面配置、欄位規劃、圖片組合方式、複雜結構的表格和行動呼籲區塊等等。建基於這是複雜和巨大的工作,WordPress 官方決定推出這個專案,名為「WordPress 區塊版面配置目錄 (Block Patterns)」的全球性項目應運而生,類似的例子像 Adobe 的創作者分享園地,讓全球的創作者「共享」大家的版面設計資源,當然基於「開源精神」,大家可以下載、收改並重新發佈自己的版本。這有賴於 WordPress 區塊編輯器 提供豐富和多樣性的生態環境。
是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術