2022.01.11
広告を記事一覧に挿入し、ページ全体の外観を損なわないようにする手順
広告をページ内にうまく忍ばせて違和感をなくそう
広告の位置や大きさはブログ運営するにあたって整えるべき大きなポイントになると考えます。
例えばファーストビューにでかでかと広告を表示させるというのは著しく外観を損ないます。
どんな広告表示の仕方がベストなのか。
結論から言うとさりげなく挿入するです。
記事一覧にさりげなく広告を挿入させることで外観を損なわずコンテンツの一部として調和させることができます。
記事内広告も同様で見出し２つ置きくらいで挿入するのがくどくなくていい塩梅になると思います。
記事一覧ページの設定
記事一覧を表示させいるファイルをエディタで開きます。
今回はindex.phpをいじっていきます。
<div class="l-container">
<div class="p-container">
<div class="p-container__postWrap">
<?php
$the_query = sub_loop(18,$paged);
$counter = 1;
if ($the_query->have_posts()) :
while ($the_query->have_posts()) : $the_query->the_post();
//5の倍数ごとに広告スクリプトに置き換えるように条件分岐させる
if( $counter%5 == 0 ) :
?>
//広告のスクリプト
<div class="p-container__post">
<!-- adsense広告スクリプト -->
</div>
//if文を抜ける
<?php endif; ?>
//普通の記事コンテンツ
<div class="p-container__post">
<a href="<?php the_permalink(); ?>">
<?php
$article_url = wp_get_attachment_url(get_post_thumbnail_id());
$article_bg = "style='background-image:url(" . $article_url . ");'";
?>
<p class="p-container__date"><?php the_time('Y.m.d'); ?></p>
<p class="p-container__postTitle"><?php the_title(); ?></p>
<p class="p-pickup__image__sumbnails" <?php echo $article_bg; ?>></p>
</a>
</div>
<?php
//カウントを加算
++$counter;
?>
<?php endwhile; endif; wp_reset_postdata(); ?>
</div>
</div>
</div>while文の下にif文を追加します。
if( $counter%5 == 0 ) :
counterを5で割った値が0の場合、Trueになるといった処理になります。
counterの初期値は1としているので１回目の条件分岐はFalseになります。
counterの値は最後に++counterでカウントアップされるので結果は以下のようになります。
2÷5≠0 False
3÷5≠0 False
4÷5≠0 False
5÷5=0 True
6÷5≠0 False
・
・
・
Trueになったら広告スクリプトが差し込まれる動きになります。
Falseになった場合は当然通常の記事コンテンツが差し込まれます。