【WordPress】プラグイン無しでAMP（Accelerated Mobile Pages）に対応にする手順
プラグインを有効化するとこんな感じになります。パープルのヘッダーにグレーの背景でこちらもシンプルな見た目になります。AMPは制約が多いので凝った作りにすることが難しいためです。テーマに組み込んでいた関連記事のショートコードもむき出しになってしまいました。 AMPをプラグインを使わず自分で対応したい 上記のプラグインは完全なAMP対応とは言えずまだまだβ版です。今から数年前にスマホサイト対応でWPtouch Mobile Pluginが流行ったのと同じように、プラグインを使っている人と全く同じデザインになってしまうので「とりあえず対応しました感」があって何か嫌なんですよね。 というわけで今回はWordPressでプラグインを使用せずAMPに対応させた手順をご紹介します。このページもAMPに対応しているので、URL末尾に「?amp=1」を付けてレイアウトの違いを見て下さい。 https://c
WordPressのプラグインを使ってAMP⚡対応するにあたっての備忘録 - 行き着く先はあんこ
このブログは WordPress を使って管理されているのですが、昨今の Google のモバイル表示の猛プッシュとブログデザインのリニューアル意欲の時期が重なったので、このブログを AMP に対応しました。 すでに多くの人が WordPress を AMP に対応する方法をまとめてくれてはいるのですが、自分なりに引っかかった部分もあったので、AMP 対応するにあたっての備忘録をまとめておきます。 AMP が発表されてから 1 年以上経ちますが、AMP の仕様はちょくちょく変更されています。今エラーがでなくても今後エラーになる可能性もあるので注意が必要です。 AMP とはAMP とは、Accelerated Mobile Pages Project のことであり、モバイル表示の高速化を目的としています。詳しいことは AMP 公式サイト もしくは このページ にて。 AMP 対応WordPr
WordPress AMPプラグインのカスタマイズ
昨年末くらいからモバイルが爆速になるとちらほらと話題になってきたAMP(Accelerated Mobile Pages)ですが、Googleがいよいよ検索に取り入れるようで、Search ConsoleにもAMPのインデックス状況やエラーが表示されるようになりました。 いよいよ2月23日から検索での表示が開始されるようです。 当サイトもせっかくなので、AMPプラグインを使用して対応させてみました。 最新バージョンは0.42で、構造化データのエラー等はなくなっており、フィルターやアクションフックが充実しており、カスタマイズするのにプラグインを直接編集する必要はなくなりました。 今回軽くカスタマイズもしてみたので、使用方法やカスタマイズの方法をまとめてみます。 AMPプラグインの使用方法AMPプラグインは特に設定等はなく、基本的にはインストールして、有効化するだけです。 ただし新しいURLを
WordPressにAMPプラグインを導入し、Googleアナリティクスで計測できるようにするまでの流れ ｜ Tips Note by TAM
2016.05.16 WordPressにAMPプラグインを導入し、Googleアナリティクスで計測できるようにするまでの流れ 2016年2月24日、GoogleがAccelerated Mobile Pages (AMP)に対応したウェブページを検索結果に表示する事を開始しました。 AMPについての記事はこちら↓ AMP (Accelerated Mobile Pages) について 今回は、TipsnoteにWordPressのAMPプラグインを導入し、Googleアナリティクスで計測できるようにしてみました。 AMPプラグインの導入 AMP用のGoogleアナリティクス プロパティを作成 AMPプラグインのテーマにGAタグを埋め込む デバッグとエラー対応 AMPプラグインの導入 AMPプラグインをインストールします。 「プラグイン」＞「新規追加」画面から、キーワードに「AMP」と入れ
AMPページの広告掲載にはamp-ad用のJavaScriptの読み込みが必要に
[レベル: 上級] AMPページに広告を掲載する際に、定められたJavaScriptの読み込みが必要になりました。 設定していなくても広告は表示されますが、将来的には、AMP HTMLのバリデーションエラーの原因になる可能性があります。 amp-adのJSがないとバリデーション警告 AMPページで広告を表示するには、amp-adタグを使います。 amp-adを使用しているページでは、次のJavaScriptを読み込ませる必要があります。 <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script> このJSの読み込みがない状態だと、AMP HTMLのバリデーションチェック（#development=1とChrome拡張、ウェブ版ツールのどれでも）で次のような
AMP対応のYouTube動画を埋め込む方法｜今村だけがよくわかるブログ
私個人的にですが、Webサイトを「AMP（Accelerated Mobile Pages Project）対応して欲しい」という依頼が増えてきました。 このブログでも使っているWordPressですと、AMP対応できる便利なプラグインがすでに開発されていて、プラグインを有効にするとすぐに対応できます。 プラグインを使って対応する方法もアリなんですが、プラグインを使わずに対応する必要も依頼によっては出てきていますので、今後のためにメモ書きとして対応したことを少しずつ書くことにしました（いずれ「AMPとは何なのか」「AMP対応することで何が嬉しいのか」など書いて行こうと考えています） というわけで、今回はAMP対応ページにYouTube動画を埋め込む方法について書きました。興味がある方はご参考ください。対応については、AMPのドキュメント「amp-youtube.md」を参考にしています。
Google CDNのAMPキャッシュを大解剖――URLフォーマット、更新プロセス、更新方法、削除方法
[レベル: 上級] この記事では、Googleが公開しているドキュメントに基づいて、AMPキャッシュの仕組みについて説明します。 具体的には、次を扱います。 AMPキャッシュのURLフォーマット AMPキャッシュの更新プロセス AMPキャッシュの更新強制 AMPキャッシュの削除 あなたがAMPをすでに実装しているなら、知っておくと役に立つこともあるはずです。 では行ってみましょう⚡ AMPキャッシュのURLフォーマット AMP CDNにキャッシュされたコンテンツはたとえば次のようなURLになります。 https://cdn.ampproject.org/c/s/example.com/amp_document.html https://cdn.amproject.org/i/example.com/images/logo.png 分解して、どんな構成になっているのかを見てみましょう。 ※こ
WordPress AMPプラグインを使って サイトをAMP対応にする – ねんでぶろぐ
Googleは、モバイルページを高速化する AMP（Accelerated Mobile Pages） に対応したサイト検索を開始しました。 AMP は AMP HTML 仕様に沿って作成する必要があります。サイトをAMPに対応させる場合、独自のタグの記述方法や 使えるタグの制約が多いので、自分で対応させるのは大変なのですが WordPressではサイトをAMP対応にするプラグインがあります。 この AMPプラグイン を使うと 自動で変換してAMP対応してくれますのでとても楽になります。ここではさっそくAMPプラグインを使用してAMP対応する方法を紹介します。 WordPress AMPプラグイン(Automattic) https://wordpress.org/plugins/amp/ 【2018/03/07 更新】 ※この記事は WordPress AMPプラグイン ver0.6.2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressプラグイン「AMP」のカスタマイズが超簡単だった！