カスタムメニューのそれぞれのリンク背景にアイキャッチ画像を使いたい

  • 解決済 okuusan703

    (@okuusan703)


    10年、 6ヶ月前

    お世話になっております。
    ネット上でもいろいろ検索したのですが、私の技量では解決することができず、ここに質問させていただきます。

    現在、カスタムメニューを表示させる際に、テキストリンクはそのままで、そのリンクの背景画像としてアイキャッチ画像を使いたいと思っています。

    アイキャッチ画像は該当するページのスラッグ名をファイル名にし、upload フォルダに年月フォルダは使用せずにアップロードしてあります。

    ネット上で散見したのは、カスタムメニューで表示されるテキストリンクを、画像に置き換えるものでしたが、これでは、画像だけ表示されて、文字が表示されません。メンテナンス性を高く保つため、ページ名を書いたアイキャッチ画像は使用したくないと思っています。

    該当ページのアイキャッチ画像を背景としたテキストリンクは、カスタムメニューで実装可能でしょうか。ご存知の方がいらっしゃいましたら、よろしくお願いいたします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック投稿者 okuusan703

    (@okuusan703)

    10年、 6ヶ月前

    追記です。

    背景画像の指定方法に CSS を使うのも避けたいです。自動的に紐づけられたアイキャッチ画像がカスタムメニューに表示されるのが目指しているところです。

    よろしくお願いいたします。

    トピック投稿者 okuusan703

    (@okuusan703)

    10年、 6ヶ月前

    自己解決しましたので、今後、同様の事例でお困りになった方のために、私の方法を記載しておきます。
    結論から言えば、カスタマイズ部分は jQuery で行いました。

    前準備として、アイキャッチ画像は表示させたいページのスラッグ名をファイル名として保存し、各ページでアイキャッチ画像として指定しておきます。

    まず、以下のリンク先を参考に、functions.php に追記しました。
    http://inspire-tech.jp/2011/12/wordpress_use_image_for_nav_menu/

    このままだと、アイキャッチ画像が img タグで書き出されて、テキストリンク部分と置き換わっているので、アイキャッチ画像を a タグの背景になるようにし、さらに img タグ内の alt をテキストリンクとして表示させるため、以下のスクリプトをテンプレートの <?php get_footer(); ?>　の直前にいれました。（位置はここで正しいのかわかりませんが…）

    <script type=”text/javascript”>
    jQuery(document).ready(function(){
    jQuery(‘#your-nav-id li a’).each(function(){
    var eyecatchurl = jQuery(‘#your-nav-id li a img’).attr(‘src’);
    var useThis = ‘url(‘+ eyecatchurl + ‘)’;
    var pagetitle = jQuery(‘#your-nav-id li a img’).attr(‘alt’);
    jQuery(this).css({
    ‘background-image’: useThis
    });
    jQuery(this).html(pagetitle);
    jQuery(‘#your-nav-id li a img’).hide();
    });
    });
    </script>

    これで、アイキャッチ画像を背景画像とした、カスタムメニューがテキストと共に表示されるようになりました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「カスタムメニューのそれぞれのリンク背景にアイキャッチ画像を使いたい」には新たに返信することはできません。