【WordPress】iOS8.4.1で起こるa:hoverの仕様変更問題に対処する

iOS8.4.1機器（iPhoneやiPadなど）で、二回タップをしないとリンク先に飛ばないという事態が起こっているようです。

仕様変更概要
対処方法

仕様変更概要

この仕様変更はa:hoverにopacityが1以外に設定されていたり、position : relativeなどでボタン画像を凹ませたりすると起こるようです。

指で操作するときはシングルクリック（シングルタップ）ばかりなのでオンマウス(hover)という概念はいらないということでしょうか。

※opacityは要素の透明度を指定するときに設定するもので、1は不透明（全く透けない）の設定です。つまりopacityが設定されていないのと同じ状態です。なのでこの設定に違和感がある人もいるかもしれません。

/*これは発生*/
.hoge a:hover{
	opacity: 0.8;
}
.hoge a:hover {
	position : relative;
	top : 1px;
	left : 1px;
}
/*これは発生しない*/
.hoge a:hover{
	opacity: 1;
}

対処方法

（お約束）ご利用は自己責任でお願いします

いろいろな対処法が考えられますが、ユーザエージェントを判別してiOS機器とそれ以外を判別して<body>タグにclass名を付加することにします。class名を分けてしまえばiOS機器に当てるcssとiOS機器以外に当てるcssを変えることができるからです。

手順としては以下です。

ユーザエージェントを判別する(functions.php内)
ユーザエージェント別に<body>タグにclass名を付加する(functions.php内)
そのclass名に対するcssを追加する(style.cssなど)

まずはfunctions.php内に処理を追加します

/*iphoneとipadを判別して <body>のclass名に追加する
これでiOS機器でアクセスされたときにclassにiOSclassが付加され、それ以外のときにはelseiOSclassが付加されます。*/
function checkSP(){//スマホのユーザエージェントをチェックして返す	
	$ua=$_SERVER['HTTP_USER_AGENT'];
	if((strpos($ua,'iPhone')!==false)or(strpos($ua,'iPad')!==false)) {return 'iOSclass';}
	else{return 'elseiOSclass';}
}
function addBodyClass($classes){
	$classes[] = checkSP();
	return $classes;
}
add_filter("body_class","addBodyClass");

これでiOS機器でアクセスされたときにbodyのclassにiOSclassが付加され、それ以外のときにはelseiOSclassが付加されます。

↓こんなかんじです。