0

ワードプレスのページにちなんで名付けられた画像がたくさんあります。例：

  • ページ名 : 心臓の健康
  • 画像名：heart-health.png

メイン メニューには 1 つのサブメニュー レベルがあり、サブレベルのページ名ごとに、左側に設定された背景画像として画像を表示したいと考えています。私は非常に多くの異なる方法を試しましたが、運がありませんでした。

管理画面のメニューにカスタム テキストを追加できることは知っていますが、すべて自動的に行われることを望みます。

「nav-menu-template.php」と「class-wp-walker.php」で、サブレベルのメニュー項目の開始と終了を見つけました。

現時点では、ロールオーバーするとすべてのサブメニュー項目に同じ画像が表示されますが、それは CSS を使用しているだけです。

.menu ul ul :hover > a{color:#000000;background-color: #eeeeee; background-image:url(images/menu-images/fruit.png); background-repeat:no-repeat;}

ヘルプやアドバイスをいただければ幸いです。

4

1 に答える 1

0

これを行う最良の方法は、CSS を使用することです。

例えば

.menu ul ul .custom-class a { ... }
.menu ul ul .custom-class:hover a { ... }

WordPress メニュー管理で各メニュー項目にカスタム クラスを設定できます。「画面オプション」(ページの右上) の「CSS クラス」チェックボックスがオンになっていることを確認してください。

また、物事を簡単にするために、メニューで使用するすべての画像の画像スプライトを作成して、CSS コードをより単純にすることをお勧めします。

.menu ul ul a {
  background:url('/url-to-sprite.png') no-repeat 0px 0px;
}

.menu ul ul :hover a {
  background-position:-20px 0px;
}

.menu ul ul .custom-class a {
  background-position:0px -20px;
}

.menu ul ul .custom-class:hover a {
  background-position:-20px -20px;
}
于 2013-02-12T18:22:33.670 に答える