昨年、Googleが7億5千万ドルでM&AしたAdMob社ですが、
Androidのインプレッション数は、2倍になったそうです(2009/01/15)
http://jp.techcrunch.com/tag/admob/

iPhoneアプリだけでなく、webにも対応してるとのことなので、
IDEA*IDEAさんの記事を参考にさせて頂きながら、
Webサイトに入れてみました。

AdMobに、登録します。

AdMobサイトに行き、
「今すぐスタート」ボタンを押します。

登録情報を入力します。

登録メールに、認証メールが送信されるので、メールを開いて、URLをクリックし、登録を完了させます。

サイトを追加する

「サイト及びアプリケーション」ー「サイト/アプリケーションの追加」を選択します。

「サイトまたはアプリケーション タイプの選択」から「iPhone用サイト」を選択します。

広告を貼るサイトの情報を入力します。広告の色なども選択できます。

次に進むと、広告のJSコードが表示されます。

広告コードのサンプル

<script type="text/javascript">
var admob_vars = {
 pubid: '*******', // publisher id
 bgcolor: '333333', // background color (hex)
 text: 'eeeeee', // font-color (hex)
 test: true// test mode, set to false if non-test mode
};
</script>
<script type="text/javascript" src="http://mm.admob.com/static/iphone/iadmob.js"></script>

注意）

 test: false// test mode, set to false if non-test mode

デフォルトだと、「test:true」になっていて、テストモードで課金されなくなっているので、「test:false」に変更します。

iPhoneサイトの、広告を挿入したい場所に、広告コードを埋めます.

wptouch/themes/default/header.phpに広告コード埋めます。

次の例は、タイトルヘッダーと、Searchの間に、広告を入れた時の例です。
特に、どこに埋めても良いようなので、入れたい位置にいれてください。

	</div>
</div>
<!-- AdMob -->
<div class="admob-area">
<script type="text/javascript">
var admob_vars = {
 pubid: 'xxxxxxxxxxx', // publisher id
 bgcolor: '333333', // background color (hex)
 text: 'eeeeee', // font-color (hex)
 test: false // test mode, set to false if non-test mode
};
</script>
<script type="text/javascript" src="http://mm.admob.com/static/iphone/iadmob.js"></script>
</div>
<!-- /AdMob -->
<div id="drop-fade">
	<?php if (bnc_is_search_enabled()) { ?>
    	<a id="searchopen" class="top" href="#" onclick="bnc_jquery_search_toggle(); return false;"><?php _e( 'Search', 'wptouch' ); ?></a>
	<?php } ?>

ついでに、style.cssも加えました。

/* for AdMob */
admob-area {
        width: 100%;
	height: 48px;
	display:block;
}
/* end for AdMob */

そして、ついでに、解析コードを、footer.phpに加えます。
PHPの場合、なぜか、最後の「?>」が抜けていて、そのまま貼ると
エラーになるので要注意。

自分は、GoogleAnalyticsも使用しているので、その解析コードも挿入しました。

さて、これでAdMob広告の挿入は完了です！
iPhoneから接続して確認してみてください。

※wptouchプラグインをアップグレードすると、/themesファイル内も
　上書きされてしまうので、バックアップは取っておいた方が良いです。

iPhone Safariから、WordPressにアクセスすると、下記のように、テーマを最適化してくれるプラグイン「WPTouch」を導入してみました。

1. WPTouchプラグインを、ダウンロードします。

http://wordpress.org/extend/plugins/wptouch/

ダウントードした、「wptouch」フォルダごと、Wordpressディレクトリ
「wp-contents/plugins/」にアップロードします。

2. WordPress管理画面から、プラグインの設定をします。

「WPTouch iPhone Theme」のプラグインを「使用する」にします。

プラグインの「Setting」から、iPhoneでの表示項目の設定などできます。

iPhone、Safariから、自分のWordPressのURLを入力して、表示を確認します。

1. Twitter-Toolsの特徴

1. Twitterに送信したつぶやきを、ブログの記事として保存する
2. Twitterに送信した1日分のつぶやきをまとめて、ブログの記事として保存する
3. WordPressの管理画面からTwitterにつぶやきを送信する
4. ブログに記事を書いたときにTwiterにつぶやきを送信する
5. サイドバーにTwitterの最新つぶやきを表示する
6. サイドバーからTwitterにつぶやきを送信する

今回は、4.の用途で使ってみました。

2. Twitter-Toolsプラグインのダウンロード

WordPressプラグイン、Twiiter-Toolsをダウンロードします。
http://wordpress.org/extend/plugins/twitter-tools/

DLした、「twitter-tools」をフォルダごと、Wordpressディレクトリ
「wp-contents/plugins/」にアップロードします。

3. WordPressでの、Twitter-Toolsの設定

WordPressの管理画面、「プラグイン」から、twitter-toolsの設定をします。

「Twitter-Tools」の「Setting」をクリックして、Twitterアカウントと、その他投稿について設定します。

今回は、WordPress→Twitterなので、アカウントの設定と、つぶやき時に、URLの前に表示されるテキスト、Prefixの設定をしてみました。

• Twitter-Tools RedaMe
  http://alexking.org/projects/wordpress/readme?project=twitter-tools

WordPressから、記事を投稿して、確認。

Twiiterに、WordPress記事の投稿が、送信されました！

wp.VICUNAの利点

• XHTML1.0 Strict DTD準拠
• シンプルなXHTML構造
• 表示が軽い
• SEOを高めるサイト内リンク構造
• 簡単にカスタマイズ可能な専用スキン
• 無料で個人・商用利用可能

デフォルトだと、ウィジェットに対応してないのが残念です。

wp.VICUNA Ext

http://ma38su.org/projects/vicuna-ext/

• スキンの切り替え
• 表記言語の切り替え
• Eye Catchの切り替え
• グローバルナビゲーションの表示切り替え
• 各ページ毎のレイアウト設定
• Widgetによるサイドバーのカスタマイズ

各種、拡張機能つきExtテーマがあるので、
ウィジェットなどを使用する際は、こちらを使う方が良いかもしれません。

wp.VICUNA のウィジェット対応

Extに変えるのが一番いいのでしょうが、
デザインを調整する手間を考えて、応急処置をしてみました。

■参考サイト

• Widgetizing Themes
  http://wpdocs.sourceforge.jp/Widgetizing_Themes
• ウィジェット領域を２つ以上つくる
  http://wpcms.jp/195/

functions.php

/**
 * Add Widget
 */
if ( function_exists('register_sidebar') )
    register_sidebars(2,array(
        'before_widget' => "",
		'after_widget' => "\n\t\t</dd>\n",
		'before_title' => "\t\t<dt>",
		'after_title' => "</dt>\n\t\t<dd>\n\t\t\t",
    ));

この場合、
3カラムレイアウトで、ウィジェット領域が、left, right ２領域、
<dt><dd>に対応。

sidbar.php

	<!-- Widget -->
		<?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar(); ?>
	<!-- /Widget -->

サイドバー１

	<!-- Widget -->
		<?php if ( function_exists('dynamic_sidebar') ) dynamic_sidebar(2); ?>
	<!-- /Widget -->

サイドバー２

よく、行番号と、カラー分けでコードを表示しているテック系の
サイトを見かけるので、ライブラリを探してみました。

コードをそのまま表示するためのライブラリ、「SyntaxHighlighter」.
このブログはWordPressベースなので、JSとWordPressプラグインと
２通りのやり方を試してみました。

方法 1.） JavaScript

• SyntaxHighlighter2.0
  http://alexgorbatchev.com/wiki/SyntaxHighlighte

preタグに記述する方法

<pre class="brush: html">
<!-- ソースの中身 -->
<ul>
<li>テストHTML</li>
</ul>
<!-- ソースの中身 -->
</pre>

textareaタグに記述する方法

<textarea name="code" class="brush: html" cols="60" rows="10">
<!-- ソースの中身 -->
<ul>
<li>テストHTML</li>
</ul>
<!-- /ソースの中身 -->
</textarea>

• 導入サンプルHTML
  http://splitchin.com/sample/javascript/syntaxhighlighter_2/test.html

方法 ２.）WordPress プラグイン

• プラグインダウンロード
  http://wordpress.org/extend/plugins/syntaxhighlighter/installation/

［code language=”"js"”］・・・［/code］のように書きます。（［　］は半角記号に）

<ul>
<li>test</li>
</ul>

対応言語