コーポレートサイトにおすすめのWordPressテーマ!!詳細はこちら▶▶

Google Adsenseのインフィード広告をトップページのカテゴリー新着記事に入れてみた

前回の記事の続きです。トップページの特定のカテゴリーの新着記事を表示するカスタマイズをしたのですが、そこにAdSenseのインフィード広告を入れてみました。

こんな感じ

現在このブログのトップページで実装しています。

インフィード広告とは

インフィード広告はコンテンツのフィードに馴染む形で配信される広告です。
サイトデザインの邪魔することなく広告が設置でき、ユーザーの関心を得やすい効果的な広告タイプだと言われています。

ネイティブ インフィード広告 – AdSense ヘルプ

GoogleAdSenseではインフィード広告を作成しブログに導入することができるのですが、対応していないテーマだと少し難しかったりします。

SANGOユーザーならお馴染みのPORIPUだとトップページの最新記事一覧に簡単にインフィード広告を設置できますね。

PORIPU-SANGO公認の子テーマ | Just another SANGO Theme

ここでは前回のカスタマイズのカテゴリーの新着記事一覧にインフィード広告を入れるやり方をご紹介します。PORIPUの用にスマートなやり方ではなく、テーマファイルの編集が必要です。

インフィード広告の挿入方法

GoogleAdSenseでインフィード広告を作成

記事フィードのデザインに合わせて広告コードを発行する。詳しいやり方はPORIPUの作者でもあるマサオカブログさんの記事がわかりやすいです。
SANGOにAdsenseインフィード広告を設置する

前回の記事のhome.phpを編集する

編集方法は後述します。

home.phpの編集

home.php

<!-- カテゴリー1新着記事一覧ここから-->
<div class="sidelong cf">
<h3 class="center strong top-title"><i class="fa fa-thumb-tack fa-fw"></i>表示したいカテゴリー1</h3>

<?php
$count = '1';
$args = array(
             'posts_per_page' => 5, // 表示する投稿数
             'orderby' => 'date',
             'order' => 'DESC',
             'category_name' => 'Guternberg', // 表示したいカテゴリーのスラッグ
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
    while ($the_query->have_posts()) : $the_query->the_post();
?>
<?php
if($count == '4'){
?>
<!--ここにAdSenseのインフィード広告のコードを入れる-->
<?php
}
$count=++$count;
?>

                <article class="sidelong__article">
                        <a class="sidelong__link" href="<?php the_permalink() ?>">
                            <p class="sidelong__img">
                                <img src="<?php echo featured_image_src('thumb-160'); ?>" alt="<?php the_title(); ?>">
                            </p>
                            <div class="sidelong__article-info">
                                <?php if (!get_option('remove_pubdate')):?>
                                <time class="updated entry-time dfont" datetime="<?php the_time('Y-m-d'); ?>"><?php echo get_post_time('Y.m.d D');?></time>
                                <?php endif; ?>
                                <h2><?php the_title(); ?></h2>
                                <?php if (function_exists('scc_get_share_total') && get_option('snscount')) {
    echo ' <span class="count-btn yokonaga">'.scc_get_share_total().'shares</span>';
}?>
                            </div>
                        </a>
                        <?php 
                newmark();
                 if (!is_archive()) {
                     output_catogry_link();
                 }
        ?>
                </article>
<?php endwhile; endif; ?>
</div>
<?php wp_reset_postdata(); ?>
<!-- カテゴリー1新着記事一覧ここまで -->

カテゴリーの新着記事の部分を上記の様に赤字のコードを追加します。

コード

if($count == '4'){

この数字は4番目に広告を表示する位置を決めています。2列配置なので表示する投稿数は奇数にした方が綺麗だと思います。

参考:【stinger3】既存の関連記事内にインフィード広告を挿入する方法

インフィード広告の見た目を整える

もっと良いやり方があるのかもしれませんが、広告のサイズを周りのフィードに馴染ませるため、以下のCSSを追記しました。

home.php

<style>
.sidelong__article.infeed-top {
    max-height: 117px;
    height: 100%;
}
</style>

2つ目のカテゴリー一覧にもインフィード広告を入れる場合は同様の編集をして下さい。あとはhome.phpを保存して上書きアップロードすればOKです。

注意
テーマファイルの編集をするときは事前に必ずバックアップを取ってから行って下さい。

あまり需要のないカスタマイズかもしれません^^;
別のテーマで実装するときなどにも使えると思いますので、何かでお役に立てば幸いです。

トップページに特定のカテゴリーの新着記事を表示するSANGO用のhome.phpを作ってみた