[wordpress&jQuery] IE6 No More plugin

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

Mootools版はこちら。

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

<?php
/*
Plugin Name: IE6 No More(ja)
Plugin URI: https://tenderfeel.xsrv.jp/
Description: IE6から他のモダンブラウザへの乗換えを進めるキャンペーン<a href="http://www.ie6nomore.com">IE6 No More</a>のタグをbody閉じタグ付近に挿入します。
Author: Tenderfeel
Version: 1.0
Author URI:https://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' rel="noopener noreferrer"><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' rel="noopener noreferrer"><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' rel="noopener noreferrer"><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' rel="noopener noreferrer"><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" rel="noopener noreferrer"><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" rel="noopener noreferrer"><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/" rel="noopener noreferrer"><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" rel="noopener noreferrer"><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 – 1836 回のダウンロード – 3.21 KB

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