カテゴリー
Twenty Twenty

Twenty Twenty 11、関連コンテンツの広告ユニットをつける

ワードプレステーマ『Twenty Twenty』のフッターウィジェットが2カラムなので、そこを広げてアドセンスの「関連コンテンツ」を入れる方法と、function.phpを使って本文の下に入れる方法の2種類を試しました。

しょっちゅうテーマを変えるので、広告ユニットを使っておらず、問い合わせを受けた時、何を聞かれてるのか分かんなくて申し訳なかったです。

フッターウィジェットを1カラムにする方法

まずは、フッターウィジェットを1カラムにする(=フッターに全幅で広告を入れられるようにする)方法です。

Twenty Twentyのフッターウィジェットを1カラムにする

管理画面 → 外観 → カスタマイズ → CSS追記

オレンジ枠の部分のように下のコードをコピペして、保存します。※プレーンテキストとして貼り付けるのが無難。

.footer-widgets {
		margin-left: 4rem;
		width: 100%;
	}

これで、フッターが全幅になりました。

この後、アドセンスのコードをフッターウィジェットにコピペします。

管理画面 → カスタマイズ → ウィジェット → フッター1 → ウィジェットを追加 → タイトルと内容を記入 → 公開

広告ユニットを使う時は、タイトルに「広告」、「スポンサーリンク」みたいな文言を入れないといけなかったような… (うろ覚え)

内容にアドセンスの広告をコピペすると↓のようになりました。

Twenty Twentyのウィジェットに関連広告

これだと、ウィジェット2が無意味になるし、配置がコメントの下になっちゃうけど、いいのかな?

なんとなくガチブロガーさん達はもっと上部につけている気がしたので、functions.phpで記事下に追加する方法も試してみました。

functions.phpを使って投入1

外観 → テーマエディタ → 子テーマを選択 → functions.php

functions.phpに入っていって、↓のコードのXXXXの部分を2か所ご自分の番号に差し替えて使うか「<script」から「</script>」までを丸ごと差し替える感じでしょうか?

<?php
function related_ad( $content ){
  $content .= <<<endofcontent
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>
endofcontent;
 return $content;
}
add_filter( 'the_content', 'related_ad' );
?>

下の参考資料にプラグインも併せて紹介されていたので、正直言ってそちらがおススメです。

参考資料:Fukuro Press「関連コンテンツをWordPressに表示する手順【全テーマ共通】

仕上がりは記事の最後と著者の間に挟まって、こんな感じ↓

Twenty Twenty、記事下関連コンテンツ

背景色を変えたいときは、

外観 → カスタマイズ → 色 → 背景色

「背景色」をポチッとすると、「#」から始まる色番号が分かりますから、それをアドセンスの広告ユニットのスタイルの「背景」にペーストするとアドセンスの広告背景色がお使いの背景色と同じ色になります。

ついでに私が使うことにしたコードのメモ

外観 → テーマエディタ → 子テーマを選択 → functions.php

貼る場所は同じ。「投稿」かつ「ログインしていない」の場合に広告を掃き出すコードです。書き方もちょっと変えています。

<?php
function related_ad($content) {
    if ( is_single() && !is_user_logged_in() ) {
        $aftercontent = '<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
        $fullcontent = $content . $aftercontent;
    } else {
        $fullcontent = $content;
    }
    return $fullcontent;
}
add_filter('the_content', 'related_ad');
?>

参考資料:wpdeveloppers、「Adding Content Before and After the_content!

こちらは英語の資料なので、日本語で説明がついている記事の方が分かりやすいかな?っと思って、2つ試してみたのですが、日本語の方は、個人的になじみがない文法があったので、私は英語の参考資料に近いコードを使うことにしました。

最後までお読みいただきましてありがとうございました。

作成者: のろのろ

ゲーマーで、トレッキーに片足突っこんでいる、SF好きの、雑記ブロガーです。

コメントを残す

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