Tetsuya正直、もう少し詳しく説明して欲しいな
デザイン歴23年、ガチデザイナーのTetsuyaです。
ワードプレステーマ「SWELL」はマジで神ですね。
ほんとすごいテーマだなと思います。
その理由は、ことごとく自分がやりたいと思う機能が実装され、
しかもそれが信じられないほどに「使いやすい！」
だから僕はマジで神だと思うのです。
まぁ、そうは言っても僕が神だと思うのはSWELLではなく、
テーマ開発者の「了」さんですけどね（笑）
ということで、今回、SWELLのver.2.6.1のアップデートで
ついに「ボックスメニュー」の機能が実装されました。
僕は嬉しさのあまりすぐに実装しようとしたのですが、
「サイドバー」に設定する方法が分からず、少しだけ悩みました。
なので、きっと僕と同じようにボックスメニューをどうサイドバーに実装すれば良いのか？
悩まれる方がいると思いますので、実装手順を解説させていただきます。
SWELLのボックスメニューとは？
そもそも「ボックスメニューって何やねん？」
そう思う方がいるかもしれませんので、簡単にご紹介しておきます。
例えば、
例1
こんな感じのメニューだったり、
例２
こんな感じのメニューがただアイコンを選択して文字入力するだけで、
ややこしいHTMLやCSSコードを入力しなくても、簡単に作れるようになったんです。
しかも、選べるアイコンは豊富ですし、色も変えれますし、
ボタンレイアウトも、リッチカラムと同様に自由に変更することができます。
すごくないですか？
SWELLのボックスメニューをサイドバーに設置する手順
ということで早速ですが、SWELLのボックスメニューを
サイドバーに設置する手順はこちら。
ボックスメニューはブログパーツとして作りましょう。
新たに実装されたボックスメニューブロックを使ってボックスメニューを作ります。
ブログパーツの呼び出しコードをカスタムHTMLで実装します。
すでにSWELLを使い慣れてる方は「そっか、ブログパーツで作れば良いのか」と
この手順だけで実装方法が解決できると思います。
SWELLには「ブログパーツ」という非常に便利な機能があるので、
ボックスメニューをブログパーツとして作っておくと、
サイドバーだけではなく、フッターにも簡単に実装することができます。
なので、ボックスメニューは「ブログパーツ」として作ること。そこがポイントです！
あたかも分かってるかのように書いてますが、僕も調べるまで気付きませんでした（笑）
SWELLでボックスメニューを作る方法
さて、それでは実際にSWELLでボックスメニューを作ってみましょう。
おそらく設置方法だけで悩まれた方は、ここから先は読む必要がないと思いますので、
ボックスメニューの作り方が分からない方だけ読んでください。
ブログパーツを作成する
まずはダッシュボードメニューからブログパーツ → 新規追加をクリックして
ボックスメニューをブログパーツとして作りましょう。
新規追加をクリックしたら、ブログパーツとして管理しやすいタイトルをつけます。
ちなみに僕は素直に「ボックスメニュー」としました。
ボックスメニューを作成する
SWELLがきちんとアップデートできていたら、SWELLボックスのメニューの中に、
以下のようなボックスメニューのブロックが新たに追加されています。
ボックスメニューブロックをクリックすると、
このようなボックスメニューを作るためのブロックが表示されます。
最初は2つだけですが、下にある「＋」のマークをクリックすると、
ボックスメニューの数を増やすことができます。※リッチカラムと同じ原理
ちなみにアイコンを入れる時は、画面右側にあるアイコンタイプ「SVG」が選択された状態で
「アイコン選択」をクリックすると、
このようにアイコンがたくさん表示されますので、その中から好きなアイコンを選びましょう。
また、検索ボックスのすぐ下のタブはアイコンの雰囲気を切り替えることができますので、
タブを切り替えながら、自分のサイトに合いそうなアイコンを探してみてください。
なお、SVGではなく「画像」をクリックすると、ボックスメニューに設定したい画像をアップロードして、
メニュー用のアイコン画像として設定することができます。
ちなみに画像を変更する時は、少し分かりにくかったのですが、
ボックスメニューのボタンをクリックして表示される
以下の「×印」をクリックすることで、設定した画像がリセットできます。
またボックスメニューのアイコンをクリックすると
画面右側の設定項目が変わり、ボタンの色を反転させたり
アイコンのサイズを調整したり、各端末でのボタン数もリッチカラムと同様に
それぞれの数を自由にカスタマイズすることができます。
また、ボックスメニューのテキストカラーを自由に変えたり、
アイコンの色に限っては、単色だけではなく、
グラデーションに設定することもできます。
なお、各ボタンのリンク先はボタンをクリックして表示される、
メニューバーの中にある以下の部分から設定できます。
ということで、ボックスメニューのブロックで一通り設定できる項目はお伝えしましたので、
まずはブログパーツで、いろいろ試しながらボックスメニューを作ってみてくださいね。
そして、ボックスメニューが完成したら「公開」ボタンをクリックして、
忘れずにブログパーツを有効化しましょう。
カスタムHTMLでボックスメニューを実装する
ボックスメニューが作成できたら、いよいよサイトに実装します。
ボックスメニューを実装するには「呼び出しコード」が必要で、
その呼び出しコードが、ブログパーツ一覧の以下の部分に表示されています。
この呼び出しコードをコピーして、ボックスメニューを表示させたい部分にコードを貼ると
ボックスメニューが実装できます。
例えば、サイドバーに実装したい場合は、サイドバーウィジェットに
「カスタムHTML」のウィジェットを追加します。
あとはブログパーツの呼び出しコードを内容の部分にペーストして貼り付けるだけ。
そうすれば、ボックスメニューをサイドバーに表示させたり、
フッターに表示させたりすることができます。
まとめ
今回は、ワードプレステーマSWELLのver.2.6.1のアップデートで新たに実装された
ボックスメニューのブロックを「サイドバーに表示させる方法」について解説しました。
正直、ボックスメニューを作るのはすごく簡単なのですが、
アップデート情報を見ても実装方法まで解説がなかったのが、少々残念に思います。
ただ、実装方法さえ分かれば、これだけ使い勝手が良く
ユーザビリティがアップするメニューもないかと思いますので、
「ボックスメニュー」を活かしてサイト訪問者のユーザビリティを上げましょう。
ということで、参考になれば嬉しいです。
SWELLのグローバルメニューの文字色はCSSで簡単に変更できます。
必要とあらば、お好みで変更してくださいね。
