デモページでいうところの、「home」「PC」「PS3」とかの部分ですかね？
で、あれば
<li id="menu-item-253" class="menu-item menu-item-type-taxonomy menu-item-253">
のようなコードになっているのでidかclassのmenu-item-253などに対して画像置換のcssを利用すればいいような気がします。
画像置換はいやだ、imgタグじゃないとだめ！っていうのでしたらテーマDLして解析しなければいけませんので時間が必要です;)
img タグな場合：
テーマの functions.php にだいたい以下のようなコードを追加すれば OK◎
<?php
add_filter( 'the_title', 'my_nav_title', 10, 2 );
// $title メニューのタイトル
// $id メニューの ID
// タイトルか id を元に img タグを生成しましょう。
function my_nav_title( $title, $id ) {
// the_title フィルタは他でも呼ばれまくるので
// メニューの場合だけ画像にするように取り計らいます。
switch ( $id ) { // ここでは id を元にメニューか否かを判断します。
case 12:
case 13:
case 14:
// 例）画像が「テーマフォルダ/images/nav-メニューID.jpg」な場合。
return '<img src="'
. get_bloginfo('stylesheet_directory')
. '/images/nav-'
. $id
. '.jpg" />';
}
// メニューじゃない場合はタイトルそのまま。
return $title;
}
?>
shokun0803さん
ご返信本当にありがとうございます。
まさに、デモページでいうところの、「home」「PC」「PS3」とかの部分です。
このデモの場合「home」「PC」「PS3」はカテゴリを置いてますが、
ここの部分に、よくあるパターンの「会社概要」「サービス」「お問合せ」などの固定ページ
をメニューとして並べたいんです。そして、それらの各メニューボタンを画像にしたいんです。
shokun0803さんからいただいた、
<li id="menu-item-253" class="menu-item menu-item-type-taxonomy menu-item-253">
ですが、
「idかclassのmenu-item-253などに対して画像置換のcssを利用すればいいような気がします。」
この部分をもう少しだけ具体的に教えていただけますでしょうか。
例えば、menu-item-253用に「btn-corporate.jpg」という画像が用意されている場合、
どこにどんな記述を追記すればよいのでしょうか。
素人過ぎてすいません。
「画像置換のcssを利用する」を教えてください。
よろしくお願いします。
kzさん
ご返信本当にありがとうございます。
kzさんからアドバイスを頂いた、
<?php
add_filter( 'the_title', 'my_nav_title', 10, 2 );
// $title メニューのタイトル
// $id メニューの ID
// タイトルか id を元に img タグを生成しましょう。
function my_nav_title( $title, $id ) {
// the_title フィルタは他でも呼ばれまくるので
// メニューの場合だけ画像にするように取り計らいます。
switch ( $id ) { // ここでは id を元にメニューか否かを判断します。
case 12:
case 13:
case 14:
// 例）画像が「テーマフォルダ/images/nav-メニューID.jpg」な場合。
return '<img src="'
. get_bloginfo('stylesheet_directory')
. '/images/nav-'
. $id
. '.jpg" />';
}
// メニューじゃない場合はタイトルそのまま。
return $title;
}
?>
は、「imgタグの場合」は上記を追記とありますが、
imgタグの場合とは具体的にどのようなケースを指すのでしょうか。
本当に素人ですいません。とても大事なところだと思うので
是非教えてください。
よろしくお願いいたします。
■画像置換のcssを利用する
css で要素の背景画像を指定する方法です。
例）
#menu-item-253{
background: url(images/btn-corporate.jpg) 0 0 no-repeat;
}
■imgタグの場合
html で画像要素を直接記述（img タグを書く）する方法です。
例）
<img src="btn-corporate.jpg" />
html, css ってなんやねん、な場合は WordPress とはちょっと話が離れちゃうので
書籍やネットで調べまくってください◎
このデモの場合「home」「PC」「PS3」はカテゴリを置いてますが、
ここの部分に、よくあるパターンの「会社概要」「サービス」「お問合せ」などの固定ページ
をメニューとして並べたいんです。そして、それらの各メニューボタンを画像にしたいんです。
おやおや、もしかして、もしかすると、テーマの改造をしなくてはいけないかも？デフォルトでカテゴリが表示になっているものを固定ページメニューに置き換えたいんですよねぇ？
htmlやcssがわからないレベルだとphpの修正は難しいかもしれないですよ？
kzさん
アドバイスどおり早速やってみます。
出来たらここでまたご報告しますね。
shokun0803さん
画像置換CSSの方法でやってみます。
あそこのグローバルメニューは「外観」→「メニュー」で作っていて、
カテゴリも固定ページも表示は管理画面から表示設定できるようになっていました。
なので、アドバイスどおりやってみます。
kzさん、shokun0803さんありがとうございます。
出来たらここでご報告いたします。
なるほど。テーマをダウンロード検証はしていなかったので早とちりでしたね。
管理画面からメニューが変更できるタイプのテーマならphpを修正する必要はないですね。
そんなに難しい修正ではないですよ！がんばりましょう;)
shokun0803さん、kzさん
できた。。。嬉しい。
こんなレベルでも僕には凄く嬉しい。
また是非是非お力貸してください。
早急のご返答本当にありがとうございました。
このフォーラムは問題解決時に。。。「解決済み」どこかでチェックするんでしたっけ？
shokun0803さん
ありがとうございます。＾＾
「解決済み」にしました。
shokun0803さん、kzさん
すいません。解決したと思っていたんですが。。。
hover時に画像が切り替わるように追記してみました。
FireFoxでは通常時もhover時も画像の切り替えも問題なく見えるのですが、
IE(ver7）で見ると、hoverしていない通常時は画像がちゃんと見えていて、
hoverすると画像が見えなくなってしまいます。
なぜなんでしょうか。。。。是非御教授ください。
下記が私の書いた記述です。
#menu-item-46 {
background:url(../../images/global-menu01.jpg) no-repeat;
display:block;
float:left; height:50px;
background-position:-600px 0px;
text-indent:-9999px;
}
#menu-item-46 :hover{
background:url(../../images/global-menu01.jpg) no-repeat;
display:block;
float:left; height:50px;
background-position:-600px -50px;
text-indent:-9999px;
}
自分も似たような質問があります。
#menu-item-46 {
}
#menu-item-46 :hover{
}
これはBiz Vektorのテーマでは、どのcssに記述があるのでしょうか？
※このスレッドは解決済みですので、似たような話題でも新規でスレッドを作成ください。
（その際、このスレッドへのリンクを張るとベター）
