HOME  /WordPress(応用)
 /AdSense広告表示にウィジェットを使う方法
2020年02月03日

AdSense広告表示にウィジェットを使う方法

広告を読み出すHTMLをそのまま記述すると、プログラムが見づらくなります。

その対策として関数を使う方法もありますが、ここではWordPressのウィジェット機能を使う方法を解説します。

1.サイドバーにAdSense広告を表示させる方法

ウィジェットの基本操作は下記のドキュメントを参照してください。

­ ­Twenty Twelveのウィジェットをカスタマイズする

どのテーマでも操作方法は同じです。

 

現在利用している親テーマのサイドバーにAdSenseの広告を追加する方法は下記になります。

①サードバーの好きな所に「カスタムHTML」を配置する。

どの様なサイドバー名になっているか?はテーマによって異なります。

 

②▼をクリックし、BOXの中にAdSenseの広告コードをペーストする。

 

③保存をすると、サイドバーにADSense広告が表示されるようになります。

 

2.任意の位置にAdSense広告を表示させる方法

任意の位置にAdSense広告を表示させる為には下記の手順で行います。

1.広告配置用のウィジェットを作成する

2.作成したウィジットにAdSenseの広告コードを入れる

3.プログラムの好きな位置に作成したウィジェットを呼び出す。

 

2-1.広告配置用のウィジェットを作成する

子テーマの「functions.php」を開きます。

子テーマが作成されてない場合は下記ドキュメントを参照してください。

­ ­子テーマの設定方法

 

「functions.php」の最後に下記のコードを入れます。

/*******************************************/
//AdSenseの為のウィジェットの作成
/*******************************************/
register_sidebar(
	array(
		'name' => 'ディスプレイ広告(display)',
		'id' => 'display',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		/*'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',*/
	)
);

name:ウィジェット画面に表示される日本語のウィジェット名です。

日本名の中にid名も入れておくと利用する時に便利です。

id:プログラムでこのウィジェットを読み出す時の名前(※重要

before_widget:ウィジェットの前に表示するタグ

省略すると「<li id=”%1$s” class=”widget %2$s”>」というliタグになるので、上記の物を入れて下さい。

after_widget:ウィジェットの後ろに表示するタグ

省略すると「</li>」というコードになるので、上記の物を入れて下さい。

before_title:タイトルの前のタグ

省略すると「<h2 class=”widgettitle”>」になります。親テーマのウィジェットがどの様な物になっているか?調べて合わせた方が良いです。

after_title:タイトルの後ろのタグ

省略すると「h2」になります。before_titleに合わせたタグにして下さい。

­ ­メモ

上記のサンプルは名前が「ディスプレイ広告(display)」という新しウィジェットを1個作った例でです。

「記事内広告(article)」や「インフィールド広告(infield)」の様な名前で、複数作ってください。

 

2-2.作成したウィジットにAdSenseの広告コードを入れる

作成方法はサイドバーにAdSennseコードを入れた時と同様です。

 

2-3.プログラムの好きな位置に作成したウィジェットを呼び出す

作成したウィジェット読み出すプログラムは下記になります。

<?php dynamic_sidebar('ID名'); ?>

ID名の所が上記の例では「display」、「article」、「infield」になります。

­ ­メモ

修正するプログラムは下記になります。

■投稿ページ:single.php

■固定ページ:page.php

■TOPページ:front-page.php

■カテゴリページ:category.php

等々

以上の様に1行でAdSense広告が表示できるようになると、1行に2個の広告を並べる等の操作が簡単に行えるようになります。

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。

Bootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。但しデフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。

このコンテンツはこのサイトのフッタページのデザインを解説した物です。

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ここではビジュアルエディタでタブ切替のコンテンツを作成する方法を解説しています。しかしタブの単純な作り方ではスマホ表示でタブが複数行になる!等の問題が発生します。そこでflexboxの機能を使ってスマホでも使えるタブを実現しました。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってリンクBOXを作成する方法を解説しています。