[AMP]WordPressのAMPプラグインを使ってサクッと作ったページのデザインを変更する手順

AMPリリース直前に書いたこちらの記事の補足記事です。
まだ間に合う!WordPressサイトを”サクッ”とAMP(Accelerated Mobile Pages)対応させるためにやったことまとめ

上記の記事の時点でではプラグインのバージョンが若く、アップデート毎にファイルの内容も結構変わっていました。
どっちにしろバージョンアップの度に手直しが必要そうだから…ということでプラグインのファイルを直接編集していたんですが、どうやらバージョンも少し落ち着いてきたようなので、プラグインを直接編集しない方式でのカスタマイズ方法を共有したいと思います。

まずはサイトアイコンを変更する

まずはサイトのアイコンを変更します。
テーマによっては、「外観」>「カスタマイズ」>「サイト基本情報」で設定することもできますが、僕のサイトでは通常ページとAMPページでアイコンを分けたかったので、以下のフィルターフックを使って画像を設定しています。

function my_amp_set_site_icon_url( $data ) {
    $data[ 'site_icon_url' ] = 'http://applewatchjournal.net/wp-content/uploads/2016/02/awj-amp-icon.svg';
    return $data;
}
add_filter( 'amp_post_template_data', 'my_amp_set_site_icon_url' );

wordpressの管理画面の「外観」から「テーマの編集」を選び、テーマのための関数(function.php)の末尾に上記のコードを貼り付てください。
あとは、アイコンとして設定したい画像のURLを$data[ 'site_icon_url' ]に設定するだけ。
今回AMP対応したApple Watch Journalというサイトでは、SVG形式のファイルをアイコンに指定してみました。

CSSを上書きする

続いてはCSSの上書きです。
アイコンと同様にアクションフックを使って上書きします。

function my_amp_my_additional_css_styles( $amp_template ) {
    ?>
// ここにCSSを直接書いていく。
body { font-family: 'Raleway', sans-serif;
    

こちらもfunction.phpの末尾に上記のコードを追加します。

あとは、フックした関数内にCSSの記述を直接書いていきます。
AMPにはCSSの総容量が50KBまでという制限があるので、過度にCSSを使いまくらないように気をつけましょう!

おまけ:カスタマイズするならバーの色には気をつけよう!

結構がっつりとデザインを変更しようと思っている人には関係ありませんが、とりあえずサクッとAMP対応しようと思った人の多くが「基本はAMPプラグインデフォルトのままで、ヘッダーのバーの色で独自色を出そう!」と考えると思います。
これが結構微妙な結果を生みます。。。

以下、ナビゲーションバーにピンクを設定したApple Watch Journalの表示例。
IMG_9871.jpg
実装している時には気がつかなかったんですが、実際にGoogleの検索結果から遷移した際には、ページの上部にGoogleのナビゲーションバーがくっついてしまうんです。
バーには検索ページへの戻るボタンが搭載されている他、AMPカルーセルで表示された場合には左右スワイプで他サイトへ遷移する際のインジケータなどが表示されます。
Googleのナビゲーションバーの色は青(#4285F4)。
この色と大きく違う色を設定しちゃうと、ナビゲーションバーが二重に表示されてかなり野暮ったいデザインになってしまいます。

AMPプラグインのデフォルトカラーなら、比較的落ち着いた印象になるので、"とりあえずサクッと対応"に留めておきたい人は、中途半端に色を変更しない方が安全だと思います。

今の時点でAMPページが表示されるのはGoogle経由でしかありえないので、サイトのナビゲーション自体削除してしまうというのも一つの手かもしれません。サイト名はGoogleのナビゲーションバーにも表示されるので。
ただ、どうやらTwitterもAMP対応を視野に入れているっぽいので、その際にどう表示されるか不明なので、サイトのタイトルを消してしまうのは少し勇気が必要です。。
現時点ではデフォルトのままで表示というのが落としどころかと思います。もしくは腹を決めてAMPページ用のデザインをガッツリと作り込むか。

というわけで、WordpressのAMPプラグインを使ってサクッと作ったページのデザインを変更する手順でした。
wordpressサイトでAMP対応中のみなさまのお役に立てれば幸いです。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です