[wordpress&jQuery] IE6 No More plugin

IE6 No More

IE6撲滅キャンペーン大好きなので早速プラグイン化してみた。
いずれも配布されているアラートを表示するものです。

アラート

Mootools版はこちら。

まずは手抜き超簡易版。配布コードそのまま流用してます。
wp_footer()に挿入し、position:absoluteでページ上部に持っていくものです。

<?php
/*
Plugin Name: IE6 No More(ja)
Plugin URI: http://tenderfeel.xsrv.jp/
Description: IE6から他のモダンブラウザへの乗換えを進めるキャンペーン<a href="http://www.ie6nomore.com">IE6 No More</a>のタグをbody閉じタグ付近に挿入します。
Author: Tenderfeel
Version: 1.0
Author URI:http://tenderfeel.xsrv.jp/
*/

function nomore_tag()
{
	// 他言語への変更はソース張替えで可能
	print "<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: absolute;top:0;left:0;'><div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick=\"javascript:this.parentNode.parentNode.style.display='none'; return false;\"><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div><div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'><div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div><div style='width: 275px; float: left; font-family: Arial, sans-serif;'><div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>あなたは旧式ブラウザをご利用中です</div><div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</div></div><div style='width: 75px; float: left;'><a href='http://www.mozilla.jp' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div><div style='width: 75px; float: left;'><a href='http://www.microsoft.com/downloads/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b&DisplayLang=ja' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div><div style='width: 73px; float: left;'><a href='http://www.apple.com/jp/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div><div style='float: left;'><a href='http://www.google.com/chrome?hl=ja' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div></div></div>";
}

add_action('wp_footer','nomore_tag');
?>

nomore_tag関数をfunctions.phpにコピペしてテンプレートのbody開始タグ直下から呼び出せば
position:absolute使わなくても良くなります。

ごちゃっとしすぎだよな…と思って作ったのが次のもの。

jQuery版

比較的真面目に作ってみたプラグインの方はjQueryが必要です。
Wordpress用になってますがjQuery Plugin単体でも使えると思います。
jQueryのブラウザ判別を利用する場合は1.3以上、使わない場合は1.2.6以上あれば大丈夫。なはず。
判別部分にわずか12文字でIEを判別するスクリプトというのを使ってみています。
jQueryのブラウザ判別は初期状態でコメントアウトしてあるのでお好みで変更してください。

オリジナルソースとの差異

  • ソースを大いに簡略化
  • インラインCSSを全てCSSファイルへ移した
  • closeボタンを画像だけに変更。クリック時にremove()
  • body直下にある最初の要素にmargin-top:75px追加し、アラート要素を絶対配置により表示。
    closeボタンをクリックした際にmargin-topを0にする
    (空間が出来てしまうための対処)

編集後のXHTMLソース

<!--&#91;if IE 5 | IE 6 &#93;><div id="IE6NoMore"><div class="wrap"><img class="warning" alt="Warning!" src="http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg"/><div class="nomore-message"><strong>あなたは旧式ブラウザをご利用中です</strong>このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</div><a target="_blank" href="http://www.mozilla.jp"><img class="firefox" alt="Get Firefox 3.5" src="http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg"/></a><a target="_blank" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b&amp;DisplayLang=ja"><img class="IE8" alt="Get Internet Explorer 8" src="http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg"/></a><a target="_blank" href="http://www.apple.com/jp/safari/download/"><img class="safari" alt="Get Safari 4" src="http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg"/></a><a target="_blank" href="http://www.google.com/chrome?hl=ja"><img class="chrome" alt="Get Google Chrome" src="http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg"/></a></div><img src="http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg" class="close" alt="Close this notice"/></div><!&#91;endif&#93;-->

クローズボタンのjavascript

onclick="javascript:this.parentNode.style.display='none'; return false;"

CSS

/* IE6 No More CSS --------------------------*/
#IE6NoMore {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 75px;
	border-top: 1px solid #F7941D;
	border-bottom: 1px solid #F7941D;
	background: #FEEFDA;
	text-align: center;
	z-index:100;
}
#IE6NoMore img {
	border:0;
}
#IE6NoMore div.wrap {
	width: 640px;
	margin: 0 auto;
	text-align: left;
	padding: 0;
	overflow:hidden;
	color: black;
}
#IE6NoMore .close {
	display:block;
	position: absolute;
	right: 3px;
	top: 3px;
	font-family: courier new;
	font-weight: bold;
	cursor:pointer;
}

#IE6NoMore img.warning {
	width: 53px;
	height:73px;
	float: left;
}

#IE6NoMore .nomore-message {
	width: 275px;
	padding:12px;
	float: left;
	font-family: Arial, sans-serif;
	font-size: 12px; 
}
#IE6NoMore .nomore-message strong {
	font-size:14px;
	padding-bottom:5px;
	display:block;
	color:#CC0000;
}

#IE6NoMore .firefox,
#IE6NoMore .IE8,
#IE6NoMore .safari {
	margin-right:20px;
}

#IE6NoMore .chrome {
}

Demo

現在このブログで使用しています。IE6で閲覧するとアラートが表示されます。

wordpressでの使用方法

解凍後、プラグインディレクトリへフォルダごとアップロード。その後管理画面から有効化すればOK。
必要があればjsファイルやCSSファイルを編集してください。

ダウンロード

“IE6 No More Plugin” をダウンロード IE6NoMore.zip – 538回のダウンロード – 3 kB

IE9用にif文の条件式変更しました

1件のコメント

  1. はじめまして。
    ありがたくプラグインを利用させていただきました。
    これからもよろしくお願いいたします。

    Reply
  2. 前に言ってたの
    「まさにコレですよー!!!これ!!!」

    同じく、
    ありがたくプラグインを利用させていただきました。
    m(_ _ )m ペコリ

    Reply
  3. ご利用ありがとうございます。
    これでまた少しIE6が減れば嬉しいです 🙂

    Reply
  4. このプラグインを入れてみたのですが、
    IE6で確認した所
    j.parentnode is null or not an object と言うスクリプトエラーがでるのですが。
    何が原因でしょうか?
    Wordpress Ver 3 です。

    Reply
  5. pon さん>

    私のローカル環境だと再現が出来ませんでした…。
    IE6の確認には何を使用されていますか?

    Reply

Leave a Comment.