サポート » 使い方全般 » [gallery]ショートコードにより表示されるHTMLの調整方法

  • 解決済 contSuzuki

    (@contsuzuki)


    [gallery]ショートコードを利用して、投稿記事に写真の一覧を表示しています。

    [gallery link="file"]

    と、記事内に入力し、以下の要に表示されています。

    <div class="gallery default columns_3" id="gallery-1">
      <dl class="gallery-item">
        <dt class="gallery-icon">
          <a title="画像1" href="画像1のURL">
            <img width="150" height="150" alt="画像の代替テキスト" …>
          </a>
        </dt>
        <dd class="gallery-caption">画像のキャプション</dd>
      </dl>
      <dl class="gallery-item">
        <dt class="gallery-icon">
          <a title="画像2" href="画像2のURL">
            <img width="150" height="150" alt="画像2の代替テキスト" …>
          </a>
        </dt>
        <dd class="gallery-caption">画像2のキャプション</dd>
      </dl>
      <dl class="gallery-item gallery-endcol">
        <dt class="gallery-icon">
          <a title="画像3" href="画像3のURL">
            <img width="150" height="150" alt="画像3の代替テキスト" …>
          </a>
        </dt>
        <dd class="gallery-caption">画像3のキャプション</dd>
      </dl>
    <br class="clear">
    </div>

    この表示されたHTMLの<a>タグに、何らかのclassを指定したいのですが、
    どのファイルの、どの部分に、どのように、カスタマイズすれば良いのかがわかりません。

    どなたか、ご教授頂けませんでしょうか?
    質問に不備などがあれば、ご指摘下さい。

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

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • 以下の *ように* functions.php に追加すれば OK!

    add_filter( 'wp_get_attachment_link', 'my_get_attachment_link', 10, 6 );
    function my_get_attachment_link( $link, $id, $size, $permalink, $icon, $text ) {
      return str_replace( $link, '<a ', '<a class="my-class" ' );
    }

    ※ギャラリーでなくてもリンク付き画像すべてに適用されます。

    画像ごとにクラス名を変えたい場合は、$id を使ってみたりすると良いかも。

    トピック投稿者 contSuzuki

    (@contsuzuki)

    kz様、返信有難うございます。
    ご教授頂いたとおり記述してみたのですが、クラスが入りません。

    利用中のテーマのディレクトリ内のfunctions.phpに記述したのですが、別のfunctions.phpだったのでしょうか?

    それとも、こちらの状況に合わせて、どこかを変更する必要があったのでしょうか?


    “以下の要に”←誤字、すいません。

    こんにちは

    return str_replace( '<a ', '<a class="my-class" ', $link);

    かも

    トピック投稿者 contSuzuki

    (@contsuzuki)

    nobitaさん、返信有難うございます。
    やはり、だめのようです…

    トピック投稿者 contSuzuki

    (@contsuzuki)

    kz様、nobita様、すいませんでした。

    プラグインで、File Galleryを有効にしていたがため、できなかったようです。
    File Galleryを無効にした上で、以下のコードをfunction.phpに追加することで解決しました。

    add_filter( 'wp_get_attachment_link', 'my_get_attachment_link', 10, 6 );
    function my_get_attachment_link( $link, $id, $size, $permalink, $icon, $text ) {
      return str_replace( '<a ', '<a class="my-class" ', $link);
    }

    本当に有難うございました!

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「[gallery]ショートコードにより表示されるHTMLの調整方法」には新たに返信することはできません。