ブログのデザインって難しいですよね。
最近モバイルページのデザインをいじってたのですが、三本線のメニュー(ハンバーガーメニューと呼ぶみたいです)の実装に躓いたので備忘録としてやり方を書き残しておきます。
この記事はこういう人におすすめだよ。
- Cocoonでハンバーガーメニューを実装したい
- モバイルヘッダーを設定したけどメニューが表示されなくて困っている
手順1 モバイルヘッダーを設定する
まずは、モバイルヘッダーを作成してみましょう。
WordPress の管理画面から「外観」→「メニュー」を選択します。
「新しいメニューを作成しましょう」をクリックします。
「メニュー構造」内の「メニュー名」にメニューの名前を入力しましょう。ここではモバイルヘッダーという名前をつけます。
名前をつけたら「ヘッダーモバイルボタン」にチェックを入れて、「メニューを作成」をクリックしましょう。
ここからヘッダーメニューに要素を追加していきます。(ここでは、左からハンバーガーメニュー、サイトロゴ、検索にします)
「メニュー項目を追加」が有効になるので、「カスタムリンク」をクリックしましょう。
カスタムリンクが開くので、「URL」に「#menu」、「リンク文字列」にメニューに表示したい文字を入力します。ここでは「メニュー」としました。
URLに「#menu」を入力することでモバイルヘッダーにメニューが表示されるようになります。
入力したら「メニューに追加」をクリックします。
「メニュー構造」に「リンク文字列」に入力したブロックが追加されたらOKです。
同じ要領で、「URL」に「#logo」、「リンク文字列」にメニューに表示したい文字を入力します。
URLに「#logo」を入力することでブログのロゴ画像がモバイルヘッダーに表示されるようになりますので特に「リンク文字列」には何を入れてもいいのですが、素直にブログタイトルを入力しておきましょう。
入力したら「メニューに追加」をクリックします。
最後に「URL」に「#search」、「リンク文字列」にメニューに表示したい文字を入力します。
URLに「#search」を入力することで検索がモバイルヘッダーに表示されるようになります。
入力したら「メニューに追加」をクリックします。
「メニュー構造」にメニューが３つ追加したら、「メニューを保存」をクリックして保存します。
これでモバイルヘッダーの設定は完了です！
手順2 Cocoon設定を変更してモバイルヘッダーを表示させる
次にCocoonの設定を変更して、モバイル画面にモバイルヘッダーを表示させます。
WordPress の「Cocoon設定」をクリックして設定画面を開きます。
上部の「モバイル」タブをクリックして、「ヘッダーモバイルボタン」にチェックを入れて「変更をまとめて保存」をクリックします。
プレビューか実機で確認してみましょう。(ロゴが二重で表示される場合は上図の「サイトヘッダーロゴを表示する」のチェックを外してください)
…手順1でメニューを追加したはずですが、表示されていないですね。
ここで悩みましたが、メニューの中に表示するメニューが設定されてないのが原因みたいです。
ややこしいなぁ。
手順3 スライドインメニューを作成する
WordPress の「メニュー」設定を再度開きましょう。
「新しいメニューを作成しましょう。」をクリックして、スライドインメニューを作成していきます。
新しく作成したメニューの名前は「スライドインメニュー」としましょう。
ここにはハンバーガーメニューボタンをタップしたときに表示される項目を設定します。
僕の場合は、「ホーム」、「お問い合わせ」、「プライバシーポリシー」を設定しました。
固定ページの他、カテゴリーや投稿を設定することができますので好みに合わせて設定してください。
設定し終えたら、忘れず「メニューを保存」してください。
これを設定するとモバイルヘッダーにメニューが表示されるようになっていると思います。
メニューをタップすると、スライドインメニューで設定した項目が出てきますね。
終わりに
ということでCocoonでハンバーガーメニューを設定する方法でした。
僕はこの設定で昨日１日がほぼ潰れたので疲れました。
皆さんはこんな設定さっさと終わらせて記事書きましょう。それでは。
コメント