サイトタイトルがテキストで入る。ヘッダー直下の、アバターマン。「コメントを残す」のリンク。コメントを無効化してる場合注意。フッターの、カテゴリとタグの羅列。ヘッダー直下の、今日から見た記事投稿日。ベースとなるファイル。テーマカスタマイザーの設定を反映するようにphpで書かれてる。最終的に、必要なファイルを残して、不要なものを削除します。AMPプラグインフォルダの読み込みを設定AMPプラグインはとても便利で、AMPの様々なタグの制約をクリアしてカスタマイズすることが出来ます。コピペしたテンプレートフォルダのファイルのhtml属性や各html親子要素の構成は極力触らないようにして、classやウェブフォントの読み込み、ヘッダーやフッターなどのコンポーネントとレイアウトの調整を行っていくことで、リスクを最小限に、そしてプラグインの力を発揮していけますので、注意していじっていきましょう。そんなに難しくないです。_ampディレクトリをカスタマイズするためにファイルを作っていきましょう。「_amp/」に、「functions.php」を作って下さい。amp/functions.phpを読み込んでもらうように設定しましょう。このファイルに記述して、アクションフックを利用して、既存のAMPプラグインをカスタマイズします.テーマフォルダのfunctions.phpに、以下のように記載します。);AMP専用オリジナルsingle.php(記事ページ)を読ませるこのままではカラのfunctions.phpを読み込んだだけでAMPプラグインは何も変わりません。フックを利用して、オリジナルのテンプレートファイルを読み込ませます。解りやすいように「single.php」のファイル名を「single-amp.php」に変更しましょう。/amp/functions.phpに、以下の記述をします。);「amp_post_template_file」というフックを利用しています。ここでは、関数で引数を受け取っておいて記事のタイプを判定しています。singleか?という点と、もうひとつの「pre_amp_render_post」は、AMPテンプレートが呼び出されたか?というアクションの判定になります。これで、先程のsingle-ampが呼び出されるようになりました。試しにsingle-ampに適当なテキストを挿入すると、その箇所に表示されるはずです。これでレイアウトやタグが操作できるようになりました。AMP用のCSSを適用するさて、amp用のCSSを書いていきましょう。「style.php」のファイル名を「style-amp.php」に変更します。AMPでCSSを書く上で、50kb以上のCSSはNGです。見出しのルール本文エリアの画像の横並びなどヘッダ、フッタ等のモジュール配色その他ヴィジュアルエディタで行ってる特殊なタグの表示に関わるCSSぐらいで良いと思います。/amp/functions.phpに、以下を追記しましょう。);「amp_post_template_css」というフックを利用しています。echoされたものがCSSとして最終的にstyleタグに挿入されます。CSSはlinkタグで読み込むことが出来ないので、WordpressのAMPプラグインではheadのstyleタグ内に出力されます。awesome」を使用しています。Sansも使ってますが読み込みスピードを考慮し割愛します。)AMPではCSSのimportは禁止ですが、ウェブフォントは読み込むことが出来ます。/amp/functions.phpに書き込みます。'my_amp_post_custom_add_fonts');「amp_post_template_data」というフックを利用しています。キーに代入して返します。ちなみにこちらはlinkタグを直接headに書いても良いようです。AMP記事にシェアボタンをつける自前のJavascriptが使えないというのは少しだけ書きました。AMP規格に準拠したAMP指定のライブラリを読むことで、割と色々なことが出来ます。記事ページといえばシェアボタンですが、本記事ではとりあえずそこだけ触れておきます。);「amp_post_template_head」というフィルターフックを利用しています。これでスクリプトは読み込まれました!ボタンを出すタグは以下になります。height="20"></amp-social-share>liなどで囲んで適当にスタイル設定してください。scriptを読み込んだら、必ず使ってください。Analyticsを設定するこれも実際に書くと色々面倒で、前述のAMP指定のライブラリを読むのですが、これもプラグインの力で簡単に実装することが出来ます。))」をご自身のサイトを計測するトラッキングIDに置き換えましょう。これでOK!triggersには計測のタイミングを設定できます。上記の場合だと「ページビュー時」になります。最後に、AMPのメリットを最大限に高めるには、構造化データの設定が必須です。これはクローラーにHTML要素の役割を伝えるものですが、スクラッチで書いていくと時間もかかりますし何より間違える可能性が高いです。これも/_amp/functions.phpに記述して設定できます。);「$metadata」で、値を配列で受け取って、各キーはAMPの構造化データをJSON-LDで記述したときのキーにあたりますね。下のテストツールを見ればわかると思いますが、$metadata[ここの値]と、内容が対応してます。投稿記事の属性($metadata[‘@type’])投稿メディアのロゴ($metadata[‘publisher’][‘logo’])投稿画像がなかった場合のイメージ($metadata[‘image’])を設定しています。logoは600px×60pxじゃないとダメ」「$metadata[‘image’]は696px幅以上無いとダメ」など(つまり投稿記事サムネイルはそれ以上にしなくてはいけない)。その点は注意が必要です。構造化については以下の記事で詳しく解説しています。海外SEO情報ブログAMPプラグインテンプレートファイルでオリジナルファイルをincludeするには最初の方に、/templates/ディレクトリをコピペしてきました。その中に入っているファイルもご説明しましたが、そのままでは、/plugins/amp/templates/ディレクトリにある、もとのファイルが読み込まれてしまいます。自分でカスタマイズしたファイルを表示させたい!という方には、二通りの方法があります。single-amp.phpに直接書く「meta-○○.php」や「header.php」をそのままsingle-amp.phpにコピペします。読み込まないということです。);このようなメソッドで読み込まれていることがわかります。この$thisはプラグインフォルダのスコープなので、移植してきた_ampディレクトリのことではありません。);これでOKです!ちなみに今回の場合はget_template_partだと読み込めません。WordPressにAMP導入完了!さて、導入することだけを目標にざざっと解説しました。幾分かマシになりましたでしょうか?基本的なところはそのままですが、ここまでのやり方でほぼ自由にレイアウトを組めます。AMP導入は難しいです、とか、エラーが100%出ます、みたいに書いている方も居ますが、プラグインを導入して「〜/amp/#development=1」のURLで確認していただければ解りますが、エラーなんて出てません。プラグインの改良もあると思いますが、ルールに沿ってカスタマイズすれば、全く問題ありません!それでも少しは知りたいぞ!という方は、記事中のボタンをクリックして各項目の学びを深めてくださいね。すごく丁寧に書いてありますよ。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。