WordPress Snippet

ワードプレスをカスタマイズしよう

AMPプラグイン ver0.4

このプラグインの最終アップデートは、8 months agoです。この記事を書いている過程で、Raindropsテーマのカスタマイザーの動作に支障が出ました。(変更が保存できなくなる現象)
よく考えてみると、このプラグインの最終アップデートは、4.7以前のようです。

4.7は、customize partial edit shortcutの追加や、カスタマイザーがカスタム投稿タイプに変更された時期で

Raindrops自体も、プラグイン固有のカスタマイザーを前提にした作りにはなっておらず。以下のように、本来のカスタマイザーで追加しているjavascriptが、AMPカスタマイザーにも表示されているという現象がありました。

原因部分は明確になっていませんが、上部のツールバー何かしらを操作した場合に、本来のカスタマイザーのカスタマイザーのカスタム投稿に何らかの影響を与えて、カスタマイザーの保存操作ができなくなるような現象になっているのではないか、と推定しています。

このような事から、Raindropsテーマを使用中の場合は、画像内の上部のリンクや、サイドバーの幅変更の作業は行わないほうが良さそうです。

私の環境では、次のAMPバージョンにアップデートするまでの間、AMPのカスタマイザー機能を停止する事にしました。

Raindropsテーマでは、AMPプラグインがアクティブな場合、テーマディレクトリにamp.cssを作成すると、AMPで表示する場合のスタイルを変更できる機能があります。

ver0.4にアップデートしてから、もう8か月もたつのですが、今更ながらこのamp.cssのスタイルの一部が適用されていないことがわかりました。

プラグインを使っている人は、おそらく既に対応済みだとは思いますが、メモに残します。

ver0.4のテンプレートは、以下のようになっています。

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

	<header class="amp-wp-article-header">
		<h1 class="amp-wp-title"><?php echo wp_kses_data( $this->get( 'post_title' ) ); ?></h1>
		<?php $this->load_parts( apply_filters( 'amp_post_article_header_meta', array( 'meta-author', 'meta-time' ) ) ); ?>
	</header>

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

	<div class="amp-wp-article-content">
		<?php echo $this->get( 'post_amp_content' ); // amphtml content; no kses ?>
	</div>

	<footer class="amp-wp-article-footer">
		<?php $this->load_parts( apply_filters( 'amp_post_article_footer_meta', array( 'meta-taxonomy', 'meta-comments-link' ) ) ); ?>
	</footer>

</article>

version0.3のテンプレート

<body>
<?php $this->load_parts( array( 'header-bar' ) ); ?>
<div class="amp-wp-content">
	<h1 class="amp-wp-title"><?php echo wp_kses_data( $this->get( 'post_title' ) ); ?></h1>
	<ul class="amp-wp-meta">
		<?php $this->load_parts( apply_filters( 'amp_post_template_meta_parts', array( 'meta-author', 'meta-time', 'meta-taxonomy' ) ) ); ?>
	</ul>
	<?php echo $this->get( 'post_amp_content' ); // amphtml content; no kses ?>
</div>
<?php do_action( 'amp_post_template_footer', $this ); ?>
</body>

つまり、amp-wp-contentクラスは、amp-wp-article-contentクラスに変更されているため、version0.3以前に設定したスタイルは適用されなくなったという事です。

amp-wp-content、amp-wp-title等を指定している場合は、クラス名を新しいものに書き換える必要がありそうです。

0.4で追加されたカスタマイザーの設定項目を削除して、0.3のテンプレートを使い続けるためには以下の方法があるそうです。

if ( function_exists( 'amp_backcompat_use_v03_templates' ) ) {
	amp_backcompat_use_v03_templates();
}

Raindropsテーマに限って言うと、
テーマディレクトリに、amp-single.phpを置くと、AMPのテンプレートはamp-single.phpが適用されるのでそういう方法でも対応できます。