WordPressのグローバルナビ(navi)を画像に置き換える方法

WordPressのナビを画像に置き換えようとしても、文字が表示されることがあります。

これは「外観」→「メニュー」の中でナビゲーションラベルとういものが表示されているからです。
ちょっと、変なので文字は表示させたくないですよね。

だったら、ナビゲーションラベルを消せば良いのか！　と思うかもしれませんが、消してしまうとメニューからその項目が削除されてしまいます。

ナビゲーションラベルにリンク、画像URLを入力する方法があります。

[html]
<a href="リンク先"><img alt="代替文字" src="画像URL" width="横幅" height="縦" /></a>
[/html]

というふうにすると、画像に置き換えられます。
名前がリンク、画像のURLになってしまうので「なんのメニューだったっけ？」となってしまうのが難点ですが、HTMLが分かればできるので、一番簡単な方法かなと思います。

私が使っているのはCSSで設定するやり方です。

画像は表示されるけど、文字も表示されてしまうという方は、CSSが

[css]
nav ul li#menu-item-1304 a{
display: block;
background: url(images/home_nav.png) no-repeat left center;
width: 119px;
height: 110px;
}
[/css]

こんなかんじになっているんじゃないでしょうか？

「ここまでさえできない！」という方に簡単に説明しておきます。
リストに「id」が自動でついていると思いますので、その「リンク（a）」に対してCSSを設定します。

display: block; 「a」タグはインライン要素ですが、ブロックレベル要素に変換しています。

background: url(images/home_nav.png) no-repeat left center;　背景画像を設定し、no-repeat（繰り返しなし）、left center（位置を左寄せ、上下は中央に配置）。

width、height：　縦横のサイズを設定しています。

そこに

[css]
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
[/css]

を追加するだけで表示されなくなります。

text-indent: 100%; テキストを枠外に飛ばします。

white-space: nowrap; white-space（ホワイトスペース）はスペースや改行などを指定するCSSです。nowrapを指定しないとボックスのサイズに合わせて改行されますが、指定すると改行を禁止します。

overflow: hidden; ボックスからはみ出た部分を非表示にします。

これで、上の方にはみ出ていた文字が消えて画像だけのグローバルナビができます。

1つ1つのナビに画像を設定する場合は、それぞれのリストの「a(リンク)」にCSSを設定しましょう。

タグ：WordPress 備忘録

2013-09-26