
就在2016年Google將網站導入了AMP的技術,讓網站在手機瀏覽時可以秒開,由於AMP只針對手機,因此當使用桌機或平板時,就不會啟用AMP,所以也可將AMP視為手機網頁,為了讓使用者能在手機中秒開網頁,Google就會將AMP的網頁,暫存在他們的主機中,以利於迅速的將網頁開啟。
為了能讓網頁迅速的開啟,因此會發現到在AMP的架構中,是不行任意的使用javascript,只限Google所提供的,如此一下來少了javascript的動態改變內容,因此這時的網頁就會變得很單純,由於AMP屬於另一個全新的手機版網頁,因此當要要在WordPress中開啟AMP,最簡單的作法就是使用外掛,不但可快速的啟用AMP,同時還能減少網頁結構的錯誤發生,甚至當啟用後,若對AMP佈景不滿意,也可自行手動修改,因此要如何在WordPress中啟用AMP,並且自訂AMP的佈景主題,現在就一塊來看看囉!
WordPress AMP
外掛名稱:AMP for WordPress
外掛下載:wordpress.org
外掛下載:wordpress.org
Step1
在進入WordPress後台,切到外掛面板,並搜尋「AMP」,當找到AMP for WordPress的選項後,再點「立即安裝」安裝並啟用。

Step2
當啟用完畢後,在左邊的選項中,就會看到AMP的選項,在進入AMP的設定面板後,預設只針對文章啟用AMP,若頁面也要的話,再將頁面的選項勾選並儲存即可。

Step3
都設定好後,要如何來進入AMP的頁面,方法很簡單,只需在文章網址後方,加入amp,立即就會切換至AMP的版面。

Step4
由於剛所啟用的AMP外掛中,還包含了AMP的佈景主題,因此會發現到,與原來你的佈景主題完全不同。

Step5
而在外觀的選項中,也會看到一個AMP的佈景選項。

Step6
進入後,該AMP只提供了簡易的佈景設置。

Step7
如果不滿意,也可直接修改這個AMP的佈景主題,而這個AMP的佈景主題,就在 外掛/amp/templates 資料夾底下。

Step8
這時就透過這個AMP佈景架構,任意的修改,而這邊梅干的先簡易的加入一個TEST來測試看看。

Step9
哈!這樣就可任意的調整啦!就可不用受限於預設的AMP佈景主題,讓你的AMP佈景也能與你的主題風格是一致的,因此最近又想導入AMP的朋友,不坊可參考看看囉!
