Go to Qiita Advent Calendar Top
LoginSignup
8
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@gatespace(Kazue IGARASHI)in株式会社デジタルキューブ (DigitalCube Co. Ltd. )

[ざっくり翻訳] WordPress AMP プラグイン カスタマイズなどの説明

Last updated at Posted at 2016-11-18

readme.md Wiki をざっくりと翻訳します。
常にアップデートされているプラグインですので、参考例のソースコードなど 必ず原文も参照してください。

ざっくり翻訳なので、「これ意味違くね？」ってのは編集リクエストからどうぞ。

AMP for WordPress

概要

このプラグインは Accelerated Mobile Pages (AMP) プロジェクトのサポートを追加します。AMPプロジェクトはあらゆる場面で即座にロードできるモバイルに最適化されたコンテンツを提供することを目指すオープンソースプロジェクトです。

プラグインを有効化すると、サイト上のすべての記事に対し、URLの最後に /amp/ を追加して動的にAMP互換コンテンツが生成されます。例えば、記事のURLが http://example.com/2016/01/01/amp-on/ の場合、AMPバージョンのページは http://example.com/2016/01/01/amp-on/amp/ となります。Pretty パーマリンク ではない場合は、?amp=1 を付与することで同じ動作をします。すなわち http://example.com/2016/01/01/amp-on/?amp=1 です。

注 #1: 固定ページとアーカイブは現在サポートされていません。

注 #2: このプラグインはAMPコンテンツを作成しますが、モバイルデバイスからアクセスした場合ユーザーに自動的にAMPコンテンツを表示させません。これはGoogle検索などのAMPカスタマーによって処理されます。詳しくは AMP Project FAQ を参照してください。

カスタマイズ / テンプレート化

このプラグインにはきれいに見えるデフォルトテンプレートが付属し、私たちはカスタマイズを行う場合の使いやすさと拡張性のバランス調整を試みました。

あなたは、あなたのニーズに応じて、テンプレートのパーツまた全体のを調整することができます。

どこで自作コードを適用しますか？

以下のコードスニペットやその他のコードレベルのカスタマイズは、次のいずれかの場所でおこなってください。

既製のテーマ（例えば WordPress.org テーマディレクトリ掲載のテーマ）を使用している場合：

カスタムテーマ（訳注：自作テーマなど）の場合:

  • functions.php (あるいは 'require' 関数などで functions.php にロードするファイル)
  • 前述の手法のいずれか

テーマの改造

デフォルトのテンプレートは、有効化されているテーマがサイトのアイコンなどのテーマカスタマイズ（設定）をサポートしている場合、それらを描画（表示）します。

サイトアイコン

（訳注：WordPress 4.3 から実装された機能です。参照：favicon の作成）

サイトのアイコンを設定した場合、AMPプラグインはテンプレート内の WordPress ロゴを自動的に置き換えます。

コードで行う場合：

amp_set_site_icon_url.php
add_filter( 'amp_post_template_data', 'xyz_amp_set_site_icon_url' );

function xyz_amp_set_site_icon_url( $data ) {
	// 32x32 ピクセルの画像が理想
	$data[ 'site_icon_url' ] = get_stylesheet_directory_uri() . '/images/amp-site-icon.png';
	return $data;
}

ロゴのみ

サイトのテキスト（サイト名）を隠してロゴだけを表示したい場合は、amp_post_template_css アクションフックを使用してください。次の例はタイトルバーの背景色を黒にし、サイトのタイトルを非表示にしてロゴを中心に置き換えます：

additional_css_styles.php
add_action( 'amp_post_template_css', 'xyz_amp_additional_css_styles' );

function xyz_amp_additional_css_styles( $amp_template ) {
	// ここにはCSSのみ記述する
	?>
	nav.amp-wp-title-bar {
		padding: 12px 0;
		background: #000;
	}
	nav.amp-wp-title-bar a {
		background-image: url( 'https://example.com/path/to/logo.png' );
		background-repeat: no-repeat;
		background-size: contain;
		display: block;
		height: 28px;
		width: 94px;
		margin: 0 auto;
		text-indent: -9999px;
	}
	<?php
}

注意：あなたのブランドに基づいて、色とサイズを調整する必要があります。

テンプレートの微調整

コードを介して、テンプレートのさまざまな部分を調整することができます。

アイキャッチ画像

デフォルトテンプレートは、アイキャッチ画像が表示されません。アイキャッチ画像を追加するには多くの方法があり、以下のスニペットは一例です：

add_featured_image.php
add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' );
function xyz_amp_add_custom_actions() {
	add_filter( 'the_content', 'xyz_amp_add_featured_image' );
}

function xyz_amp_add_featured_image( $content ) {
	if ( has_post_thumbnail() ) {
		// Just add the raw <img /> tag; our sanitizer will take care of it later.
		$image = sprintf( '<p class="xyz-featured-image">%s</p>', get_the_post_thumbnail() );
		$content = $image . $content;
	}
	return $content;
}

コンテンツの幅

デフォルトでは、有効化しているテーマの $content_width の値が amp コンテンツのサイズ決定も利用されます。これは変更できます:

change_content_width.php
add_filter( 'amp_content_max_width', 'xyz_amp_change_content_width' );

function xyz_amp_change_content_width( $content_max_width ) {
	return 1200;
}

テンプレートデータ

amp_post_template_dataフィルターを使ってデフォルトのテンプレートデータを上書きできます。次の例は iframe に使用するプレースホルダーイメージを有効化しているテーマにあるファイルで変更します:

set_custom_placeholder_image.php
add_filter( 'amp_post_template_data', 'xyz_amp_set_custom_placeholder_image' );

function xyz_set_custom_placeholder_image( $data ) {
	$data[ 'placeholder_image_url' ] = get_stylesheet_directory_uri() . '/images/amp-iframe-placeholder.png';
	return $data;
}

注：画像のパスは、validate_fileによって設定されたデフォルトの基準に合格しなければならないのと WP_CONTENT_DIR の サブフォルダのどこかでなければなりません。
（訳注：言い回しが難しいのですが、WP_CONTENT_DIR = WordPressのプラグインやテーマが格納されているディレクトリ（wp-contents）のサブフォルダ以下（つまりテーマやプラグインの中で良い）かつ相対パス（../）で指定していないことが条件です。）

Schema.org (JSON) メタデータ

AMPプラグインは "Rich Snippet" support を有効化するためいくつかのデフォルトのメタデータを追加します。これらは amp_post_template_metadata フィルターフックで変更できます。次の例はアノテーションタイプを（デフォルトはBlogPosting）からNewsArticleに変更しデフォルトの Publisher Logo 上書きします：

modify_json_metadata.php
add_filter( 'amp_post_template_metadata', 'xyz_amp_modify_json_metadata', 10, 2 );

function xyz_amp_modify_json_metadata( $metadata, $post ) {
	$metadata['@type'] = 'NewsArticle';

	$metadata['publisher']['logo'] = array(
		'@type' => 'ImageObject',
		'url' => get_template_directory_uri() . '/images/my-amp-metadata-logo.png',
		'height' => 60,
		'width' => 600,
	);

	return $metadata;
}

テンプレートメタ (作成者、日付など)

テンプレートのメタセクション（例：作成者、日付、タクソノミーなど）では、既存のセクションの上書き、削除、新しい要素の追加ができます。

例: テーマで作成者テンプレートを上書き

有効化しているテーマ内に amp フォルダを作成し、次の内容を記述した meta-author.php を設置します。

meta-author.php
<li class="xyz-byline">
	<span>Anonymous</span>
</li>

必要に応じて、内容を書き換えます。

例: フィルターでタクソノミーテンプレートを上書き

taxonomy セクション用の t/meta-custom-tax.php ファイルをロードする方法：

set_custom_tax_meta_template.php
add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_tax_meta_template', 10, 3 );

function xyz_amp_set_custom_tax_meta_template( $file, $type, $post ) {
	if ( 'meta-taxonomy' === $type ) {
		$file = dirname( __FILE__ ) . '/t/meta-custom-tax.php';
	}
	return $file;
}

t/meta-custom-tax.phpでは、次のようにデフォルトのカテゴリーとタグをカスタム author タクソノミーで置き換えるといった事ができます：

meta-custom-tax.php
<li class="xyz-tax-authors">
	<?php echo get_the_term_list( $this->get( 'post_id' ), 'xyz-author', '', ', ' ); ?>
</li>
例: header_meta から作者を削除

作成者セクションを完全に削除:

remove_author_meta.php
add_filter( 'amp_post_article_header_meta', 'xyz_amp_remove_author_meta' );

function xyz_amp_remove_author_meta( $meta_parts ) {
	foreach ( array_keys( $meta_parts, 'meta-author', true ) as $key ) {
		unset( $meta_parts[ $key ] );
	}
	return $meta_parts;
}
例: footer_meta へ コメント数を追加

コメント数を表示するセクションを新しく追加:

add_comment_count.php
add_filter( 'amp_post_article_footer_meta', 'xyz_amp_add_comment_count_meta' );

function xyz_amp_add_comment_count_meta( $meta_parts ) {
	$meta_parts[] = 'xyz-meta-comment-count';
	return $meta_parts;
}

add_filter( 'amp_post_template_file', 'xyz_amp_set_comment_count_meta_path', 10, 3 );

function xyz_amp_set_comment_count_meta_path( $file, $type, $post ) {
	if ( 'xyz-meta-comment-count' === $type ) {
		$file = dirname( __FILE__ ) . '/templates/xyz-meta-comment-count.php';
	}
	return $file;
}

templates/xyz-meta-comment-count.php の中身:

meta-comment-count.php
<li>
	<?php printf( _n( '%d comment', '%d comments', $this->get( 'post' )->comment_count, 'xyz-text-domain' ) ); ?>
</li>

カスタム CSS

ルールの追加

既存のCSSルールに追加（例えばカスタム埋め込みハンドラ）したい場合は、amp_post_template_css アクションフックを使用します:

additional_css_styles2.php
add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );

function xyz_amp_my_additional_css_styles( $amp_template ) {
	// ここにはCSSのみ記述する
	?>
	.amp-wp-byline amp-img {
		border-radius: 0; /* we don't want round avatars! */
	}
	.my-custom-class {
		color: blue;
	}
	<?php
}
CSS を完全に上書きする

独自のCSSスタイルを使用したい場合は、次のいずれかで実行できます:

  • 有効化しているテーマ内に amp フォルダを作成し、カスタマイズしたCSSを記述した style.php を追加します。
  • amp_post_template_file フィルターを使って 'style' === $type のときにカスタムテンプレートを指定します。例については、「テンプレートメタメタ」セクションの「フィルターでタクソノミーテンプレートを上書き」の例を参照してください。

注：ファイルはCSSだけでなく、<style> タグが含まれている必要があります。

ヘッダとフッター

デフォルトのAMPテンプレートのヘッダとフッターにコンテンツを追加したい場合は、amp_post_template_head と amp_post_template_footer アクションフックを使用してください。

amp_add_pixel.php
<?php
add_action( 'amp_post_template_footer', 'xyz_amp_add_pixel' );

function xyz_amp_add_pixel( $amp_template ) {
	$post_id = $amp_template->get( 'post_id' );
	?>
	<amp-pixel src="https://example.com/hi.gif?x=RANDOM"></amp-pixel>
	<?php
}

AMP エンドポイント

デフォルトの /amp エンドポイントを使用したくない場合は、amp_query_var フィルターフックを利用し、エンドポイントに変更します。
（訳注：下記はエンドポイントを /foo に変える例）

amp_change_endpoint.php
add_filter( 'amp_query_var' , 'xyz_amp_change_endpoint' );

function xyz_amp_change_endpoint( $amp_endpoint ) {
	return 'foo';
}

カスタムテンプレート

AMP コンテンツの見た目を完全にコントロールしたい場合は、amp_post_template_file フイルターフックを使ってカスタムテンプレートのパスを渡しデフォルトテンプレートを上書きできます:
（訳注：実際にファイルを上書きするのではなく、カスタムテンプレートで置き換えるという意味）

add_filter( 'amp_post_template_file', 'xyz_amp_set_custom_template', 10, 3 );

function xyz_amp_set_custom_template( $file, $type, $post ) {
	if ( 'single' === $type ) {
		$file = dirname( __FILE__ ) . '/templates/my-amp-template.php';
	}
	return $file;
}

注意: カスタムテンプレートにはいくつかの要件（必須の要素）があります:

  • <head> タグ内に amp_post_template_head アクションを入れる必要がある:
do_action( 'amp_post_template_head', $this );
  • </body> タグの直前で amp_post_template_footer アクションを入れる必要がある:
do_action( 'amp_post_template_footer', $this );
  • amp-custom style タグ内に amp_post_template_css アクションを入れる必要がある:
do_action( 'amp_post_template_css', $this );
  • amp_post_template_head アクションフックで出力されない 全て必須のマークアップ の要素（タグ）が含まれている必要がある。

メディアの取り扱い

デフォルトでは AMP プラグインは次の上げるコンテンツ内のメディア要素を正常に処理します:

  • 画像 (img => amp-img あるいは amp-anim に変換)
  • 動画 (video => amp-video に変換; 注: Flash はサポートしていない)
  • オーディオ (audio => amp-audio に変換)
  • iframe (iframes => amp-iframes に変換)
  • YouTube, Instagram, Twitter, Vine oEmbeds と ショートコード (対応する amp- component に変換)

カスタムショートコード、カスタム oEmbeds、手動で挿入されたファイル埋め込み（訳注：embedタグを使った動画や音声ファイル）、広告などのメディア類の追加については、利用可能なカスタマイズオプションがいくつかあります。

何もしない

埋め込んだファイル/メディアが標準の iframe のを仕様している場合、AMPプラグインが処理するため何もしなくていよいです。ほとんどのケースで「問題なく動く」はずです。

the_content フィルター

すべての既存のフックは the_content で引き続き動作します。これはよくも悪くもあります。良い例として対応する既存のプラグインが引き続き機能（割り込んで動作）するためです。悪い例として、全ての追加されたコンテンツが AMP コンテキストとして意味があるとは限らないからです。

the_content フィルターフックでコールバックを追加して、必要に応じて追加のコンテンツを出力することができます。 is_amp_endpoint() 関数で投稿が AMPバージョンの表示かどうかを確認することができます。ただし、（後述する）埋め込みハンドラーを使用することをお勧めします。

注意事項：この方法でスクリプトを含める必要があるカスタムコンポーネントを追加する場合は、amp_post_template_head アクションフックを使用して手動でそのスクリプトを追加する必要があります。
（訳注：ギャラリーなどをショートコードで実装し、別途JavaScriptが必要なケースなど）

既存のショートコードを更新（変更）する

既存のショートコードあるいは oEmbed コールバックなら、is_amp_endpoint() 関数を使用して分岐し AMP コンテンツ用にカスタマイズしたコンテンツを出力できます。

カスタム AMP コンポーネントのスクリプトに関する同じ注意事項が適用されます。

カスタム 埋め込みハンドラー

（訳注：自作のoEmbetやショートコードを AMP に対応させてコンテンツに埋め込むための手法の紹介です）

埋め込みハンドラーは oEmbed とショートコード用 AMP 固有コンテンツを挿入するためのヘルパークラスです。

埋め込みハンドラーは add_shortcode のような標準的な WordPress の機能を使用して処理する埋め込み（コンテンツ）を登録します。実際の例については Instagram、Twitterなどの既存の実装例を参考に独自のものを構築してください。

埋め込みハンドラーの主な目的はコンテンツの埋め込みに使用することですが、AMP 固有の the_content コールバックに追加するためにも使用できます。

ステップ 1: 埋め込みハンドラーの構築

自作の埋め込みハンドラーは AMP_Base_Embed_Handler クラスの拡張である必要があります。

注：適切な優先順位（プライオリティ）を設定するか、通常のコンテンツの既存のコールバックを削除してください。

このクラスは classes/class-amp-related-posts-embed.php にあります:

class_amp_related_posts_embed.php
<?php
class XYZ_AMP_Related_Posts_Embed extends AMP_Base_Embed_Handler {
	public function register_embed() {
		// If we have an existing callback we are overriding, remove it.
		remove_filter( 'the_content', 'xyz_add_related_posts' );

		// Add our new callback
		add_filter( 'the_content', array( $this, 'add_related_posts' ) );
	}

	public function unregister_embed() {
		// Let's clean up after ourselves, just in case.
		add_filter( 'the_content', 'xyz_add_related_posts' );
		remove_filter( 'the_content', array( $this, 'add_related_posts' ) );
	}

	public function get_scripts() {
		return array( 'amp-mustache' => 'https://cdn.ampproject.org/v0/amp-mustache-0.1.js' );
	}

	public function add_related_posts( $content ) {
		// See https://github.com/ampproject/amphtml/blob/master/extensions/amp-list/amp-list.md for details on amp-list
		$related_posts_list = '
<amp-list src="https://data.com/articles.json?ref=CANONICAL_URL" width=300 height=200 layout=responsive>
	<template type="amp-mustache">
		<div>
			<amp-img src="{{imageUrl}}" width=50 height=50></amp-img>
			{{title}}
		</div>
	</template>
	<div overflow role=button aria-label="Show more" class="list-overflow">
		Show more
	</div>
</amp-list>';

		$content .= $related_posts_list;

		return $content;
	}
}

ステップ 2: 埋め込みハンドラーのロード

amp_add_related_embed.php
add_filter( 'amp_content_embed_handlers', 'xyz_amp_add_related_embed', 10, 2 );

function xyz_amp_add_related_embed( $embed_handler_classes, $post ) {
	require_once( dirname( __FILE__ ) . '/classes/class-amp-related-posts-embed.php' );
	$embed_handler_classes[ 'XYZ_AMP_Related_Posts_Embed' ] = array();
	return $embed_handler_classes;
}

カスタム サニタイザー

「サニタイザー」という名前はちょっとした誤解です。これらは主に、サイトのコンテンツを AMP スペックと互換性を持たせるために、プラグイン内部で使用されます。これにはサポートされていないタグと属性を取り除き、メディア要素をAMPの仕様(例えば img => amp-img)に変換するコードが含まれています。

サニタイザーは多用途であり、HTMLコンテンツを文字列として扱う埋め込みハンドラーとは異なり、PHP's DOM libraryを使って投稿の AMP コンテンツを操作することができます。カスタムサニタイザーを使ってコンテンツに広告を挿入する方法を紹介します。もちろん関連記事の追加など多くのことを行うことができます。

ステップ 1: サニタイザーを構築

自作のサニタイザーは AMP_Base_Sanitizer クラスの拡張である必要があります。 このクラスは classes/class-ad-inject-sanitizer.php にあります:

class_amp_ad_injection_sanitizer.php
class XYZ_AMP_Ad_Injection_Sanitizer extends AMP_Base_Sanitizer {
	public function sanitize() {
		$body = $this->get_body_node();

		// Build our amp-ad tag
		$ad_node = AMP_DOM_Utils::create_node( $this->dom, 'amp-ad', array(
			// Taken from example at https://github.com/ampproject/amphtml/blob/master/builtins/amp-ad.md
			'width' => 300,
			'height' => 250,
			'type' => 'a9',
			'data-aax_size' => '300x250',
			'data-aax_pubname' => 'test123',
			'data-aax_src' => '302',
		) );

		// Add a placeholder to show while loading
		$fallback_node = AMP_DOM_Utils::create_node( $this->dom, 'amp-img', array(
			'placeholder' => '',
			'layout' => 'fill',
			'src' => 'https://placehold.it/300X250',
		) );
		$ad_node->appendChild( $fallback_node );

		// If we have a lot of paragraphs, insert before the 4th one.
		// Otherwise, add it to the end.
		$p_nodes = $body->getElementsByTagName( 'p' );
		if ( $p_nodes->length > 6 ) {
			$p_nodes->item( 4 )->parentNode->insertBefore( $ad_node, $p_nodes->item( 4 ));
		} else {
			$body->appendChild( $ad_node );
		}
	}
}

ステップ 2: サニタイザーのロード

amp_add_ad_sanitizer.php
add_filter( 'amp_content_sanitizers', 'xyz_amp_add_ad_sanitizer', 10, 2 );

function xyz_amp_add_ad_sanitizer( $sanitizer_classes, $post ) {
	require_once( dirname( __FILE__ ) . '/classes/class-ad-inject-sanitizer.php' );
	$sanitizer_classes[ 'XYZ_AMP_Ad_Injection_Sanitizer' ] = array(); // the array can be used to pass args to your sanitizer and accessed within the class via `$this->args`
	return $sanitizer_classes;
}

画像サイズの抽出

（訳注：このセクション（アナリティクスの前まで）は公式ディレクトリで配布されているver0.4.2では対応していません）
AMP で画像は幅と高さの属性が必須です。 これらの属性が img タグに存在しない場合、 AMP プラグインはこれらの属性を付与しようと試みます。

抽出メソッド

コンカレント（並列） 寸法の抽出 - PHP 5.3+ and cURL

PHP 5.3 以降かつ cURL 拡張機能をインストールしている場合、AMP-WP はそれらを同時に必要とするすべての画像の寸法を抽出しようとします。指定されたイメージタイプのディメンションを決定するために必要な最小バイト数だけが取得されます。後続の要求に対して、寸法はトランジェントを使用してキャッシュされます。これは最も速くかつ推奨される方法です。

シーケンシャル（逐次） 寸法の抽出 - PHP 5.2 or no cURL

PHP 5.2を使用している場合、または cURL 拡張機能をインストールしていない場合、AMP-WP は画像の寸法を順番に抽出ししようとします。指定されたイメージタイプのディメンションを決定するために必要な最小バイト数だけが取得されますが、各イメージのディメンションを順次取得するのにかかる時間は引き続き加算されます。後続の要求に対して、ディメンションはトランジェントを使用してキャッシュされます。

カスタム寸法の抽出

amp_extract_image_dimensions_batch フィルタにコールバックを追加することで、独自の画像寸法抽出メソッドを実装できます。

amp_extract_image_dimensions_batch コールバック関数は、慣習的に $dimensions という単一の引数をとります。これは、画像URLのマップ/配列です。
url での画像の寸法（フィルタの別のコールバックがそれらを決定できた場合）、または寸法がまだ決定されていない場合はfalseです。

例：

array(
    'http://i0.wp.com/placehold.it/350x150.png' => array(
        'width' => 350,
        'height' => 150,
     ),
     'http://i0.wp.com/placehold.it/1024x768.png' => false,
);

自作のカスタム寸法抽出のコールバックは、この単一の引数に含まれるマッピングを繰り返し、値が次元の配列ではないすべてのイメージ URL キーのカスタムメソッドを使用して寸法を決定します。

例：

my_custom_dimension_extraction_callback.php
function my_custom_dimension_extraction_callback( $dimensions ) {
    foreach ( $dimensions as $url => $value ) {
        // Skip if dimensions have already been determined for this image.
        if ( is_array( $value ) ) {
            continue;                
        }
        $width = <YOUR CUSTOM CODE TO DETERMINE WIDTH>
        $height = <YOUR CUSTOM CODE TO DETERMINE HEIGHT>
        $dimensions[ $url ] = array( 
            'width' => $width,
            'height' => $height,
         );
    }
    
    return $dimensions;

amp_extract_image_dimensions_batch フィルタに追加された次のコールバックにカスケードするか、apply_filter（） コールに返されるように、自作のコールバックは $dimensions を返す必要があります（未処理のコールバックがない場合）。

上で説明した WP-AMP で提供されるデフォルトのコールバック、extract_by_downloading_images は、明示的に削除されない限り起動しませんので、コールバックチェーンから削除してください。

例：

remove_amp_extract_image_dimensions_batch.php
	remove_filter( 'amp_extract_image_dimensions_batch', array( 'AMP_Image_Dimension_Extractor', 'extract_by_downloading_images' ), 999, 1 );

注意：以前に amp_extract_image_dimensionsフィルタに自作のカスタム寸法抽出コールバック関数を追加した場合は、amp_extract_image_dimensions_batch フィルタにフックするように更新（修正）し、上記の例のように単一の引数でキー値のペアを反復処理する必要があります。

アナリティクス

適切なアナリティクスのタグを出力には、amp_post_template_analytics フィルターフックを使用します:

amp_add_custom_analytics.php
add_filter( 'amp_post_template_analytics', 'xyz_amp_add_custom_analytics' );
function xyz_amp_add_custom_analytics( $analytics ) {
	if ( ! is_array( $analytics ) ) {
		$analytics = array();
	}

	// https://developers.google.com/analytics/devguides/collection/amp-analytics/
	$analytics['xyz-googleanalytics'] = array(
		'type'        => 'googleanalytics',
		'attributes'  => array(
			// 'data-credentials' => 'include',
		),
		'config_data' => array(
			'vars'     => array(
				'account' => "UA-XXXXX-Y"
			),
			'triggers' => array(
				'trackPageview' => array(
					'on'      => 'visible',
					'request' => 'pageview',
				),
			),
		),
	);

	// https://www.parsely.com/docs/integration/tracking/google-amp.html
	$analytics['xyz-parsely'] = array(
		'type'        => 'parsely',
		'attributes'  => array(),
		'config_data' => array(
			'vars' => array(
				'apikey' => 'YOUR APIKEY GOES HERE',
			)
		),
	);

	return $analytics;
}

アナリティクスの各項目には、ユニークな配列キーと次の属性を含める必要があります:

カスタム投稿タイプのサポート

デフォルトでは、このプラグインは投稿のみ AMP コンテンツを作成します。カスタム投稿タイプ（例えば投稿タイプが xyz-review）を作成するときの post_type パラメーターを利用して他の投稿タイプを追加することができます:

add_review_cpt.php
add_action( 'amp_init', 'xyz_amp_add_review_cpt' );
function xyz_amp_add_review_cpt() {
	add_post_type_support( 'xyz-review', AMP_QUERY_VAR );
}

このコードを追加後、リライトルールフラッシュを行う必要があります。
（訳注：「パーマリンク設定」を変更せずに保存を行うなどで良い。）

カスタム投稿タイプ用カスタムテンプレートを追加したい場合:

set_review_template.php
add_filter( 'amp_post_template_file', 'xyz_amp_set_review_template', 10, 3 );

function xyz_amp_set_review_template( $file, $type, $post ) {
	if ( 'single' === $type && 'xyz-review' === $post->post_type ) {
		$file = dirname( __FILE__ ) . '/templates/my-amp-review-template.php';
	}
	return $file;
}

私たち（訳注：AMPプラグイン開発チーム）は将来的にこれを処理するよりよい方法を提供するつもりです。

プラグインとの整合性

Jetpack

Jetpack は対応済です。関連記事のような多くの機能をサポートしています。

Parse.ly

Parse.ly's WordPress plugin はこのプラグインが有効化された時点で、自動的にAMPページをトラック（追跡）します。

Yoast SEO

Yoast SEO を利用している場合、次のコンパニオン（同じ作者のシリーズ）プラグインをチェックしてください: https://github.com/Yoast/yoastseo-amp
（訳注：Yoast SEO と AMP プラグインを両立させる補助プラグインになります。）

互換性の問題

以下のプラグインは AMP プラグインと同時に利用した場合、問題を引き起こすことが知られています:

  • Cloudflare Rocket Loader （検証を通らないAMPページを出力します。）
8
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?