WordPressとAMPのセットアップ方法：Accelerated Mobile Pages：セットアップアナリティクス、AdSense、ソーシャルメディアガイドを添付

公開: 2016-09-25

setup-amp-and-wordpress-all-in-one-guide

最近、GoogleAMPについて多くの話題がありました。 Googleは、モバイル検索ページの一部としてAMPページのサポートを正式に発表しました。本当におもしろいです。これまでのところ、何らかの理由でCrunchifyにAMPを実装することを避け、その重要性を感じたことはありませんでした。

しかし、バリーのツイートを見た後、私はAMPlifyも決定しました。

ハハ..すべてのモバイル!! うーん..ここは正反対です..ほとんどすべてのデスクトップpic.twitter.com/9tDCAYa1SJ
— Crunchify（@Crunchify）2016年9月16日

AMPとワードプレスのヒントをお探しですか？ GoogleのAcceleratedMobile PagesでWordPressサイトを強化しますか？または、WordPressにAMPをインストールしますか？このチュートリアルでは、WordPressサイトをAMPlifyする方法の手順をすべての詳細な手順で説明します。

Accelerated Mobile Pages（AMP）とは何ですか？

Accelerated Mobile Pages （AMP）プロジェクトは、スピードを念頭に置いて作成されたオープンソースプロジェクトであり、モバイル向けに最適化されたコンテンツを一度作成すれば、どこにでもすぐに読み込むことができます。ページ上にJavaScriptの読み込みはまったくありません。 CSSの読み込みはごくわずかで、厳しい制限があります。 CSSで!importantを使用することさえできないことに気付いた観察の1つ。

以下の質問がありますか？

Google AMP：WordPressWebサイトとは何ですか。
AMP用のWordPressを設定するための最良の方法
GoogleAMPページとWordPressの使用を開始する方法
Accelerated Mobile PagesWordPressプラグイン
WordPressアンプページ
Yoastアンプの接着剤とワードプレスのクエリ

始めましょう：WordPress投稿に対してAMPを有効にします

ステップ1

公式のAMPプラグインをインストールします。

install-official-amp-plugin-crunchify-tips

アクティベートされると、すべて設定されます。オプションメニューは表示されません。
Settings -> [ Permalinks ]メニューに移動する必要があります。変更を加えずに[ Save Changesをクリックします。

公式AMPプラグインは基本的な機能を提供し、すべての投稿は自動的にAMPlifyになります。投稿URLの最後に/amp/を追加すると、投稿のAMPlifiedバージョンにアクセスできます。

例を見てください：

Originalの投稿のURL：https：//crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
AMPlify投稿URL：https：//crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

ステップ2

~~Glue for Yoast SEO＆AMPプラグインをインストールします。~~ バージョン0.4 AMP WordPress version以降、他のAMP関連のプラグインは必要ないと思います。

今：

Appearance -> AMPに移動します。
HeaderとBackground色を指定して、[保存]をクリックしSave 。

amp-wordpress-plugin-customization-option

ステップ-3

このプラグインで私が目にする唯一の問題は、ページの下部にPowered by WordPressことです。それを変更するには、以下のコードでfooter.phpページを変更することをお勧めします。

Plugins -> Editorに移動します
プラグインAMP選択します
ファイルamp / templates footer.phpを選択します

< footer class = "amp-wp-footer" >

< div >

< h2 > <?php echo esc_html ( $this - > get ( 'blog_name' ) ) ; ?> < / h2 >

< p >

Copyright < i class = "fa fa-copyright" aria - hidden = "true" > < / i > 2012 - 16 < a href = "https://crunchify.com" > Crunchify , LLC . < / a >   •   < a href = "https://crunchify.com/sitemap/" target = "_blank" > Archives < / a >   •   < a href = "https://crunchify.com/advertise/" target = "_blank" > Advertise < / a >

< / p >

< a href = "#top" class = "back-to-top" > <?php _e ( 'Back to top' , 'amp' ) ; ?> < / a >

< / div >

< / footer >

必要に応じて著作権の行コードを変更します

ステップ-4

AnalyticsとSocial MediaのアイコンをAMPページに追加します。

crunchify_amp_add_analytics_social_ads_js関数は、必要な分析とソーシャルメディアのjavascriptコードをampページに追加します。
crunchify_amp_add_analytics_social_code関数は、実際の分析コードとソーシャルメディアアイコンを追加します。
以下のGoogle Analytics Universal tracking IDとFacebook App IDを必ず更新してください。

// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes Start ~~~~~~~~~~~~~~~~~~~

add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ;

function crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) {

$ post_id = $ amp_template - > get ( 'post_id' ) ;

? >

<?php

}

add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ;

function crunchify_amp_add_analytics_social_code ( $amp_template ) {

$post_id = $amp_template - > get ( 'post_id' ) ;

< amp - analytics type = "googleanalytics" id = "analytics1" >

{

"vars" : {

"account" : "UA-43876549-1" // Modify universal tracking ID

} ,

"triggers" : {

"trackPageview" : {

"on" : "visible" ,

"request" : "pageview"

}

</script>

< / amp - analytics >

// Social Media Code

< div align = "center" >

< amp - social - share type = "twitter"

width = "30"

height = "30" > < / amp - social - share >

< amp - social - share type = "gplus"

width = "30"

height = "30" > < / amp - social - share >

< amp - social - share type = "facebook"

width = "30"

height = "30"

data - param - app_id = "509582389234904" > < / amp - social - share > // Modify your App ID

< / div >

< ? php

}

// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes End ~~~~~~~~~~~~~~~~~~~

ステップ-5

AMPページにGoogleAdSenseコードを追加します。私の場合、注目の画像の下に300x250 AdSenseコードを追加したいと思いました。使用できる公式フックがないため、<AMPプラグインディレクトリ> amp/templates/single.phpにあるsingle.phpファイルを変更しました。

Pluginsメニューに移動
[ Editorクリックします
AMPプラグインを選択
single.phpファイルに移動します
以下のコードスニペットに示すようにAdSenseコードを追加します。 look for line featured-imageその後にAdSenseコードを追加するだけです。

<?php $this - > load_parts ( array ( 'featured-image' ) ) ; ?>

// Adsense code START

< br > < div align = "center" >

< amp - ad width = 300 height = 250

type = "adsense"

data - ad - client = "ca-pub-xxxxxxxxxxxxxxxx"

data - ad - slot = "0110036438" >

< div placeholder > < / div >

< div fallback > < / div >

< / amp - ad >

< / div >

// Adsense code END

< div class = "amp-wp-article-content" >

そして、あなたはすべて準備ができています。サイトのキャッシュをクリーンアップして、ライブAMPページを確認してください。すべてのGoogleAnalytics、AdSense、ソーシャルメディアのアイコンが正しく機能していることがわかります

それで？

AMPページに問題がないか確認して確認しましょう。 https://validator.ampproject.org/にアクセスして、結果を確認してください。

ampproject-validation-page-crunchify-tips

GoogleはAMP投稿ページをどのようにクロールしますか？

これで、ページAMP and non-AMP versionsの両方が作成されました。AMPプラグインは、以下のリレーションメタタグを両方のページに自動的に追加します。

非AMPページでこれを確認してください

Googleや他のプラットフォームに知らせるために、ページのAMPバージョンのリファレンスが表示されます。

<link rel="amphtml" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/">

rel-amphtml-html-tage-for-non-amp-page-crunchify-tips

AMPページでこれを確認してください

非AMP標準バージョンを参照するためのテキストが表示されます。

<link rel="canonical" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/">

rel-canonical-html-meta-tag-in-amp-page-crunchify-tips

それでは、数日または少なくとも1週間待ってみましょう。そうすると、Google検索コンソールにAMPlifyページが表示されます。私にとってはたった4日で、AMPの結果としてすでに500ページ近くがインデックスに登録されています。

wordpress-and-amp-setup-guide-by-crunchify-stats

ライブ結果を確認する方法は？

モバイルブラウザでGoogleで投稿を検索するだけで、検索結果ページにAMP resultの結果が表示されます。

crunchifys-amp-result-in-google-mobile-search-page

また、このページにアクセスするか、ブックマークを付けてください。学習に応じて、このチュートリアルを徐々に更新していきます。幸せなブログとネットのスピードアップに役立ちます。