「このウィジェットは通常ページの時だけ表示したい」
「AMPページでは表示したくない」
そんなこと、よくあります。
よね?
WordPress(ワードプレス)をAMP化する人気プラグイン「AMP for WP」において「AMP/通常ページでウィジェットの表示を切り替える」方法が見つかったのでメモします。
目次
AMPページかどうかをチェックするコード
プラグイン「AMP for WP」(Accelerated Mobile Pages)を使っている場合、「表示されているのがAMPページかどうか」を判定するのは以下のコードです。
if ( function_exists( 'ampforwp_is_amp_endpoint' ) && ampforwp_is_amp_endpoint() ) {
//ここにAMPページでのみ表示させたいことを書く
}
参考:How to detect if it’s AMP page with Function?
ご覧の通り、冒頭に
if ( function_exists( 'ampforwp_is_amp_endpoint' )
と書かれている(プラグインが動作しているかどうかを判断している)ので、たとえ「AMP for WP」のプラグインを停止させてもエラーは発生しません。
「AMP for WP」が有効になっており、かつAMPページの場合にのみ動作するコードです。
通常ページの時だけウィジェットを最初のh2手前に表示させるコード
さっそく実際につかってみましょう。
以下は、「記事の最初のh2見出しの直前に表示されるウィジェット」を追加するコードです。
通常ページの時のみ動作します。
functions.phpに追記してください。
※functions.phpへの追記・修正は自己責任です。必ずバックアップを取ってから実行してください
// 最初のh2手前に表示するウィジェット(通常ページのみ)
register_sidebars(1,
array(
'name'=>'最初のh2前(通常ページ)',
'id' => 'widget-in-article',
'description' => '投稿本文中、最初のh2前に表示されるウイジェット',
'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-in-article-title">',
'after_title' => '</div>',
));
// h2見出しを判別する正規表現を定数にする
define('H2_REG', '/<h2.*?>/i');//h2見出しのパターン
// 本文中にh2見出しが最初に含まれている箇所を返す(含まれない場合はnullを返す)
// h3-h6しか使っていない場合は、h2部分を変更してください
function get_h2_included_in_body( $the_content ){
if ( preg_match( H2_REG, $the_content, $h2results )) {//H2見出しが本文中にあるかどうか
return $h2results[0];
}
}
// 投稿本文中の最初のh2見出し手前にウィジェットを追加する処理
function add_widget_before_1st_h2($the_content) {
if ( ! ( function_exists('ampforwp_is_amp_endpoint' ) && ampforwp_is_amp_endpoint() ) ){ //通常ページなら
if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
is_active_sidebar( 'widget-in-article' ) //ウィジェットが設定されているとき
) {
//広告(AdSense)タグを記入
ob_start();//バッファリング
dynamic_sidebar( 'widget-in-article' );//本文中ウィジェットの表示
$ad_template = ob_get_clean();
$h2result = get_h2_included_in_body( $the_content );//本文にh2タグが含まれていれば取得
if ( $h2result ) {//h2見出しが本文中にある場合のみ
//最初のh2の手前に広告を挿入(最初のh2を置換)
$count = 1;
$the_content = preg_replace(H2_REG, $ad_template.$h2result, $the_content, 1);
}
}
}//ampページ判定ifの閉じかっこ
return $the_content;
}
add_filter('the_content','add_widget_before_1st_h2');
コードのほとんどは以下の参考リンク(寝ログ様)の記事を参考にさせていただきました。
参考:コピペ一発!WordPress本文中にウィジェットでアドセンス挿入するカスタマイズ方法
やっていることは単純で、関数の最初に「AMPでないなら(通常ページなら)このウィジェットをh2前に表示する」という条件分岐を追加しただけです。
AMPページの時だけウィジェットを最初のh2手前に表示させるコード
逆に、AMPのときだけ表示させるウィジェットはこちら。
// 最初のh2手前に表示するウィジェット(AMPページのみ)
register_sidebars(1,
array(
'name'=>'最初のh2前(AMPページ)',
'id' => 'widget-in-article_amp',
'description' => '投稿本文中、最初のh2前に表示されるウイジェット',
'before_widget' => '<div id="%1$s" class="widget-in-article %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-in-article-title">',
'after_title' => '</div>',
));
// h2見出しを判別する正規表現を定数にする
define('H2_REG_AMP', '/<h2.*?>/i');//h2見出しのパターン
// 本文中にh2見出しが最初に含まれている箇所を返す(含まれない場合はnullを返す)
// h3-h6しか使っていない場合は、h2部分を変更してください
function get_h2_included_in_body_amp( $the_content ){
if ( preg_match( H2_REG_AMP, $the_content, $h2results_amp )) {//H2見出しが本文中にあるかどうか
return $h2results_amp[0];
}
}
// 投稿本文中の最初のh2見出し手前にウィジェットを追加する処理
function add_widget_before_1st_h2_amp($the_content) {
if ( function_exists('ampforwp_is_amp_endpoint' ) && ampforwp_is_amp_endpoint() ) { //ampページなら
if ( is_single() && //投稿ページのとき、固定ページも表示する場合はis_singular()にする
is_active_sidebar( 'widget-in-article_amp' ) //ウィジェットが設定されているとき
) {
//広告(AdSense)タグを記入
ob_start();//バッファリング
dynamic_sidebar( 'widget-in-article_amp' );//本文中ウィジェットの表示
$ad_template = ob_get_clean();
$h2result_amp = get_h2_included_in_body_amp( $the_content );//本文にh2タグが含まれていれば取得
if ( $h2result_amp ) {//h2見出しが本文中にある場合のみ
//最初のh2の手前に広告を挿入(最初のh2を置換)
$count = 1;
$the_content = preg_replace(H2_REG_AMP, $ad_template.$h2result_amp, $the_content, 1);
}
}
}//ampページ判定ifの閉じかっこ
return $the_content;
}
add_filter('the_content','add_widget_before_1st_h2_amp');
まとめ:こまったら英語で検索しよう
今回、探していたコードは日本語情報では見つかりませんでした。
Googleアメリカ版にて「widget hide amp page ampforwp」と検索したところ、1ページ目で解決策が見つかりました。
「これ実現したいな」
「でも日本語だとググっても情報が出てこないな」
というときは英語でググるとだいたいヒットします。
人気の高いプラグインや拡張機能なら、なおさらです。
Google日本語版ですと「あまり関連性のない日本語サイト」ばかりが出てきてしまうため、Googleアメリカ版を使うことをおすすめします。