SANGO｜ヘッダーお知らせ欄の直下に広告を表示する方法

はじめに

前回はヘッダーの下に広告を表示する方法を紹介しました。

今回もヘッダー下に広告を表示するわけですが、前回との違いは”お知らせ欄の直下”に広告を表示させることです。

今回の方法を使うと広告がコンテンツ幅を超えて表示されるようになります。横幅がかなりデカくなるので主に関連コンテンツを設置するときに使うといいかなと思います。

見た目

これが

こうなります。

この幅で表示できるのはPCのみです。モバイルでは端末の幅に合わせた表示になります。

あまり使い道はありませんが、まとめサイトのように作りたい場合は検討の価値があると思います。

コンテンツ幅を超えたカスタマイズ方法

前回は「entry-content.php」と「entry-header.php」を使いましたが、今回は「entry-content.php」と「header.php」を編集します。

まだ子テーマに上記phpファイルをアップロードしていない人は、まずはFTPソフトを使って子テーマにファイルを作成しておいてください。

ステップ1：entry-content.phpを編集する

<section class="entry-content cf">
  <?php
	$show_ads = ( get_post_meta( $post->ID, 'disable_ads', true ) ) ? null : "1";
    // 記事の中身
    the_content();
    // 分割ページのページネイション
    wp_link_pages( array(
      'before'      => '<div class="page-links dfont">',
      'after'       => '</div>',
      'link_before' => '<span>',
      'link_after'  => '</span>',
    ) );
    // 記事下広告（ウィジェットで設定）
    if( wp_is_mobile() && is_active_sidebar('ads_below_contents_mb') && $show_ads ) {
      dynamic_sidebar('ads_below_contents_mb');
    } elseif( !wp_is_mobile() && is_active_sidebar('ads_below_contents_pc') && $show_ads ) {
      dynamic_sidebar('ads_below_contents_pc');
    }
  ?>
</section>

前回と同じく、上記コードを「entry-content.php」に上書きしてください。上記コードは4行目にある、

    // タイトル下広告（ウィジェットで設定）
    if( wp_is_mobile() && is_active_sidebar('ads_below_title_mb') && $show_ads ) {
      dynamic_sidebar('ads_below_title_mb');
    } elseif( !wp_is_mobile() && is_active_sidebar('ads_below_title_pc') && $show_ads ) {
      dynamic_sidebar('ads_below_title_pc');
    }

を削除したものになります。

このコードを「header.php」に移動するので「entry-content.php」からは削除しておきます。削除しておかないとヘッダーとタイトル下に同じ広告が重複して表示されてしまいます。

ステップ2：header.phpを編集する

「header.php」の一番下（お知らせ欄の下）に

  <?php
    $show_ads = ( get_post_meta( $post->ID, 'disable_ads', true ) ) ? null : "1";
    // タイトル下広告（ウィジェットで設定）
    if( wp_is_mobile() && is_active_sidebar('ads_below_title_mb') && $show_ads ) {
      dynamic_sidebar('ads_below_title_mb');
    } elseif( !wp_is_mobile() && is_active_sidebar('ads_below_title_pc') && $show_ads ) {
      dynamic_sidebar('ads_below_title_pc');
    }?>

このコードを追加します。

このコードが先ほど削除したコードです。要はコードを移動したってだけですね。

注意点

固定ページを問わず全ページに広告が表示される

この方法で広告を配置した場合は1点だけ注意点があります。それはすべてのページに広告が表示されるということです。

本来なら広告が表示されない固定ページやカテゴリーページなどにも表示されます。利用規約やお問い合わせといったページにも表示されるようになるため、気になる人はこのカスタマイズをしないほうがいいでしょう。

しかし、回避方法がないわけではありません。

特定のページのみ広告を非表示にする方法

もしヘッダー広告を非表示にしたいという場合は、広告を非表示にしたいページに下記コードを貼り付けてください。

<style>
div.widget_text.sponsored {
    display: none;
}
</style>

ページ内のどこでもいいので、カスタムHTMLで上記コードを貼り付けてください。そうするとヘッダー下の広告を非表示にできます。

まとめ

タイトル下ってPCとモバイルで分ける価値があまりなかったのですが、これで「PCは関連コンテンツ」「モバイルはディスプレイ広告」というような配置にできました。

あまり使い道のないカスタマイズですが、一応備忘録として残しておきます。