当サイトには広告が含まれております

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

この記事は最終更新日から10年経過しています。内容が古い可能性があります。

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]

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

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

記事をざっと見る