日々の記録

気付いたことや思ったことを書いていく

ブログ

GoogleAdSenseのインフィード広告を入れる方法

投稿日:2021/08/21 更新日:

サイドバーや記事下にはWordPressのウィジェットから簡単にGoogleAdSenseを挿入できる。

しかし、「記事一覧」や記事下の「関連記事」はコードを修正する必要がある

記事一覧のインフィード広告の例

そこで、記事一覧にグーグルアドセンスのインフィード広告を挿入する方法を紹介します。

記事一覧の修正方法

修正するファイル

ワードプレスのダッシュボードを開き、外観→テーマエディター→itiran.phpを開く。

以下のように修正する。

<div class="kanren">
	<!-- 最初のif文を修正する -->
	<?php $gyo=1; if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<dl class="clearfix">
			<dt><a href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>						
              <!-- 記事の表示処理(略) -->
					<?php the_excerpt(); //抜粋文 ?>
				</div>
			</dd>
		</dl>

		<!-- 追加箇所 -->
		<?php if( $gyo == 1 or $gyo == 4 or $gyo == 7 or $gyo == 10){ ?>
		<dl class="clearfix">
			<div class="infeed">
		  <!-- インフィード広告のコード -->
			</div>
		</dl>
		<?php } $gyo++; ?>
    <!-- 追加ここまで -->

	<?php endwhile;
	else: ?>
<!-- 処理が続く…… -->

コードのポイント

<?php $gyo=1; if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

$gyo=1で、後にループに使用する変数を宣言&1を代入する。

<dl class="clearfix">
<div class="infeed">

dlのタグがあることで、記事と広告の間に点々が表示される。

dlタグがない場合、広告と次の記事の間に点々が表示されない

divのタグはなんとなく付けておいた。

<?php if( $gyo == 1 or $gyo == 4 or $gyo == 7 or $gyo == 10){ ?>

何番目の記事に広告を追加するかを設定する。上記は1,4,7,10番目の記事に広告を追加している。

また、上記は記事説明の下にインフィード広告を表示しているが、最初のif文のすぐ下にインフィード広告のコードを記載すると、記事の上に広告が表示されるようになる。どちらがいいかはお好みで。

関連記事一覧の修正方法

修正するファイル

記事一覧と同様に、ワードプレスのダッシュボードを開き、外観→テーマエディター→kanren.phpを開く。

修正方法

itiran.phpの<div class=kanren>を見て、察しのいい読者なら気が付いたであろうが、itiran.phpはkanren.phpを元にしている。

修正方法は上記の記事一覧の方法を参照。

まとめ

プログラミングの知識があってよかった。

-ブログ
-,


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

GoogleAdSenseがスマホで見たときに、右側が切れてしまう

グーグルアドセンスに通ったのがうれしくてさっそくブログにアドセンスをペタペタ貼ってみた。 アドセンスを貼ること自体は、 WordPressのダッシュボード→外観→ウィジェット からサイドバー等に簡単に …

ほぼ自分しか見てないブログなのに、Google AdSenseに申請したら通ってしまった

ブログを開設してから1年と数か月が過ぎた。 グーグルアドセンスは審査に落ちても何度でも申請できるらしい。 落ちてもまた半年後ぐらいに申請すればいいかなと思って申請してみたが、通ってしまった。 インター …

ブログの設定を行った

ブログを作って、さあ書き始めるぞ!と思ったが、サイトの外観がいまいちだったので設定を行った。 Contents1 ■作業1.1 1.WordPressのプラグインインストール&設定1.2 2.ブログの …

no image

ブログをスマホから更新してみるテスト

スマホから更新してみる。 スマホからの更新方法 ブログURLの末尾に「wp-admin」を付けてアクセスIDとパスワードを入力 あとはPCと同じように投稿などを行うだけ。

no image

ブログをhttps化してみた

httpsにして本ブログのセキュリティを向上させる。 参考にしたサイト https://netnews-street.net/ssl/