この記事を読むのに必要な時間は約 2 分です。
Webサイトを作成する上でパソコン、スマートフォン、タブレットに対応させることは今や常識となっている。
サイトを作成するとき大切なことはユーザビリティを考えたページ構成だ。
レスポンシブデザインの先駆者とも言えるWORD PRESSだが、メニュー部品{wp_nav_menu() }をドロップメニューにした場合、タブレットに対応していないテーマも多い。
iPadなどのタブレットでは:hoverは無視される為、最上位のメニューしか閲覧出来ず、入れ子のページは閲覧不能になる。
これはかなりの損失だ。解決するには初心者では敷居が高そうな問題だ。
しかし、Bootstrap 3をベースにしたbootstrap_navwalkerなら、初心者でも簡単に解決出来る。
その1
GitHubでwp-bootstrap-navwalker.phpをダウンロードし、wp-content/themes/使用中のテーマフォルダ/ に配置する。
| 例:テーマにtwentyfifteenを使用している場合 | ||
| index.php | ||
| wp-admin | ||
| wp-content themes
twentyfifteen wp-bootstrap-navwalker.php | ||
| wp-includes |
その2
テーマのfunction.phpに以下を追記する。
require_once('wp_bootstrap_navwalker.php');
