Astra Pro模組教學指南-Native AMP支援

Astra上的本機AMP支援

Astra與AMP(加速手機頁面)完美整合,使用在網路行銷上更有利。
AMP允許在手機裝置上加載網頁的速度比其正常速度更快。
文章將有助於詳細了解AMP對於網站設計
以及Astra如何與AMP一起使用。讓我們來看看! 

什麼是AMP(Accelerated Mobile Pages)加速手機頁面?

AMP在手機Web上提供更快的頁面加載體驗。
你的網站設計頁面將立即加載到手機裝置上。
AMP允許受限的HTML和JS在手機裝置上呈現,因此頁面的速度將提高。

AMP是一個開源項目,旨在改善未來的手機裝置上的網絡。
這是Google的舉措。建議將較小使用的AMP頁面用作給大多數你的網站訪客。

Astra中的支援Native AMP是什麼意思?

如前所述,AMP限制HTML,CSS和JS在手機裝置上加載。
它不允許在手機裝置上加載超過50KB的CSS。
因此,你無法在AMP頁面上看到確切的Non-AMP頁面設計。

Astra的本地AMP支援會觀察允許的CSS大小,並相應地管理手機的網頁設計。
Astra嘗試在AMP模式下保留頁面的原始設計。
這樣你的AMP頁面看起來與Non-AMP /原始設計非常相似。

如何在網站上啟用AMP

要開始使用AMP,你需要使用外掛在網站上啟用它。
像其他任何WordPress外掛一樣,在你的網站上安裝以下外掛。

AMP:此外掛可在WordPress.org上免費使用

重要說明:由於AMP的JS和CSS限制,某些Astra主題和Astra Pro設定將無法使用。


停用Astra的本機AMP功能

如果要停用AMP的Astra整合,請使用下面提到的自訂代碼。

將提到的篩選器新增到子主題的functions.php文件中。

// Disable Astra Theme's Native AMP support.
add_filter( 'astra_amp_support', '__return_false' );

配置AMP外掛

需要安裝AMP外掛才能為你的網頁啟用AMP。
閱讀有關Astra-AMP整合的資訊

安裝外掛後,Astra建議你按照AMP的引導配置AMP。
或者,你可以從以下設定中進行選擇

從WordPress控制台導到AMP > Settings

以下是Astra主題推薦的全站設定:

  • Template Mode – Transitional 啟用此選項。
    它將創造內容的non-AMP和AMP版本。
  • Advanced Settings – Supported Templates
    停用第一個選項(將所有版型用作AMP),以便為你提供特定的文章類型選擇。
    選擇你希望擁有AMP的文章類型。

除了上述全站設定之外,你還可以在特定頁面/文章上啟用/停用 AMP

  • 編輯頁面。
  • 在右側欄中,你可以看到一個切換按鈕來啟用/停用AMP。
  • 如果使用頁面編輯器來設計網頁或文章,則建議關閉AMP。

延伸閱讀:
了解有關行銷網站中常用的購物車系統,
WooCommerce電子商務與Astra整合概述的更多資訊
Astra Pro 通過WooCommerce模組擴展網站商店選項。


不適用於AMP的Astra選項

眾所周知,AMP不允許JS在手機裝置上呈現。
它還將CSS大小限制為50 KB。
Astra主題和Astra Pro的一些進階選項需要JS和額外的CSS才能工作。
由於JS和CSS的限制,啟用AMP時,某些Astra Options將不起作用。

雖然某些Astra Options在AMP頁面上不起作用,
但使用這些選項切換到AMP不會破壞你的網站上的任何內容。
這些功能將由Astra本身的替代選項取代。

以下是不適用於AMP的Astra Pro外掛的列表:

  • Above 和 Below Header–如果上方/下方Header是使用舊版Astra Pro的Header Sections模組設計的,則該Header將不會出現在AMP頁面上。

筆記:
如果你是使用Header Builder建立的Astra頁首(自3.0.0版以來,Astra主題隨附有Header Footer Builder),那麼上方頁首和下方頁首可以在AMP頁上使用。

  • Sticky Header固定頁首–使用Astra Pro的 Sticky Header 模組設計的頁首無法在AMP頁面上使用,因為它需要JS才能工作。
  • Scroll To Top回到頂端–如果啟用了Astra Pro的 Scroll To Top 附加組件,它將不會顯示在AMP頁面上。
  • Mega Menu超級選單– Astra Pro的 Nav Menu 附加組件提供的功能不適用於AMP頁面。
    所有選單項將顯示為一般的下拉式選單。
    從頁面編輯器新增的版型將不會顯示,而是會顯示選單項文字,而不是版型。
  • Custom Layouts自訂排版–使用 Custom Layouts 模組中的頁面編輯器設計的排版將不顯示任何樣式。
    如果AMP不支援所使用的頁面編輯器,則僅顯示排版中的內容,而AMP將跳過樣式。
    因此建議停用AMP上的Custom Layouts。
    你可以在各個自訂排版上找到設定。

除上述以外,其他Astra Pro附加組件的某些選項將不起作用。
它們如下:

  • Search Style搜尋樣式–進階搜尋樣式如Full-screen、Header cover search、搜尋框不適用於AMP頁面。
  • Toggle Button Style and color切換按鈕樣式和顏色–對於Mobile Header,Toggle Button Style如邊框,最小化和切換按鈕顏色將不起作用。
    取而代之的是,將使用主題基色應用預設的內距樣式。
  • 部落格/彙整頁面上的Infinite Scroll無限滾動– Astra Pro的Blog pro外掛提供了分頁選項。
    如果為部落格/彙整頁面選擇Infinite Scroll,則它在AMP頁面上將無法使用,因為它需要JS。
    分頁將被數字代替,而不是Infinite Scroll。

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security