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

  • stars-ent

    (@stars-ent)


    11年、 3ヶ月前

    下記ページの一番下の記事を参考にカスタムメニューのリンクを画像にしました。
    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)

    11年、 3ヶ月前

    こんにちは、

    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)

    11年、 3ヶ月前

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

    nobita

    (@nobita)

    11年、 3ヶ月前

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

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

    nobuyucki

    (@nobuyucki)

    10年前

    空の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属性をつけたい」には新たに返信することはできません。