twentyfifteenにトップメニューバーを追加する

Image [10]

WordPressの新しいテーマtwentyfifteenのカスタマイズを昨日始めました。やることはたくさんあり、こちらのblogで公開できる日はだいぶ先になりそうですが少しずつ進めています。今回はtwentyfourteenで使っていたトップメインメニューをtwentyfifteenに追加してみたのでそれについて書きます。

twentyfourteenではどのようにトップメインメニューを使っていたか

今時点のblogで言うと、

Image [8]

この部分が トップメインメニュー です。twentyfifteen ではこの位置に表示するメニューがデフォルトでは存在していなかったのでメインメニューに追加しました。

Image [12]

左ブロックにこのように表示されます。しかし、やはり、今まで通りの位置に表示したいです。

twentyfifteenにトップメインメニューを追加する 子テーマのカスタマイズ

カスタマイズするしかなさそうです。ググってみるとこちらのページを見つけました。

WordPressテーマのつくり方 カスタムメニューを設置する

とても分かりやすく説明してあったので、twentyfifteenに合わせたり、CSSを少し変えたりしながらすぐに追加することができました。ありがとうございます!

昨日既に作ってあった、子テーマの中をカスタマイズしていきます。

まず、子テーマのfunctions.phpを開き、

を追加します。

子テーマのstyle.cssにこのメニューで使う

を追加します。

twentyfifteenにトップメインメニューを追加する ダッシュボードでの設定

ここまで準備ができたらダッシュボードからの設定をします。

ダッシュボード 外観>メニュー をクリック。

Image [3]

位置の管理 タブをクリック

Image [4]

今追加した、トップメインメニュー 行の 新しいメニューを使う をクリック

Image [5]

メニューの名前を適当に付けて(この場合はトップメニューバーとつけました)、 メニューを作成 をクリック

Image [6]

こういう画面になります。私の場合は固定ページから3つのページを表示したいので、左側固定ページの すべて表示 をクリックして、

Image [7]

表示したいページにチェックを付けて、 メニューに追加 をクリック

Image [8]

メニュー構造 というところに固定ページが表示されます。CSSを右寄せにしたので表示したい順番の逆になるように並べ替えて、 メニューを保存 をクリック

Image [3]

これで表画面を見ると、トップメニューバーが追加されました(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

コメント

トップへ戻る