AMP対応時にremove_filterを利用してWP Social Bookmarking Lightを無効化する方法

Pocket

先日、このweblogをAMP(Accelerated Mobile Pages)対応させました。
利用したPluginはAutomatic作成の「AMP」と、 Ahmed Kaludi, Mohammed Kaludi作成の「Accelerated Mobile Pages」になりますが、それらの設定の話はまた後日として、remove_filterを利用した話を紹介します。

AMP対応時に困るWP Social Bookmarking Lightへの対応

AMP対応への経緯

AMPとは、通信回線が低速であることが多いモバイルに対して、Googleの検索結果から、即時にページが表示できるように、予めCDNにモバイル用のページをキャッシュさせておくという仕様のもので、最近ではかなり導入しているメディアが多くなりました。
また、現状ではSEO上の有利は無いとしているのですが、インターネットの通信に占めるモバイル率は年々増加し、Googleもモバイルを重視していくことを発表するといった時代の流れの中で、そろそろ対応しなければならないという考えで対応を行いました。

AMP制約によって正しく利用できない「WP Social Bookmarking Light」

モバイルでも高速に表示をさせるという目的のため、AMP用に許容されるHTMLタグはかなり制限され、またJavascriptも禁止されるなど、かなり仕様は尖ったものになっていて、静的ページ、読み物のページというものがAMPの対象となっています。
そうした煽りを受け、FacebookやtwitterなどのJavascriptを用いたソーシャルボタンというものが利用できない仕組みになっています。
そのため、本weblogで利用しているPlugin「WP Social Bookmarking Light」が利用できない事象に対応せざるを得ない状況となりました。

実際の状況を画像で見ますと、PC用の通常ページでは以下のように「WP Social Bookmarking Light」の表示があります。

ところが、これをAMP用のPluginを導入して、何もしない状況だと、Javascriptの読み込みが無効化され、以下のような表示となってしまいます。
Plugin「Accelerated Mobile Pages」によって、ソーシャルボタンを表示させることができるのですが、これは単なるリンクになっていて、Javascriptを利用しないものとなっています。

というわけで、「WP Social Bookmarking Light」を無効化せざるを得ないのですが、当初はCSSで対応をしていたのですが、いろいろと調べる中で、apply_filterやaction_filterを無効化するremove_filterという関数があることがわかりこれを利用することになりました。

AMP対応時にWP Social Bookmarking Lightを無効化する方法

具体的なコードは以下のようになります。

function amp_wp_social_bookmarking_light_the_content_off($content) {
    if (preg_match('!amp/?$!', $_SERVER['REQUEST_URI'])) {
        remove_filter('the_content', 'wp_social_bookmarking_light_the_content');
    }
    return $content;
}
add_filter('the_content', 'amp_wp_social_bookmarking_light_the_content_off', 1);

簡単に説明しますと、「WP Social Bookmarking Light」のソースコードを見ますと、「the_content」というフックに対して、「wp_social_bookmarking_light_the_content」という関数をスタックしています。
このスタックした値を実行前に削除することが可能なのが、remove_filterというWordPress関数になります。
指定のフックに対して、既に指定されたユーザー関数名を指定して取り除くというものです。
また、add_filterで処理の優先度を1(またはおそらく9以下)に指定するというのも大事なポイントです。これは、wp_social_bookmarking_light_the_contentが実行される前に、このスタックされた関数を取り除く必要があるためです。

その他、ampが実行されているページなのかどうかをURLから判断(preg_match(‘!amp/?$!’, $_SERVER[‘REQUEST_URI’]))しているのですが、これについてはあまり良い実装とは言えないだろうと思います。
任意のpluginが実行済みなのかどうか、任意のフィルターが実行済みなのかどうかを判定した上で当該処理を実行することが本来であるべきですが、残念ながらWordPressにはまだ詳しくなく、詳細を調べることは出来ませんでした。

まとめ

AMPの導入は当初はよくわからなかったのですが、それほど手間のかかるものではありませんでした。
特にautomatic社の「AMP」だけでは、不十分なところが多いので、Ahmed Kaludi, Mohammed Kaludi作成の「Accelerated Mobile Pages」を同時に利用することをお勧めしたいと思います。
この「WP Social Bookmarking Light」対応以外では、AdsenseやCSSや、ページレイアウトの調製といった作業が必要になったのですが、さほど悩むところはありませんでした。
もし、課題が残っているとすると、HatenaやPocketのソーシャルボタンを追加したいなといったところです。

それではみなさまも良いWordPressライフを。
AMP対応の記事も余裕があれば書いてみたいと思います。

Pocket