AMP for WP - AMP Layouts の使い方なら｜ダブスト

AMPレイアウトの設定
AMPページビルダーでAMPレイアウトを設定する
その他のレイアウト

AMPレイアウトの設定

このプラグインにはサイトのテーマ別にデザインされたテンプレートがあらかじめ複数用意されています。自分のサイトに合ったAMPレイアウトをテンプレートから選んでサイトに反映させましょう。

サイドメニュー > [AMP] > [デザイン] をクリックします。
[テーマ] をクリックします。
プルダウンリストから [Swift theme] テーマを選択します。

※ [Swift theme] を選択しないと、AMPレイアウトが表示されません。
画面を下へスクロールして、 [AMPレイアウト] の項目を表示します。
表示された [AMPレイアウト] から好きなデザインを選び、[インポート] をクリックします。
レイアウトを大画面で確認するには [プレビュー] をクリックします。
※ここでは、[アプリのレイアウト] を選択します。
[変更を保存] をクリックします。
レイアウトを確認するには、管理画面上部のツールバー > [ホーム] にマウスをかざし、サブメニューから [AMPサイトへ] をクリックします。

ヘッダー、フッターを含め前述で選択したレイアウトでサイトが表示されているか確認します。
※以下はサンプル画像での表示を比較したもの
サンプル画像１：「アプリ」レイアウトのプレビュー画面

サンプル画像２：AMPサイトの表示画面

AMPレイアウトの変更は以上の手順で行います。

AMPページビルダーでAMPレイアウトを設定する

ページビルダーからもAMPレイアウトの編集や設定を行うことができます。

サイドメニュー > [投稿／固定ページ] > [投稿／固定一覧] をクリックします。
ここでは [投稿一覧] をクリックします。
リストから任意の [投稿／固定ページ] を選択します。
表示された編集画面を下方へスクロールし、[AMPページビルダー] > [事前作成されたAMPレイアウト] をクリックします。

使用できる複数のレイアウトが [レイアウトディレクトリ] に表示されます。
任意のレイアウトの [レイアウトを表示] ボタンをクリックします。
※ここでは [エレガンス] レイアウトを選択します。

２種類のエレガンスレイアウトが表示されます。ここではホームページのレイアウトを選択します。
[インポート] をクリックします。

※レイアウトを大画面で確認するには、[プレビュー] をクリックします。
レイアウト変更の確認ポップアップ画面が表示されるので、[OK] をクリックします。★要日本語化★

AMPページビルダーに変更したレイアウトの設定が反映されます。
[更新] をクリックします。
レイアウトを確認するには、管理画面上部のツールバー > [ホーム] にマウスをかざし、サブメニューから [AMPサイトへ] をクリックします。

ヘッダー、フッターを含め前述で選択したレイアウトに画面が変更されていることを確認します。