サポート » 使い方全般 » wp_list_categoriesにimgタグを挿入

  • wp_list_categoriesで出力したカテゴリ一覧に画像をいれたいと思っています。
    □イメージ
    (画像1)カテゴリ1
    (画像2)カテゴリ2
    (画像3)カテゴリ3

    wp_list_categoriesは

    wp_list_categories('title_li=&depth=1');

    と記述しています。また、function.phpに書き込みを加えて各カテゴリのスラッグをクラスとして出力できるようにしています。
    出力されるhtmlは

    <ul>
    <li class="category1"><a href="xxxx" >カテゴリ1</a></li>
    <li class="category2"><a href="xxxx" >カテゴリ2</a></li>
    <li class="category3"><a href="xxxx" >カテゴリ3</a></li>
    </ul>

    となっています。

    これにjQueryで各クラスを受け取って、それぞれに画像を挿入したいと思っています。
    jQueryはそれぞれこのように書いています。

    $(".category1 a").prepend('<img src="絶対パス/image1.png" />');

    以下の用にhtmlを出力したいと思っていますが、画像が表示されず、ブラウザで表示したソースコードにもimgタグは出力されていない状況です。

    <ul>
    <li class="category1"><a href="xxxx" ><img src="絶対パス/image1.png">カテゴリ1</a></li>
    <li class="category2"><a href="xxxx" ><img src="絶対パス/image2.png">カテゴリ2</a></li>
    <li class="category3"><a href="xxxx" ><img src="絶対パス/image3.png">カテゴリ3</a></li>
    </ul>

    このようにするにはどうすれば良いのでしょうか。
    よろしくお願いします。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • こんにちは。
    $をjQueryに書き換えて動作するか確認してみてはいかがでしょうか。
    jQuery(".category1 a").prepend('<img src="絶対パス/image1.png" />');

    こちらで動作するのであれば、$が衝突回避のためにオフになっているのだ
    と思います(WordPressのjQueryを組み込んでいる場合など)。
    もしスクリプトが長いようであれば、

    ( function($) {
    /* ここにいまのスクリプトを */
    } )( jQuery );

    みたいな感じでも大丈夫です。

    あと次のようにwp_list_categoriesで表示せず、表示内容を取得し、
    その内容を変更してから表示することもできます。

    $list = wp_list_categories('title_li=&depth=1&echo=0');
    /* $listのliタグを書き換え */
    echo $list;

    以上、参考まで。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「wp_list_categoriesにimgタグを挿入」には新たに返信することはできません。