プログラミング

★2022年最新★STORK19のトップページ(ビッグ)の一覧にAdsense広告を表示させる

-プログラミング

このブログはテーマにSTORK19を使っています。カスタマイズもしやすいので、お気に入りです。

今回はSTORK19でトップページのレイアウトをビッグにしたときに一覧中にGoogle Adseseの広告を挟む方法を説明し行きます。

イメージとしてはこのように記事と記事の間に広告表示するようにしていきます。

STEP1|Google Adsenseで広告の作成

1.インフィード広告を使うので新規作成を行います。

2.自動で広告スタイルを作成するを選択してサイトのURLを記入します。

サイトURL横のプルダウンでDesktopを選択してページをスキャンをクリックします。

3.スキャンが終わり画面が切り替わったら何もせずに次へをクリックします。

4.ユニット名を付けて保存してコードを取得をクリックします。

調整をしたい場合は、任意で行ってください。特に無ければデフォルトのままで良いです。

5.広告のコードをメモ帳などに控えておいてください。

STEP2|STORK19のテーマのカスタマイズ

1.管理画面のサイドバーの外観からテーマエディタを開きます。

2.テーマファイルの中からpart配下のarchive_big.phpを開きます

パスは「parts/archive_big.php」です。

親テーマの編集はリスクが高いので、子テーマの編集を行うことを推奨します。

子テーマを使う場合は、親テーマからarchive_big.phpをコピーすればOKです。

ソースを以下のように書き換えます。書き換えたら保存します。

コードを追加したのは4~9行目です。

4行目 : 記事数をカウントする変数を定義
6行目 : 記事数でカウントアップ
7~9行目 :広告を表示

となります。この場合、3記事目に広告を表示します。

<?php if (have_posts()) :?>
<div class="archives-list big-list cf">
	
<?php $count=0 ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++ ?>
<?php if ($count == 3): ?>
Adsenseの広告コードを貼り付ける
<?php endif; ?>

<h1 class="entry-title single-title<?php echo stk_post_newmark();?>" itemprop="headline" rel="bookmark"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
<?php echo stk_archives_post_meta('big'); ?>

<?php if ( has_post_thumbnail() ) :?>
<figure class="eyecatch">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
<?php
	the_post_thumbnail();
	 if($pt_caption = get_post(get_post_thumbnail_id())->post_excerpt) {//caption
		 echo '<figcaption class="eyecatch-caption-text">'.$pt_caption.'</figcaption>';
	 }
?>
</a>
</figure>
<?php endif; ?>
</header>

<section class="entry-content cf">
<?php echo stk_archives_description(); ?>
<div class="btn-wrap simple"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">続きを読む</a></div>
</section>
</article>
<?php endwhile; ?>
</div>

<?php 
	elseif(is_search()):
		echo stk_archives_notfound();
	else :
	endif;
?>

以上で完了です。

記事が表示されるまでは少し時間が掛かる場合があります。

まとめ

テーマを書き換えるので少し抵抗あるかもしれませんが、意外と簡単に広告表示できます。

興味あれば是非試してみてください!

テーマのバックアップを忘れずに!!!

-プログラミング