どうも、ブログ大好きナシタカです。
僕のブログでは、有料テーマの『JIN』を使っています。
広告の設定やカスタマイズが簡単で、ブログデザインは任せて記事作成に集中できるのが最高です。
そんなJINを使っていて1つ気になっているのが、『スマホのハンバーガーメニュー』です。
デフォルトではグローバルメニューを表示してくれていて、自分でカスタマイズすることができないようになっています。
ナシタカここをカスタマイズして、もっといろいろと記事を読んでもらいやすいようにしたい！
そこでいろいろと試行錯誤して、ハンバーガーメニューをウィジェット化することができました。
この記事ではJINのハンバーガーメニューをウィジェット化する方法について紹介するので、参考にしてもらえたらうれしいです。
すぐにウィジェット化する方法について知りたい方は、▼JINのハンバーガーメニューをウィジェットにする方法からどうぞ。
JINのハンバーガーメニューをウィジェットにした理由
デフォルトではグローバルメニューが表示されるようになっていて、自分で自由にカスタマイズすることができません。
ただ僕はスマホでのユーザビリティを考えると、このハンバーガーメニューに記事を読んでもらえる工夫をしたかったんですよ。
例えばカテゴリメニューやボックスナビを置いてあらゆる角度から記事を検索できるようにしたり、プロフィールを置いてこんな人が書いているんだなというのを知ってもらったり。
自分のブログの状況に合わせてここをカスタマイズできたら、もっと読みやすいブログになるのでは？と思ったのが大きな理由です。
Sponsored Links
JINのハンバーガーメニューをウィジェットにする方法
では早速JINのハンバーガーメニューをウィジェットにする方法について書いていきます。
大まかな手順がこちらになります。
[timeline title=”作業手順”]
[ti label=”ステップ１” title=”function.phpにコードをコピペ”]function.phpにコードをコピペします。[/ti]
[ti label=”ステップ2″ title=”header.phpのコードを編集”]header.phpの該当部分にコードをコピペします。[/ti]
[ti label=”ステップ3″ title=”CSSにコピペ”]該当する方のみコードをコピペします。[/ti]
[/timeline]
作業は子テーマを使って行うのがオススメ。まだの方はこの機会に導入しておくのをオススメします。
ではそれぞれを詳しくみていきましょう。
function.phpにコードを追記
最初にfunction.phpに下記のコードを追記します。
//ハンバーガーウィジェット
register_sidebar(array(
'name' => 'SP：ハンバーガーメニュー',
'id' => 'sidebar-sp',
'description' => 'スマートフォンのヘッダー部分のハンバーガーボタン（menu）を押したときに表示されるウィジェット',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<div class="widgettitle ef">',
'after_title' => '</div>',
));これでハンバーガーメニューのウィジェットが作成できて、ウィジェットに『ハンバーガーメニュー』の項目が追加されます。
ただこれだけではまだウィジェット機能が追加されただけで、実際に表示はされません。
あとで表示を確認するので、プロフィールなどの項目を追加しておきましょう。
僕はこんな感じで追加していますが、好きに設置してもらって大丈夫です。
header.phpのコードを編集
機能がオンにできたら、今度は実際にハンバーガーメニューにウィジェットが表示されるようにしていきます。
JINのVer2.65ではheader.phpの115行目に、『sp-menu-box』という部分があるので、124行目までを下のコードに置き換えてください。
<div class="sp-menu-box">
<div class="sp-menu-title ef">MENU</div>
<?php dynamic_sidebar( 'sidebar-sp' ); ?>
<?php if ( get_theme_mod('top_navi_sns_display') == "tn_sns_on" ): ?>
<div class="sp-sns-menu">実際に変更するのは117~122行目までなんですが、見つけやすいように前後の行も含めて載せています。
これを貼り付けると、ハンバーガーメニューにウィジェットが表示されるようになるので、前のステップで追加した項目が表示されているかを確認しましょう。
CSSに追記
僕の場合はウィジェットにしたら、ハンバーガーメニューのスクロールができなくなってしまう現象が出てきました。
その場合はCSSにこちらのコードを追記してください。
/* ハンバーガーメニュースクロール*/
@media screen and (max-width: 767px){
.default_open {
overflow: scroll;
}
}こちらのコードでスクロールできなかった例がありましたので、その場合はこちらのコードをお試しください。
/* ハンバーガーメニュースクロール*/
@media screen and (max-width: 767px){
.sp-menu-box {
overflow: scroll;
}
}これで作業は完了ですので、実際にスマホでハンバーガーメニューのスクロールができるか確認してみてください。
スクロールができれば項目を増やしても問題なく見られるようになるので、いろいろと使いやすくなりますよ。
ハンバーガーメニューで使いやすいサイトへ
僕はこのカスタマイズのおかげで、ハンバーガーメニューにこちらの項目が設置できました。
- カテゴリーウィジェット
- カテゴリーボックスナビ
- プロフィール
ボックスナビについてはぽんひろ(@ponhiroo)さんのカスタマイズを導入しています。
かなり見やすくなるので、JINユーザーの方は合わせて導入するのをおすすめします。
スマホの縦長画面ではサイドバーにウィジェットを追加していても、レイアウトで下の方にいってしまいますからね。
そうするとわざわざ下までスクロールしないといけないので、ナビが見つからずに離脱されてしまう可能性が高い。
でもこのカスタマイズをしておけば、僕の場合はヘッダー固定でスクロールされるようになっているので、いつでもハンバーガーメニューを開いてナビを使うことができるというわけ。
検索バーだけでなく、カテゴリーからの検索がしやすくなったので大満足です。
Sponsored Links
JINのハンバーガーメニューをウィジェットにする方法まとめ
ここまでJINのスマホのハンバーガーメニューをウィジェットにする方法として、その理由やカスタマイズ方法について書いてきました。
デフォルトでも使いやすいJINですが、こうしたカスタマイズを加えることでさらに使い勝手が良くなります。
いろいろな読者を想定して、さまざまな角度から記事を探せるようにしておくことがとても大切。
また自分で自分のブログを検索してみるのもおすすめです。
ナシタカハンバーガーメニューのカスタマイズも実際に僕が自分のブログで検索したときに使いにくかったので、これがあったら便利だなという思いで作成しています！
最低限自分が使いやすい形にしておかないと、初めての方はもっと戸惑うはずですからね。
これからも誰でも読みやすいブログを目指して、いろいろと試していきます。