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

自分のブログでは、Wordpress無料テーマの「Stinger3」を使用しています。

今回やりたいのは、「Stinger3」に標準装備されている「関連記事」の間に、

Googleアドセンスのインフィード広告を挿入する方法を紹介していきます。

※phpを変更するのでバックアップはしっかり取っておきましょう

まず今回編集する「single.php」を開きに行く

外観　＞　テーマの編集　＞　テーマファイル [個別投稿（single.php）]　、をクリック

開けたら文を書き込んでいきます

赤字の部分は新しく書き込む

青字の部分はgoogleアドセンスのインフィード広告を貼り付ける。

↓65行まで省略↓

$count = “1”;
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
‘post__not_in’ => array($post -> ID),
‘posts_per_page’=> 10,
‘category__in’ => $category_ID,
‘orderby’ => ‘rand’,
);
$st_query = new WP_Query($args); ?>
<?php
if( $st_query -> have_posts() ): ?>
<?php
while ($st_query -> have_posts()) : $st_query -> the_post(); ?>
<?php
if($count == “3”){
?>

<!–インフィード広告コードを挿入場所–>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display: block;”
data-ad-format=”fluid”
data-ad-layout-key=”XXXXXXXXXXXX”
data-ad-client=”XXXXXXXXXXXX” data-ad-slot=”XXXXXXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<?php
}
$count=++$count;
?>
<dl>
<dt> <a href=”<?php the_permalink() ?>” title=”<?php the_title_attribute(); ?>”>
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php echo get_the_post_thumbnail($post->ID, ‘thumb110’); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src=”<?php echo get_template_directory_uri(); ?>/images/no-img.png” alt=”no image” title=”no image” width=”110px” />
<?php endif; ?>
</a> </dt>
<dd>
<h4 class=”saisin”> <a href=”<?php the_permalink(); ?>”>
<?php the_title(); ?>
</a></h4>
<p class=”basui”>
<?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 50 ) . ”; ?></p>
<p class=”motto”><a href=”<?php the_permalink(); ?>”>記事を読む</a></p>
</dd>
</dl>
<?php endwhile;
?>
<?php else:
?>
<p>記事はありませんでした</p>
<?php
endif;
wp_reset_postdata();
?>
</div>
</div>
</div>
</div>
<!–/kizi–>
<!–/関連記事–>
<div style=”padding:20px 0px;”>
<?php get_template_part(‘ad’);?>
</div>

<?php comments_template(); ?>
<!–ページナビ–>
<div class=”p-navi clearfix”>
<dl>
<?php
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
<dt>PREV </dt><dd><a href=”<?php echo get_permalink( $prev_post->ID ); ?>”><?php echo $prev_post->post_title; ?></a></dd>
<?php endif; ?>
<?php
$next_post = get_next_post();
if (!empty( $next_post )): ?>
<dt>NEXT </dt><dd><a href=”<?php echo get_permalink( $next_post->ID ); ?>”><?php echo $next_post->post_title; ?></a></dd>
<?php endif; ?>
</dl>
</div>
</div>
<!– END div.post –>
<?php get_footer(); ?>

簡単な文なので説明は不要かもしれませんが自分用に

$count = “1”;

ここで、$countという入れ物に1を入れる。

<?php
if($count == “3”){
?>

ここの”3”という数字は、広告を表示させたい位置を決めている。

なので今回は上から3番目に広告を表示させている。

<?php

if($count == “表示させたい位置“){

?>

<?php
}
$count=++$count;
?>

1+1をして$countに、入れてるだけ

なので2回目のループでは、2+1

3回目のループでは、3+1

今回の表示結果

インフィード広告を綺麗に並べるための広告設定

グーグルアドセンスを表示させる際に、広告の画像イメージと関連記事の加増イメージのサイズが、ガタガタだと恰好が悪いので、インフィード広告の画像設定を指定していきましょう。

グローバル　オプション　＞　パディング

一番右側を”０ｐｘ”に変更

イメージ　＞ サイズ

画像の縦横比　1：1

幅　110　px

これで終了です！お疲れさまでした。