メニュー

サイドバーの作り方

ひつじ

サイドバーの作り方について

2カラム表示の時のサイドバーの作り方について解説をしていきます。

サイドバー編集画面へ

WordPressの黒いバーにある「カスタマイズ」を開いていただいて

一番下のウィジェットに進みましょう。

そうすると、ウィジェットを作成する画面になります。

ここで「サイドバー」もしくは「追尾サイドバー」を選んで編集画面に進みましょう。

※ もし「サイドバー」が表示されていない場合は、1カラムの記事上でカスタマイズを開いているためだと思われます。

※ 必ず2カラムページを開いた上で、「カスタマイズ」>「ウィジェット」に進んでください。

サイドバーの編集へ

JIN:Rでは、サイドバーもブロックで作り上げていきます。

編集画面はこんな感じですね↓

ウィジェットに関して、プレビューがほぼ効いておりません。バグかと思うかもしれませんが、こういう仕様です。

実際のサイドバーで表示を確認しながらサイドバー作成をしてもらいたいです。

WordPress本体があんまりサポートする気がないのか、ウィジェットは本当にお粗末な状態なので、開発がとても大変なところになっています(読んでもらってごめんなさい、ただの開発者の愚痴です)

「Classic Widgets」をお使いの人は停止を🙏
JIN:Rは旧エディターのウィジェット編集には対応していません。ですので、「Classic Widgets」のプラグインで編集しようとしても、うまくいかない箇所があります。

ウィジェットで使いやすいブロック

ナビゲーション

「ナビゲーションメニュー」は、個人的にとても使いやすいブロックだと思います。

サイドバーウィジェットに配置すると、こんな感じになります↓

「メニューを選択」のところで表示するメニューを選べます。表示するメニューはあらかじめ「外観」>「メニュー」で組んでおくといいでしょう。

そして、実際の画面ではこんな感じに表示されます↓

※ 『NAVIGATION』の見出しは「見出し」のブロックでつけています。

こういったナビがあるとサイドバーが見やすくなっていくので、ぜひご活用ください!

検索

「検索」も置いておくとメディア感がでていいですね。

サイドバーウィジェットに配置すると、こんな感じになります↓

そして、実際の画面ではこんな感じに表示されます↓(ぜんぜん違います)

「検索」の文字は「Search」などに変えてもオシャレですね。細かなデザイン変更は効くようにしているので、いろいろ触って遊んでみてください。

リッチメニュー2カラム

サイドバーにメニューを作りたい時は「リッチメニュー」の2カラム表示を使うこともおすすめです。

サイドバーウィジェットに配置すると、こんな感じになりますので

「項目設定を表示」を押して

2カラムデザインに切り替えてください。

そして、実際の画面ではこんな感じに表示されます↓

お好きなメニューやアイコンを配置して、ナビゲーションを整えていってもらえればと思います。

他の記事も読んでみましょう

ABOUT ME
ひつじ
ひつじ
ブロガー / デザイナー
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。
記事URLをコピーしました