ブログ運営

JINカスタマイズ|スマホのハンバーガーメニューをウィジェットにする方法

JINのハンバーガーメニューをウィジェットにする方法
ナシタカ
ナシタカ
WordPress有料テーマ「JIN」でスマホのハンバーガーメニューのカスタマイズ方法について紹介しています。スマホで表示されるこのメニューをウィジェットにすることで、より読者の方に使いやすいサイトにできますよ!

どうもブログ大好きナシタカ(@ehicalog)です。

僕のブログでは、有料テーマの『JIN』を使っています。

広告の設定やカスタマイズが簡単でデザインは任せて記事作成に集中できるのが最高ですが、そんなJINを使っていて1つ気になっているのが『スマホのハンバーガーメニュー』です。

デフォルトではグローバルメニューを表示してくれていて、自分でカスタマイズすることができないようになっています。

ナシタカ
ナシタカ
ここをカスタマイズして、もっといろいろと記事を読んでもらいやすいようにしたい!

そこでいろいろと試行錯誤して、ハンバーガーメニューをウィジェット化することができました

この記事ではその手順についてまとめて、JINのハンバーガーメニューをウィジェット化する方法について紹介するので、参考にしてもらえたらうれしいです。

すぐにウィジェット化する方法について知りたい方は、▼JINのハンバーガーメニューをウィジェットにする方法からどうぞ。

JINのハンバーガーメニューをウィジェットにした理由

デフォルトではグローバルメニューが表示されるようになっていて、自分で自由にカスタマイズすることができません

JINのハンバーガーメニュー

ただ僕はスマホでのユーザビリティを考えると、このハンバーガーメニューに記事を読んでもらえる工夫をしたかったんですよ。

例えばカテゴリメニューやボックスナビを置いてあらゆる角度から記事を検索できるようにしたり、またプロフィールを置いてこんな人が書いているんだなというのを知ってもらったり。

自分のブログの状況に合わせてここをカスタマイズできたら、もっと読みやすいブログになるのでは?と思ったのが大きな理由です。

JINのハンバーガーメニューをウィジェットにする方法

では早速JINのハンバーガーメニューをウィジェットにする方法について書いていきます。

大まかな手順がこちらになります。

作業手順
  • ステップ1
    function.phpにコードをコピペ
    function.phpにコードをコピペします。
  • ステップ2
    header.phpのコードを編集
    header.phpの該当部分にコードをコピペします。
  • ステップ3
    CSSにコピペ
    該当する方のみコードをコピペします。
作業の前には、必ずバックアップを取っておきましょう。何かあったときに元に戻せるようにしておけば、安心して作業できますからね。

作業は子テーマを使って行うのがオススメ。まだの方はこの機会に導入しておくのをオススメします。

ではそれぞれを詳しくみていきましょう。

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のコードを編集

機能がオンにできたら、今度は実際にハンバーガーメニューにウィジェットが表示されるようにしていきます。

header.phpの106行目あたりに『sp-menu-box』という部分があるので、その辺りを下のコードに置き換えてください。

<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">

これを貼り付けると、ハンバーガーメニューにウィジェットが表示されるようになります。

前のステップで追加した項目が表示されているかを確認しましょう。

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ユーザーの方は合わせて導入するのをおすすめします。

スマホの縦長画面ではサイドバーにウィジェットを追加していても、レイアウトで下の方にいってしまいますからね。

そうするとわざわざ下までスクロールしないといけないので、ナビが見つからずに離脱されてしまう可能性が高い

でもこのカスタマイズをしておけば僕の場合はヘッダー固定でスクロールされるようになっているので、いつでもハンバーガーメニューを開いてナビを使うことができるというわけ

検索バーに加えて、カテゴリー検索がしやすくなったので大満足です。

JINのハンバーガーメニューをウィジェットにする方法|まとめ

ここまでJINのスマホのハンバーガーメニューをウィジェットにする方法として、その理由やカスタマイズ方法について書いてきました。

デフォルトでも使いやすいJINですが、こうしたカスタマイズを加えることでさらに使い勝手が良くなります。

いろいろな読者を想定して、さまざまな角度から記事を探せるようにしておくことがとても大切。

また自分で自分のブログを検索してみるのもおすすめです。

ナシタカ
ナシタカ
ハンバーガーメニューのカスタマイズも実際に僕が自分のブログで検索したときに使いにくかったので、これがあったら便利だなという思いで作成しています!

最低限自分が使いやすい形にしておかないと、初めての方はもっと戸惑うはずですからね。

これからも誰でも読みやすいブログを目指して、いろいろと試していきます。

どうも、ナシタカ(@ehicalog)でした。

ABOUT ME
ナシタカ
GoProが大好きで子どもの撮影に愛用しています。 撮影した動画の編集も大好きなので動画編集についても紹介しつつ、自分が気に入ったものをどんどん紹介していきます。