条件分岐を行い3番目の記事と最後の記事の後にadsense広告を挿入
テーマファイルを直接編集せずフィルターフックで調整する
WordPressのループ系のページで記事と記事の間に広告を表示する方法。
ループ系のページとは、
- トップページ
- カテゴリページ
- アーカイブページ
- タグページ
などの記事を時系列で表示するタイプのページを指す。
それらのページの記事のすき間に広告を挿入する方法を書いてみたいと思う。
テーマファイルをダイレクトに編集する方法
トップページの場合であれば、テーマを構成するファイルのindex.phpを直接編集する方法で対応可能。具体的には、
<?php /* The loop */ ?> <?php $i==0; ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php if ( $i == 2 ) : ?> 広告コードをここに貼り付け <?php endif; ?> <?php $i++ ?> <?php endwhile; ?>
index.phpを上のように変更することで、3番目の記事の後に広告を挿入することができる。カテゴリページやアーカイブページでも上のコードのように、have_posts()を利用した記事の繰り返し処理が行われているので、category.phpやarchive.phpの該当部分を同様にカスタマイズすれば、3番目の記事の後に広告を入れることが可能。
フィルターフックを利用した方法
上で紹介したテーマファイルを調整する方法は、オーソドックスなカスタマイズ手法として利用されているが、記事の後は後でもcontent領域に広告を挿入したい場合には都合が悪くなることがある。
具体的には、HTMLでcontent領域とbody領域で幅(width)に差がある場合などがあげられる。その場合には、テーマをダイレクトに調整した上のやり方だと、記事に対して広告が左にずれて表示されてしまう。
content領域に広告を追加するためには、フィルターフックを利用することで、広告の挿入が可能。
add_filter('the_content', 'insert_advertisement'); function insert_advertisement($text) { if( is_home() ) { global $wp_query; $post_index = $wp_query->current_post; // 記事の順番 $post_count = $wp_query->post_count; // 記事の件数 // 3番目と最後の記事の後に広告を挿入 if( $post_index == 2 or $post_index+1 == $post_count ) { $add = <<< EOF 広告コードをここに挿入 EOF; $text = $text.$add; } } return $text; }
$wp_queryを利用して記事の順番や件数などを取得することが出来るので、その値を条件として使い広告を挿入している。
$wp_queryで利用できるプロパティやメソッドは以下のURLを参照
http://codex.wordpress.org/Class_Reference/WP_Query
フィルター内では、
if( is_home() )
として、トップページ及び
/page/2/
などの過去のエントリーをループ表示するページのみに作用するフィルターとした。カテゴリページなどにも同様の処理を行いたい場合には、
http://codex.wordpress.org/Function_Reference/is_home
を参考にis_home()以外のConditional Tagsを調べることが出来る。Conditional Tagsは制作や開発時に有効に活用できるTipsです。
フィルターを利用する方法でもテーマをダイレクトに調整する方法でも、ループ内の任意の記事間に広告を入れることが出来るが、cssの設定によっては、content領域に広告を入れる必要が生じるかもしれない。そのような場合には、フィルターフックを利用して対応する方法もあるので、広告の挿入を検討している場合には知っておきたいノウハウである。
オイラのテーマだと、多分、このファイルだろうけど、どうやったらいいかわからない。どうか、アドセンス毎日クリックするから教えて下さい。
var page_scroll_amount_for_sticky = ;
<div class="full_width blog_vertical_loop">
<div class="full_width_inner" >