WordPressにAdsenseとAnalytics

アクセス解析とリスティング広告の設定

せっかくブログを新設したので、WordPressにAnalyticsとAdsenseも設定しよう。

Google Analyticsは、サイトへのアクセスを詳細に分析してくれる無料サービス。
Google Adsenseは、広告を表示することで収入が得られるサービス。
両方とも、GoogleのサイトからJavaScriptのコードを取得して、自分のサイトに貼り込まなければならない。

フッタにGoogle Analyticsを貼り込む

Analyticsのコードは、HTMLの最後にある、の前に貼り込む。
WordPressでは、テーマファイル内のフッター・テンプレート内に挿入する。

管理画面に入って、メニューバーの「表示」→「テーマエディタ」を選び、右サイドメニューから「フッター」を選ぶ。
の直前にコードを貼り込んで、「ファイルを更新」をクリックする。

ヘッダにGoogle Adsenseを貼り込む

Adsenseの広告は、タイトルロゴの下に728×90ドットのテキスト広告を入れることにする。
（Adsenseは、記事中に紛れ込ませるよりも、広告であることをしっかり明示したほうが、収益が向上する。）

テーマファイルの「ヘッダー」を選んで、<div id=“header”>ブロックの終わりの</div>の直前にコードを貼り込む。

さて、実際のページを見ると……。

表示場所は間違いないが、はみ出している。
こういうときは、慌てず、CSSを調べて、修正する。

今は、Firefoxのおかげで、こういった作業も効率よく行える。
FireBugをインストールしたFirefoxで該当ページを開き、FireBugのペインを表示させる。

「HTML」タブを選んで、HTMLの階層構造を開いていくと、<body> → <div id=“header”> の高さ（height）はCSSの167行目以降に定義されていることがわかる。

そこで、テーマファイルの「スタイルシート」を選んで、いったん行番号を表示できるテキストエディタ（ここではJEdit X）にコピー。

169行目を

height:75px;
↓
height:150px;

と書き換える。

続いて、「WEBプログラミング、MAC、IPOD…」という説明書きの下に15pxの余白を作る。
#header div.descriptionの定義の最後（191行目）に、

margin-bottom:15px;

を追加する。

これを再び、テーマファイルの「スタイルシート」の編集画面に書き込む（元のソースを完全に置き換えるよ）。

「ファイルを更新」をクリックして、ページを確認すると、きっちり広告が収まっている。

投稿者: