iPad用にドロップダウンメニューをカスタマイズする

この記事を読むのに必要な時間は約 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');