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

「メニュー」って、何？

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

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

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

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

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

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

ブログの雰囲気を醸しだすためにトップ絵っぽいものをいれておきました。画像に特に意味はありません。お腹がすいただけです。

WordPress 管理画面で設定をする

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

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

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

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

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

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

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

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

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

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

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

メニューを CSS で装飾する

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

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

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

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

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

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

inline-block で li を横に並べる

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

これだけです。

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

この問題については別の記事でまとめましたので、こちらも併せてお願いします。

display:inline-blockの隙間の理由と消す方法 | Naokix.net

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

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

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

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

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

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

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

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

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

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

「overflow: hidden;」がないと背景に色がつかないはずです。これは float によって親要素の高さが出ないために起こるものです。

floatの解除についてはこちらで記事にしました。こちらもよろしくお願いします。

floatの解除は忘れずに | Naokix.net

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

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

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

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

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

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

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

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

最後に

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

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

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

WordPressによるWebアプリケーション開発

posted with カエレバ

Rakhitha Nimesh Ratnayake オライリージャパン 2014-11-27

Amazon

楽天市場