ネタが古い感がありますが、Internet Explorer 6だと右上に「アナログ」という画像が表示されるようにしてあります。
当サイトではこのように表示されます。1
この画像はIE NetRenderer – Browser Compatibility Check –を使って取得しました。
ネタ元はIE6で閲覧すると。｜CSS HappyLifeです。
CSS Happy Lifeで発表後Javascriptを使用して、埋め込むようにするものも登場しました。
IE6でアクセスしたらページ右上に「アナログ」と表示するJavaScript – The blog of H.Fujimoto
今までWordPressのプラグインを作ったことがなく、 せっかくなので上記のJavascriptを利用して、学習がてらWordPressのプラグインにしてしまうことにしました。
WordPressのプラグイン作り
WordPressのプラグインを作るに当たり、元々付属しているhello.phpを参考にしました。
WordPressのプラグインはおろか、PHPのコーディングをするのが初めてだったので、たった数行だったのに色々とはまりました:-P2
1. プラグイン作りの準備
まず最初にanalogDisp.jsをフォルダに入れます。
今回は、/wp-content/plugins/wp-analogというフォルダに入れました。
2. PHPのコードの記述
WordPressのプラグイン作りのポイントは、アクションとフィルタです。
SPaiS – WordPress プラグインの作り方(1)というサイトに詳しく記されています。
この場合、必要なのはブログのヘッダにJavascriptを指し示す、scriptタグを埋め込むことです。
つまり、WordPressがヘッダを作成する際に、scriptタグを埋め込む関数を実行すればよいということになります。
ということで、add_actionを以下のように使用する訳です。
<?php
/*
Plugin Name: WP-Analog
Plugin URI: http://www.cocoalife.net/wp-analog/
Description: This is the WordPress plugin which shows "アナログ" when a browser is IE 6.
Author: milkcocoa
Version: 1.0
Author URI: http://www.cocoalife.net/
*/
function add_analog_js() {
echo("\t<script type=\"text/javascript\" src=\"" . get_bloginfo('wpurl') . "/wp-content/plugins/wp-analog/analogDisp.js" . "\"></script>\n");
}
add_action('wp_head', 'add_analog_js');
?>
これで、ヘッダが作成される際に、add_analog_js()という関数が呼び出されるようになります。
add_analog_js()関数ではechoを使って、scriptタグを埋め込みをしています。
get_bloginfo(‘wpurl’)でWordPressのSettings – General – WordPress address (URL)という項目で指定されるWordPressのURLを取得しています。
さらに、”.”を用いて文字列を連結しています。
一つはまった？（というほどでもないけれど）のはPHPの言語仕様で、Rubyと同様に一重引用符ではタブ文字を表す\tなどのバックスラッシュ記法が展開されないということです。
ですので、二重引用符を使用します。
さて、これをwp-analog.phpとでもして保存し、先ほどのフォルダにアップロードしましょう。
そしてアクティベートすれば終了です。
と、かなり丁寧にWordPressのプラグインとPHPについて説明しました（つもりです）。