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

この記事は約3分で読めます。

Image [10]

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

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

今時点のblogで言うと、

Image [8]

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

Image [12]

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

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

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

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

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

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

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

// トップメインメニュー追加
register_nav_menu('mainmenu', 'トップメインメニュー');

を追加します。

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

ul#main-nav {
    clear: both;
    margin: 0;
    padding: 0;
    height: 35px;
    background-color: #777;
    border-radius: 3px;
    overflow: hidden;
}
ul#main-nav li {
    list-style-type: none;
    float: right;
}
ul#main-nav li a {
    font-size: 1.1rem;
    display: block;
    line-height: 35px;
    color: #fff;
    text-align: center;
    margin: 0 10px;
}
ul#main-nav li a:hover {
    background-color: #555;
    color: #fff;
}

を追加します。

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

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

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

Image [3]

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

Image [4]

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

Image [5]

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

Image [6]

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

Image [7]

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

Image [8]

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

Image [3]

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

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ 全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。