WordPressのテーマ自作初心者がメニューを設置してみる

 出来合いのテーマを使っている場合は既にいろいろと設定してくれてるので気にすることもないですが、自分でテーマを作った際にメニューを設置するときに必要になりそうな知識をまとめてみました。もちろん、既存のメニューのないテーマにメニューを追加するときにも参考にしてください。

「メニュー」って、何?

いわゆる多くのブログに設置されている

20150622_1

コレのことです。単に「メニュー」と呼ぶこともあるし、「ナビゲーション」とか「グローバルメニュー」、「グローバルナビゲーション」などと呼ばれます。

WordPress のテンプレートを改造する

 メニューを設置する対象テーマの functions.php をテキストエディタなどで開き、次の一文を書き加えます。

次に、テーマのデザイン・テンプレートを一部書き変えるのですが、メニューを挿入するならほとんどが header.php になると思います。次の一文をメニューを挿入したい位置にいれてください。

wp_nav_menu 関数に引数を渡したりしていろいろと細かい設定などができますが、これだけでもメニューは設置できます。「サンプルページ」とありますが、これをカスタマイズしていきます。

20150622_2

ブログの雰囲気を醸しだすためにトップ絵っぽいものをいれておきました。画像に特に意味はありません。お腹がすいただけです。トップ絵に使った画像は無料で使えて加工も OK な素材サイトの「まちふぉと」さんから拝借しました。ハヤシライスの写真とかなり迷いましたが。

無料のフリー写真素材サイトまちふぉと

WordPress 管理画面で設定をする

 WordPress 管理画面を開き、「外観」→「メニュー」を開きます。

20150622_3

「メニューの名前」の部分に好きな名前を入力してメニューを作成しましょう。今回は「マイメニュー」としました。入力したら「メニューを作成」ボタンを押してください。

20150622_4

 まずはトップページに飛ぶことのできる「ホーム」を作ってみましょう。メニューでこれははずせないでしょうし。カスタムリンクの右側の三角矢印をクリックして次のようにしてください。

20150622_5

「URL」に自分のブログのトップページの URL、リンク文字列に表示したい文字を入力します。

20150622_6

「メニューに追加」ボタンを押せば、先ほどの「マイメニュー」に反映されます。「メニューを保存」ボタンを押して保存します。

20150622_7

ブログに反映されているか確認してみてください。

20150622_8

 メニューの項目を増やしてみましょう。WordPress 管理画面の「固定ページ」→「固定ページ一覧」を開きます。「サンプルページ」にマウスを乗せると画面が切り替わるので、「編集」をクリックします。

20150622_9

固定ページの編集画面に変わります。メニューの定番として「お問い合わせ」を作りましょう。

20150622_10

多くの場合、固定ページの本文部分をカスタマイズすることでお問い合わせフォームを作成できますが、今回は割愛。「更新」ボタンを押して、先ほどのメニューの管理画面へ戻ってください。先ほどまでは「サンプルページ」だったものが「お問い合わせ」に変化していれば成功です。

20150622_11

チェックボックスにチェックをいれて「メニューに追加」ボタンを押し、「メニューを保存」ボタンを押した後、ブログに反映されているか確認してください。

20150622_12

同じ要領でカスタムリンクや固定ページを新規作成・カスタムすることで、メニューの項目を増やすことができます。

メニューを CSS で装飾する

 WordPress の wp_nav_menu 関数はメニューとして ul と li で構成されるリストを吐き出します。このリストを CSS を使って装飾しメニューを作っていくことになります。

メニューを装飾する前の予備知識

 ul と li で構成されるリストはなにも設定しないと、

20150622_13_2

のように縦に並びます。これは li がブロック要素だからです。

 HTML のタグはブロック要素とインライン要素の2種類があります。ブロック要素は width や height を指定することができ、前後が改行されます。見出しを表す h タグや段落を表す p タグなどが代表例です。

 インライン要素は inline を「行内」と訳すことができるように、行の中の文字に論理的な意味を持たせたりします 。 例えば強調を表す strong タグやリンクに用いる a タグなどがこれにあたります。

inline-block で li を横に並べる

 li がブロック要素なので、これをどうにかして横に並べなければお馴染みのメニューにすることができません。li を横に並べる方法のひとつとして、「inline」があります。

これだけです。

20150622_14

「list-style: none;」を指定しなくても「●」をとってくれて便利なのですが、background に色をつけると隙間があいてしまうという問題が起こります。

20150622_15_2

この問題の解決は下のリンク先が非常に詳しいです。

display: inline-block の隙間を詰める方法 | Soraxism

解決方法として、li の親要素 ul に「font-size: 0」を、li に任意の font-size を与える方法が一番無難なのでしょうが、仕組みをわかっていないと文字のない ul に突然 font-size が出現してしまい、少し気持ちが悪いです。

 個人的な好みの問題ですが、「float」を使うことにします。

float を使ってメニューを CSS で装飾する

 デフォルトの設定だと WordPress は吐き出した ul や li にクラスや id を割り振ってくれます。それらを利用して CSS をカスタマイズしていきましょう。

今回は ul にクラスが「menu」と割り当てられていたので、これを利用します。

20150622_16_2

リストの「●」が邪魔です。

20150622_17_2

本格的にメニューをカスタマイズする前にひとつ追加。

20150622_18_2

不自然な左と上の隙間がなくなりました。

 これは、「初期 CSS」とか「リセット CSS」などと呼ばれるもので、本来は CSS の冒頭で行うものですが、実験用の CSS だったのでここで行ってしまっています。リセット CSS はブラウザ間の CSS の初期値を考慮して、ブラウザごとに違った見栄えになってしまうことを防ぐためのものです。ul 全体に影響を及ぼすため、既存のテーマのカスタマイズの際には十分気をつけてください。ただ、多くの人が使うようなテーマの場合、リセット CSS については配慮されていることがほとんどなので、そんなに気にする必要はないかもしれません。

メニュー全体に色をつけてみます。

20150622_19_2

「overflow: hidden;」がないと背景に色がつかないはずです。これは float によって親要素の高さが出ないために起こるものです。下のリンク先が詳しいので参考にしてください。

floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17

floatで崩れた?コレでなおせ!| m-School

「float」指定によるレイアウト崩れを回避する方法「overflow:hidden;」「clear」「clearfix」

メニューの項目の幅と高さ、枠線を設定してみます。

20150622_20_2

height は意味的に ul の方で設定するように思いますが、実際にやってみると、

20150622_21_2

のようになってしまうので li で。

 左端に枠線がありません。WordPress はホームに「menu-item-home」クラスを割り当ててくれますので、これを利用して、

20150622_22_2

 li の子要素であるリンクをカスタマイズ。

フォントを通常の文字の大きさより大きくしました。横方向の中央揃えには「text-align: center;」を使いますが、これはインライン要素には適用できないので、「display: block;」により a タグをブロック要素に変換しています。縦方向の中央揃えには line-height を使い、li で設定したのと同じ高さを設定します。

20150622_23_2

 マウスを上に乗せたときに色が変わるようにしましょう。

20150622_24_2

それっぽくなったでしょうか。

最後に

 今回は WordPress においてメニューをどのようにカスタマイズするのかを説明することに重点を置いたせいで、デザイン的に非常にダサイ仕上がりになっています。

WordPressグローバルナビゲーションのCSSカスタマイズに最適な横並びメニューサンプルまとめ

上のリンク先や検索などで CSS のサンプルなどがたくさんでてきますので、それらを参考にかっちょいいメニュー作成を目指してみてください。

 長いことお疲れ様でした。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP