WordPress AMPプラグインをいろいろ改造してみる

main_amp2
前回、「WordPress AMPプラグインを使って サイトをAMP対応にする」でAMPプラグインを紹介しましたが今回はさらに自分のサイトに合うように改造していくためのアクションフックやアクションフィルターを紹介します。
不動産プラグインでも以下のフックやフィルターを使ってAMP用のプラグインを開発しています。
不動産プラグイン AMPデモ

WordPress AMPプラグイン(Automattic)
https://wordpress.org/plugins/amp/
※この記事は WordPress AMPプラグイン ver0.3.2 を使ってテストしています。

 

投稿者の名前表示を変更したい場合

AMP 投稿者の名前
投稿者の名前が表示されますが 他の名前に変更したい場合、以下のコードを my-plugin.php に張り付けてください。

/*
 * 投稿者名変更 表示部分 wp-meta
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_modify_author_data( $data ) {

	$data['post_author']->display_name = 'hoge';
	return $data;
}
add_filter( 'amp_post_template_data', 'nendebcom_amp_modify_author_data' );

さらに、構造化データ(schema.org)の部分も変更します。

/*
 * 投稿者名変更 JSON-LD
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_modify_author_jsonld( $metadata, $post ) {

	$metadata['author']['name'] = 'hoge';
	return $metadata;
}
add_filter( 'amp_post_template_metadata', 'nendebcom_amp_modify_author_jsonld', 10, 2 );

 
 

サイトアイコン画像を変更したい場合

AMP サイトアイコン
AMPプラグインは 管理画面の「テーマカスタマイズ」→「サイト基本情報」で設定したサイトアイコン(ファビコン)を使用しています。

サイトアイコンを設定していなかったり(別の方法でファビコンを設定している)、サイトアイコンとは違う画像を使いたい場合は「投稿者の名前表示を変更したい場合」と同様に以下の方法で設定する事ができます。※画像サイズは 32×32 になります。

/*
 * サイトアイコン変更 表示部分 wp-meta
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_modify_site_icon_data( $data ) {

	$data['site_icon_url'] = 'サイトアイコン画像のURL';
	return $data;
}
add_filter( 'amp_post_template_data', 'nendebcom_amp_modify_site_icon_data' );

さらに、構造化データ(schema.org)の部分も変更します。

/*
 * サイトアイコン変更 JSON-LD
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_modify_site_icon_jsonld( $metadata, $post ) {

	$metadata['publisher']['logo'] = array(
		'@type'  => 'ImageObject',
		'url'    => 'サイトアイコン画像のURL' ,
		'height' => 32,
		'width'  => 32,
	);
	return $metadata;
}
add_filter( 'amp_post_template_metadata', 'nendebcom_amp_modify_site_icon_jsonld', 10, 2 );

 
 

投稿日表示を更新日に変更

AMP 投稿日
投稿日の表示は年月日ではなく「○日前」とか「○か月前」「○年前」と表示されています。最近更新しているのに「○年前」と出てくるのはちょっといやだなと思う場合は独自のテンプレートファイルを作って読み込むように変更できます。

以下の内容で独自テンプレートファイル(meta-time-modified.php)を作って my-pluginフォルダ に設置します。

<li class="amp-wp-posted-on">
	<time datetime="<?php echo esc_attr( date( 'c', $this->get( 'post_modified_timestamp' ) ) ); ?>">
		<?php
		echo esc_html(
			sprintf(
				_x( '%s ago', '%s = human-readable time difference', 'amp' ),
				human_time_diff( $this->get( 'post_modified_timestamp' ) )
			)
		);
		?>
	</time>
</li>

※元のテンプレート(amp/templates/meta-time.php) の ‘post_publish_timestamp’ を ‘post_modified_timestamp’ に変更しただけです。

次に、↑で作った独自テンプレートファイルを読み込むように以下のコードを my-plugin.php に張り付けてください。

/*
 * 投稿日を更新日に変更 wp-meta
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_set_comment_count_meta_path( $file, $type, $post ) {

	if ( 'meta-time' === $type ) {
		$file = dirname(__FILE__) . '/meta-time-modified.php';
	}
	return $file;
}
add_filter( 'amp_post_template_file', 'nendebcom_amp_set_comment_count_meta_path', 10, 3 );

※この方法を使えば meta-author.php や meta-taxonomy.php も独自テンプレートに差し替える事ができます。

 
 

remove_action が効かない場合

たまたまなのかもしれないけど remove_actiont が効かなかったので amp-frontend-actions.php を読み込んでいるタイミングで remove_action するようにしました。

例「AMP用 canonical(amphtml)のURLを変更する」

/*
 * AMP用 remove_action
 * For in amp-frontend-actions.php
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_remove_actions() {

	remove_action( 'wp_head', 'amp_frontend_add_canonical' );
}
add_action( 'template_redirect', 'nendebcom_amp_remove_actions' );


/*
 * AMP用 canonical(amphtml)
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_frontend_add_canonical() {

	if ( defined( 'AMP_QUERY_VAR' ) ) {
		if ( false === apply_filters( 'amp_frontend_show_canonical', true ) ) {
			return;
		}

		$amp_url = amp_get_permalink( get_queried_object_id() );
		printf( '<link rel="amphtml" href="%s" />', $amp_url );
		echo "\n";
	}
}
add_action( 'wp_head', 'nendebcom_amp_frontend_add_canonical' );

※オリジナルは「esc_url」が入っていて「&」が「&#038」に変換されてAMPページが正しく表示できていなかったので「esc_url」を外しました。

 

※amp-post-template-actions.php に入っているのを remove_action したい場合はこちらです。

/*
 * AMP用 remove_action 
 * For in amp-post-template-actions.php
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_remove_actions2() {

	remove_action( 'amp_post_template_head', 'amp_post_template_add_title' );
	remove_action( 'amp_post_template_head', 'amp_post_template_add_canonical' );
	remove_action( 'amp_post_template_head', 'amp_post_template_add_scripts' );
	remove_action( 'amp_post_template_head', 'amp_post_template_add_boilerplate_css' );
}
add_action( 'amp_post_template_head', 'nendebcom_amp_remove_actions2', 9 );

 



 

エンドポイントを「fudou_amp」に変更する

通常、エンドポイントはURLの後ろに「/amp」や「&amp=1」となりますが、とある理由で変更したい場合は以下のようにします。

/*
 * AMP Endpoint
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_change_endpoint() {

	add_filter( 'amp_query_var', function(){ return 'fudou_amp'; } );
}
add_action( 'init', 'nendebcom_amp_change_endpoint', 9 );

※「&fudou_amp=1」となります。

 
 

カスタム投稿タイプもAMP対応にする

不動産プラグインの場合はこんなのになります。

/*
 * Custom Post Type Support
 * For 'fudo' post type:
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_add_review_cpt() {

	add_post_type_support( 'fudo', AMP_QUERY_VAR );
}
add_action( 'amp_init', 'nendebcom_amp_add_review_cpt', 99 );

 
 

CSSを追加する

CSSを追加する事もできます。CSSはインライン記述になってますので以下のアクションフックで標準のCSSの後に追加されます。

/*
 * CSS を追加する
 * use the `amp_post_template_css` action. 
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_additional_css_styles( $amp_template ) {
	// only CSS here please...
	?>
	nav.amp-wp-title-bar {
		background: #0a89c0;
	}
	<?php
}
add_action( 'amp_post_template_css', 'nendebcom_amp_additional_css_styles' );

※例では いちばん上の帯のところの色を変更しています。

 
 

Googleアナリティクスを追加する

AMP用のGoogleアナリティクスは独自のコードを使いますので必要なのは「UA-XXXXX-Y」(property ID)の部分だけです。
以下のコードの「UA-XXXXX-Y」の所を置き換えてください。

/*
 * Analytics
 * To output proper analytics tags, you can use the `amp_post_template_analytics` filter:
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_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',
				),
			),
		),
	);
	return $analytics;
}
add_filter( 'amp_post_template_analytics', 'nendebcom_amp_add_custom_analytics' );

 
 

構造化データ(schema.org)用の画像を変更したい

AMP 構造化データ(schema.org)用の画像
AMPプラグインでは構造化データ(schema.org)用のページで使っている画像データも送っています。しかしAMPでは画像の幅が696px以上となっていますがAMPプラグインではチェックしていません。
そこで以下のコードを使えば696px未満の画像を取得しないようにして、画像が無い場合は指定の代替え画像を送るようにします。
下の「代替え画像のURL」「代替え画像の幅 例 800」「代替え画像の高さ 例 600」を変更してください。

/*
 * 構造化データ(schema.org)用の画像を変更 JSON-LD
 *
 * @since AMP Plugin 0.3.2
 * License: GPLv2 or later
 */
function nendebcom_amp_modify_image_jsonld( $metadata, $post ) {

	//投稿内物件画像検索
	$post_image_meta = nendebcom_amp_get_image_in_post( $post->ID );
	if( !empty( $post_image_meta ) ){
		$metadata['image'] = $post_image_meta;
	}
	return $metadata;
}
add_filter( 'amp_post_template_metadata', 'nendebcom_amp_modify_image_jsonld', 10, 2 );

//投稿内物件画像検索
function nendebcom_amp_get_image_in_post( $post_id ) {

	global $wpdb;

	//image Width Min limit
	$photo_sizes_min = apply_filters( 'photo_sizes_min', 696 );

	//image Type
	$photo_size = apply_filters( 'nendebcom_amp_photo_size', 'full' );	//thumbnail、medium、large、full 

	//画像
	$main_image_url     = '';
	$main_image_width   = '';
	$main_image_height  = '';

	if( $post_id ){

		//アイキャッチ画像
		if( empty( $main_image_url ) ){
			//thumbnail、medium、large、full 
			$eye_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ), $photo_size );
			if( $eye_image ){
				//Supported image formats
				$file_type= strtolower( substr( strrchr( $eye_image[0], '.' ), 1 ) );
				if ( $file_type == 'jpg' || $file_type == 'png' || $file_type == 'gif' ){
					//元画像が大きいかどうか
					$image_width  = $eye_image[1];
					if( $image_width >= $photo_sizes_min ){
						$main_image_url     = $eye_image[0];
						$main_image_width   = $eye_image[1];
						$main_image_height  = $eye_image[2];
					}
				}
			}
		}

		//記事内画像
		if( empty( $main_image_url ) ){

			$_post = get_post( $post_id ); 
			$post_content = $_post->post_content;
			$output = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post_content, $matches );
			if( $output> 0 ){
				foreach ( $matches[1] as $image ) {

					//サムネイル画像から画像ID検索
					preg_match( '/([^\/]+?)(-e\d+)?(-\d+x\d+)?(\.\w+)?$/', $image, $match );
					$post_name = $match[1];
					$sql = "SELECT ID FROM $wpdb->posts WHERE post_name = %s AND post_type = 'attachment'";
					$sql = $wpdb->prepare( $sql, $post_name );
					$attachmentid = $wpdb->get_var( $sql );

					//無かった場合URLから画像ID検索
					if( !$attachmentid ){
						$post_name = $matches[1][0];
						$sql = "SELECT ID FROM $wpdb->posts WHERE guid = %s AND post_type = 'attachment'";
						$sql = $wpdb->prepare( $sql, $post_name );
						$attachmentid = $wpdb->get_var( $sql );
					}

					if( $attachmentid ){
						//thumbnail、medium、large、full 
						$post_img = wp_get_attachment_image_src( $attachmentid , $photo_size );
						if( $post_img ){
							//Supported image formats
							$file_type= strtolower( substr( strrchr( $post_img[0], '.' ), 1) );
							if ( $file_type == 'jpg' || $file_type == 'png' || $file_type == 'gif' ){
								//元画像が大きいかどうか
								$image_width = $post_img[1];
								if( $image_width >= $photo_sizes_min ){
									$main_image_url     = $post_img[0];
									$main_image_width   = $post_img[1];
									$main_image_height  = $post_img[2];
									break;
								}
							}
						}
					}

				}
			}
		}

	}

	if( $main_image_url ){
		$post_image_meta = array( 
			'@type'  => 'ImageObject', 
			'url'    => $main_image_url, 
			'width'  => $main_image_width, 
			'height' => $main_image_height, 
		); 
	}else{
		$post_image_meta = array( 
			'@type'  => 'ImageObject', 
			'url'    => '代替え画像のURL', 
			'width'  => '代替え画像の幅 例 800', 
			'height' => '代替え画像の高さ 例 600', 
		); 
	}
	return $post_image_meta;
}

※AMPプラグインでは画像取得の部分は「TODO: move to a utils class?」となっていましたので今後のバージョンアップでいいのが出来てくるかもしれません。

 
 

あとがき

WordPress AMPプラグインは、さすが Automattic社製 だけあって 大部分がフックやフィルターでカスタマイズできるようになってます。おかげでAMPプラグインをまったく変更せずにカスタマイズできました。このあたりはいろいろ勉強になりますね。