MENU
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
あらゆるモノにHackする、探究者の読み物。
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
Let's Hack Tech
  • ホーム
  • プログラミング
  • ワードプレス
    • プラグインプラグイン関連記事
    • 賢威賢威のカスタマイズ
    • CSSCSSの関連記事
  • サイト情報
    • プライバシーポリシー
  • ツール
    • メルエディター
    • フリマスパイダー – 疾風
    • フリマスパイダー
    • -ポイ活くんα-
  • お問い合わせ
  1. ホーム
  2. ワードプレス
  3. ワードプレス・賢威でサイドバーへアドセンスをきれいに挿入する

ワードプレス・賢威でサイドバーへアドセンスをきれいに挿入する

2020 7/22
ワードプレス
2019-04-252020-07-22
ワードプレス・賢威でサイドバーへアドセンスをきれいに挿入する
目次

Googleアドセンスの広告ユニットについて

アドセンスの広告ユニットですが、カスタムサイズとか、変なサイズを指定すると、一気に表示率がさがり、空白が表示される確率が上がります。

空白の表示は非常にブサイクであり、収益も発生せず、踏んだり蹴ったりです。

表示率の高いアドセンス広告ユニットを選ぶ

表示率がぶっちぎりで高いのは300 × 250 のレクタングルです。

このレクタングルをサイドバーに挿入したいと思い、今回作業します。

サイドバーへのアドセンス広告ユニット挿入方法

まず、一番簡単なのがウィジェットのカスタムHTMLでの挿入

サイドバーへのアドセンス広告ユニット挿入方法

こんな感じでそのまま広告ユニットのコードを貼り付ければ、そのまま表示できます。

賢威8でのサイドバーのアドセンス

賢威8でのサイドバーのアドセンス

テーマ独自の問題発生。

もしかしたら、こうなるテーマの方が多いのかもしれませんが、バリバリ枠はみ出してますし、下の位置とズレまくってますし、ブサイクなことこの上ない。

広告がはみ出す原因

現在設定中のテーマは「賢威8」

確認したところ、サイドバーのカラムの親要素は横幅300pxですので、間違いなくこの広告がきれいにすっぽり収まります。

広告がはみ出す原因

ただ先ほどの画像確認してもらうと、変な白い枠が出来ているのが確認できると思います。

ウィジェットのカスタムHTMLで作成されたパーツは「枠を作った上で、中に任意のHTMLを表示させる」と言う仕様のようです。

はみ出すアドセンス広告の解決策

CSSで調整するという手もあるんですが、何分、他のパーツとの兼ね合いもあって、割と面倒。

ってことで、今回は直接挿入させる手法で解決します。

サイドバーの枠本体はテーマフォルダ直下のsidebar.php

サイドバーの枠本体はテーマフォルダ直下のsidebar.php

子テーマを使っている場合は通常ディフォルトではないファイルと思いますので、親テーマからコピーして子テーマフォルダ内に引っ張ってきます。

sidebar.phpの編集

賢威8を見本に進めますが、お使いのテーマでも似たような感じで編集可能だと思います。

<?php

if ( ! is_active_sidebar( 'sidebar-1' ) || ! is_keni_layout_sidebar() ) {
	return;
}
?>

<aside id="secondary" class="keni-sub">
        <!-- ここからアドセンスの広告ユニットを貼り付け -->
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<ins class="adsbygoogle"
	     style="display:inline-block;width:300px;height:250px"
	     data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
	     data-ad-slot="xxxxxxxxxxx"></ins>
	<script>
	(adsbygoogle = window.adsbygoogle || []).push({});
	</script>
        <!-- ここまでアドセンスの広告ユニットを貼り付け -->
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

結構sidebar.phpはシンプルです。

上記コードの中では、

<?php dynamic_sidebar( 'sidebar-1' ); ?>

が、ウィジェットで設定した各種パーツを読み込む関数ですので、その直上にアドセンスコードを貼り付けます。

完成系

ちょっと下のパーツとの段差が気になりますが、とりあえずあの超絶ブサイクな状態は回避できました。

<追記>その後CSSで調整して、段差を取り払いました。のっぺりしててイイ感じです。

あわせて読みたい
「次世代フォーマットでの画像の配信」対策!簡単WebP配信設定 GoogleのPageSpeed Insightsに表示される警告の一つ「次世代フォーマットでの画像の配信」の対策が簡単に行える、ワードプレスプラグイン[EWWW image optimizer]の照会と、設定方法を公開しています。
ワードプレス
アドセンス サイドバー ワードプレス 賢威
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする コメントをキャンセル

email confirm*

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
人気記事
  • IQテストいくつか受けてみました
    ネット上で信憑性がありそうなIQテスト、5種類まとめて受けた結果…
  • hayate
    メルカリの商品を世界最速で購入するためだけのアラートツール
  • 【Python】BeautifulSoupの使い方・基本メソッド一覧|スクレイピング
  • Pythonファイルのexe化
    【悲報】PyInstallerさん、300MBのexeファイルを吐き出すようになる
  • Amazon Echo アレクサのコマンドまとめ
    AmazonEchoの使い方とできる事、アレクサへの指示コマンド一覧
最近の投稿
  • 正規表現処理の濁点でハマった話2024-12-12
  • 保護中: 疾風v2更新履歴2024-05-31
  • 【自営・経営者向け・税金も】クレジットカードガチ勢による最強クレカ解説2023-10-23
  • PyQt5 QListWidget の item削除でtextBoxのフォーカスが奪われる2023-03-05
  • WordPressからのメールが届かない時の調査と解決法2023-02-27
目次
目次