カスタムメニューの画像にalt属性をつけたい

stars-ent
(@stars-ent)

10年、 7ヶ月前
下記ページの一番下の記事を参考にカスタムメニューのリンクを画像にしました。
http://www.webdesignleaves.com/wp/wordpress/146/

表示は問題なくできましたが、メニューごとに個別でalt属性をつけるにはどうしたら良いでしょうか？
下記スクリプトでロールオーバーの設定もしています。
```
<script type="text/javascript">
jQuery(function($){
		$('a img').hover(function(){
	     $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
	   }, function(){
	     if (!$(this).hasClass('currentPage')) {
	     $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
	   }
	   });

	});
</script>
```
また、他の方法でカスタムメニューをロールオーバー可能な画像にする良い方法などありましたら教えてください。
よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)

nobita
(@nobita)

10年、 7ヶ月前
こんにちは、

WordPress3.6で、wp_nav_menu()のアトリビュートを操作するフックが追加されました

簡単なサンプルですが、（クラス名などは読み替えてください）
```
add_filter( 'nav_menu_link_attributes','nobita_add_attribute', 10, 3 );

function nobita_add_attribute( $content,$item, $args ){

  $content['style']= 'background:url( http://your.image.uri )';

 return $content;
}
```
style.css
```
#menu-header-image .menu-item a:hover{background-position:0 100px;}
```
などとすることで、ロールオーバーメニューが実現できます。
トピック投稿者 stars-ent
(@stars-ent)

10年、 7ヶ月前

ありがとうございます。
できれば背景ではなくてテキストを画像に置き換える形が良いのですが、難しいでしょうか？

nobita
(@nobita)

10年、 7ヶ月前

テキストを画像に置き換える形

であれば、jQuery等でのDOM操作になると思います。
nobuyucki
(@nobuyucki)

9年、 5ヶ月前
空のalt属性を、カスタムメニューの「タイトル属性」と置き換える、
というのはいかがでしょうか？
```
add_filter('walker_nav_menu_start_el', 'description_in_nav_menu', 10, 4);
function description_in_nav_menu($item_output, $item){
	return preg_replace('/alt=""/', '$1' . 'alt="'.$item->attr_title.'"', $item_output);
}
```
私は、参考URLと上記コードをfunctions.phpに追加してうまく表現できました。

4件の返信を表示中 - 1 - 4件目 (全4件中)

トピック「カスタムメニューの画像にalt属性をつけたい」には新たに返信することはできません。

トピックタグ

表示