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

2014年12月25日

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

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

記事をざっと見る

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

今時点のblogで言うと、

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

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

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;
}

を追加します。