Webデザイナーとして活動しているサブローのブログです。
  • HOME
  • WordPressでmoreタグに広告を挿入する方法は、記事を上下に分割するコードが便利だった
2017 1 26

WordPressでmoreタグに広告を挿入する方法は、記事を上下に分割するコードが便利だった

この記事は4分ほどで読めます
この記事をSNSでシェアする方はこちら

どうも、サブロー(@saburo_design)です。

先日も触れたんですがGoogleアドセンスは収益源としてはとてもすばらしいのですが、表示速度にちょっと難がありまして(特にスマホ)、Googleアドセンス広告を貼るのは特定のページだけにしようと言う事になりました。

アドセンスの配置
アドセンスの配置

そしてGoogleアドセンスの設置場所は記事ページの『①moreタグ(記事の途中)』『②記事本文の最後』『③関連記事の後』となりました。そしてさらにそこから、カスタムフィールドで記事ごとにアドセンスの表示非表示を切り替えられるようにしようと思った時にとある問題にぶち当たりました。それは『①moreタグ(記事の途中)』の広告に条件分岐コードを入れられない事でした。

このサイトでも使わせて頂いているWordPressのテーマ『BizVektor(ビズベクトル)』はデフォルトで『①moreタグ(記事の途中)』『②記事本文の最後』『③関連記事の後』に広告を挿入できるという便利な機能を備えておりまして、これまでもその機能を利用してGoogleアドセンスを全記事の中に一括挿入していたのですが、その機能では残念ながら条件分岐コードが使えませんでした。

仕方がないのでBizVektorの広告挿入機能は使わず、テンプレートファイルにアドセンスコードを直接記述する事にしたのですが『②記事本文の最後』『③関連記事の後』は簡単にできても『①moreタグ(記事の途中)』だけはどうすればいいのかよく分かりませんでしたが、先日ようやく実現できたのでご紹介します。

php the_contentをmoreタグのところで分割する

↓こちらのサイトを参考にさせて頂きました。ありがとうございます。

これはカンタン! 記事をmoreタグの前後で分割して出力する方法 | [M] mbdb (モバデビ)

記事の本文を出力するphp the_content();の代わりに次のコードを記入します。

<?php if(strpos(get_the_content(),'id="more-')) :
global $more; $more = 0;
the_content(''); ?>
<!-- moreタグの広告を挿入 -->
<?php $more = 1;
the_content('', true );
else : the_content();
endif; ?>

これでmoreタグのところで記事本文が上下に分割されて、その間に好きなようにコードを書いたりできる訳です。

完璧かよ!

テンプレートの<?php the_content(); ?>をいじるという発想はありませんでした。このおかげで、パソコンやモバイルなどのデバイスごとに表示する広告を条件分岐コードで切り替えられたり、カスタムフィールドでGoogleアドセンスの表示非表示を切り替えられたりできるようになりました。

【例】moreタグの広告をモバイル・PCで切り替える為のコード

<?php if(strpos(get_the_content(),'id="more-')) :
global $more; $more = 0;
the_content(''); ?>
<?php if ( wp_is_mobile() ) : ?>
<!-- スマホでのmoreタグの広告 -->
<?php else: ?>
<!-- PCでのmoreタグの広告 -->
<?php endif; ?>
<?php $more = 1;
the_content('', true );
else : the_content();
endif; ?>

参考になれば幸いです。

【おまけ】moreタグの後に出力される空のpタグについて

moreタグの位置に挿入された広告ですがよく見たら違和感がありました。広告の下に妙なスペースがあるのです。ソースを確認してみるとmoreタグの後に空のpタグが入っており、これが妙なスペースを作り出していました。

気にしなければ別にどうと言うことはありませんが、こういうのすごく気になります。かといってこのpタグを出力しない方法が思いつかなかったのであまりやりたくなかったんですがCSSで非表示にしてしまいました。

<div id="post_googleads">
<!-- moreタグのアドセンスコード -->
</div>

<p></p><!-- 謎のpタグ -->

アドセンスコードを囲っている要素の次にあるpタグを非表示にしてしまうCSSを設定します。post_googleads要素の次の要素ですので隣接セレクタを使用します。上記の例で言えば、

#post_googleads + p {
    display:none;
}

これで空のpタグが非表示にしました。post_googleads要素の次にあるpタグは全て非表示になりますので必要なタグが消えてしまわないよう気をつけてください。

この記事をSNSでシェアする方はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Profile

Web・グラフィックデザイナー
美味しいものを食べに行ったり技術録を書いたり。最近ブログ用のデジカメを買って浮かれています。ツイッターとかインスタグラムもやってますのでフォローもお気軽にどうぞ。
PAGETOP
Copyright © SABURO DESIGN All Rights Reserved.