iOS8.4.1で2クリックしないとリンクが飛べない問題 Simplicity1.8で解決

当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

DSC_4728

ふと思い立って、わかったブログのWordPressテーマを5年ぶりに変更しました。Simplicityを利用させてもらいました。

ところが、肝心のSNSのシェアボタンやフォローボタンが、2回押さないと効かないという、致命的な問題が発生していました。

子テーマだけでは解決できず、直接元ファイルを編集して対応しました。もっとスマートな解決方法は、今後、開発者にお願いしたいです。

【追記】現在はiOS8.4.1問題に対応したバージョン1.8.5cを利用させてもらっています。開発者さん、対応ありがとうございました。

スポンサーリンク

対策方法

iOS8.4.1で2クリックしないとリンクが飛べない問題のとりあえずの解決策 【WordPress用】 – ネットビジネス研究所さんの記事を参考に、一部Simplicity用に修正して利用しました。

子テーマのfunction.phpに、下記のコードを追記。

//$is_ipadを追加
function is_ipad() {
$is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($is_ipad) {
return true;
} else {
return false;
}
}
//$is_iphoneか$is_ipadがtrueの場合にwp_headにCSSを出力
if($is_iphone or is_ipad()){
function noHoverForIos(){
echo "<style>.snsbs li a{opacity:1 !important;}</style>";
};
add_action('wp_head', 'noHoverForIos');
}else{
function hoverForIos(){
echo "<style>ul.snsp li a:hover{opacity:0.7 !important;}</style>";
};
add_action('wp_head', 'hoverForIos');
}

Simplicityの親テーマ内のcss-custom.phpを編集し、下記の記述をコメントアウト。

/*ul.snsp li a:hover{
opacity:0.7 !important;
}*/

※わかったブログが利用しているsimplycityテーマのバージョンは1.8(安定版)です。

対策のしくみ

iOS8.4.1から、:hoverでopacityを設定していると1クリックでhover発動、2クリック目にジャンプという挙動になってしまいました(なんで!?)。

対策方法は、hoverの設定を無くすか、opacityの値を1で上書きすることです。

シェアボタンはこちらの方法の通りに、子テーマから上書きして解決したのですが、フォローボタンはcss-custom.phpが<head></head>内に!important付で直接書き込まれていて、子テーマからの上書きが効かないため、直接コメントアウトして無効にしました。

PC上のhoverは残したかったため、hoverForIos()の関数を新しく作り、PCの時だけhover設定するようにしました。

ご参考になれば幸いです。

今日のわかった

iOS8.4.1で2クリックしないとリンクが飛べない問題は、かなり致命的です。以前から指摘されていたらしいです。なんで今まで対応されてなかったんだろ?

関連記事

関連記事

スポンサーリンク

当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローしていただけると、ブログ更新を見逃しません

push7 feedly
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です