WordPressのギャラリー機能で追加した画像一覧からアイキャッチを除外して、画像に任意のリンク先を指定する

スポンサーリンク

WordPressの記事投稿で、アップロード
した画像をショートコードで簡単に画像
ギャラリーを作成する機能がデフォルト
で備わっていますが、基本的にあまり
使いやすいものではありません。なので
少し便利にしてみます。

デフォルトのギャラリー機能でちょっと微妙な点は「アイキャッチ画像も含まれる」と「リンク先を自由に指定できない」の2つです。これを、実装できるようにしてみます。

アイキャッチ画像を除外する


まずはアイキャッチを除外します。

ギャラリーは[gallery]というショートコードで、その記事内でアップロードした画像のギャラリーを実装出来ます。これは、結構クライアントさんにも手軽で良いと評判です。ギャラリー系のプラグインは便利なんですけど、プラグインそのものの利用方法に戸惑う方もいますので、個人的には極力デフォルトのギャラリーを使って貰うようにしています。

手動で除外

さて、アイキャッチを除外する方法ですが、[gallery exclude='画像ID']とすれば、任意の画像をギャラリーから除外できますので、ここにアイキャッチ画像のIDを含めればOK。

投稿している場合は画像のclassにwp-image-***と付きます。これがIDになりますが、アイキャッチを投稿内に含めない場合はIDを調べるのも、excludeってわざわざ入力するのも面倒臭い。

自分でも面倒臭いと思うような事をクライアントさんにやってもらう訳には行かないですね。

自動で除外

自動で除外する。ここは素直にテーマファイルにショートコードを埋め込んだ方が良さそうです。

<?php  $id = get_post_thumbnail_id(get_the_ID()); ?>
<?php echo do_shortcode('[gallery exclude='.$id.' size="thumbnail" columns="3"]'); ?>

get_post_thumbnail_idで取得したIDをexcludeオプションに含めてあげます。

これだと毎回ギャラリーが追加されてしまいますのでカスタムフィールドで条件分岐し、ギャラリーの有無を選択できるようにします。

カスタムフィールドでギャラリー表示をスイッチできるようにする

ギャラリーを追加したいときはカスタムフィールドを登録すればいいだけ。

<?php $img_gallery = get_post_meta($post->ID, 'img_gallery', true); if ($img_gallery) { ?>
<?php  $id = get_post_thumbnail_id(get_the_ID()); ?>
<?php echo do_shortcode('[gallery exclude='.$id.' size="thumbnail" columns='.$img_gallery.']'); ?>
<?php } else { ?>
<?php } ?>

上記のコードをテーマファイルに含めます。あとは、記事でimg_galleryという名前で、値にギャラリーの列数を指定すればアイキャッチ画像の含まれないギャラリーを手軽に実装出来ます。

続いて、ギャラリーの画像のリンク先を任意に指定出来るようにします。

プラグインを使う

通常、画像にはリンク先を指定できますが、ギャラリーにはリンク先を指定出来ません。これはgallery-custom-linkというプラグインが実現してくれます。

有効化すると、アップロードした画像の編集画面にCustom Linkという項目が追加されます。ここに、任意のリンク先を指定し、保存します。

あとは、

[gallery link="custom_url"]

とするだけで、設定したURLが画像リンクになってくれます。これを先ほどのコードに含めれば完成ですね。

ゴール

<?php $img_gallery = get_post_meta($post->ID, 'img_gallery', true); if ($img_gallery) { ?>
<?php  $id = get_post_thumbnail_id(get_the_ID()); ?>
<?php echo do_shortcode('[gallery exclude='.$id.' link="custom_url" size="thumbnail" columns='.$img_gallery.']'); ?>
<?php } else { ?>
<?php } ?>

link=”custom_url”を追加しました。これで

ギャラリー機能で追加した画像一覧からアイキャッチを除外して、画像に任意のリンク先を指定

を簡単に実装出来る様にするという要望に応えることができます。でも、出来れば標準でリンク先を指定出来るようになって欲しいです。

※紹介したプラグインは標準装備のギャラリーテンプレートをオーバーライドします。利用にはご注意下さい。詳しくはデベロッパーの記事をご参照下さい。

おまけ

自動で除外する一つの方法としてget_post_thumbnail_id()でアイキャッチ画像のIDを取得して一旦ギャラリーを無効化し、配列からアイキャッチ画像を除外して再度ギャラリーのショートコードを有効化させる方法があります。

via:Exclude the_post_thumbnail from gallery shortcode

これはこれで楽なのですが、一旦関数を除去したせいか、先ほどのプラグインが動作しませんでした。

という分けでこのコードは不採用としています。

URL :
TRB :

Comments & Trackbacks (4)

  1. cook-note

     いつも楽しく拝見してます。
     アイキャッチ画像を除外する方法で

    をテーマファイルに埋め込むとなっていますが、
    テーマ編集>テーマのための関数 の最後の行にコピペしたらホームページが表示されなくなり
    ワードプレスのログイン画面も表示されなくなりました。試しで作っていたホームページなので
    よかったのですが・・・

    「テーマファイルに埋め込む」とはどのphpなのでしょうか?  素人過ぎる自分にも分かるように
    教えていただけたらありがたいのですが・・・

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

    • シロ

      こんにちは、いつもご覧頂き有難うございますっ

      コードをそのまま書かれた様子ですが、セキュリティの問題で消えていました。すみません。

      察するに、本記事のコードを管理画面内で追記したら真っ白に、という状況に陥った、という事でしょうか。

      記事中の「テーマファイルに埋め込む」は各パーツファイルを指しています。
      どこに埋め込むかわからずに勘で埋め込めば何も表示されなくなる方がかえって自然な現象だと思います。

      ここでご教授させて頂くのは非常に簡単ですが、このままだとcook-noteさんのWebサイトに今後同じ症状が起こる可能性は非常に高いので無責任に書くのは非常に躊躇します。

      申し訳ありませんが、方法をお伝えするのは今回限りで、今後テーマをカスタマイズする場合は詳しい方に依頼するかご自身で学ばれて下さいます様、お願いいたします。

      【埋め込む場所】

      cook-noteさんのテーマの構成がわかりませんのでお伝えしようがありません。
      ですので、勘でお伝えします。この事をご理解頂いたうえでお試しください。責任は一切負いかねます。

      埋め込むファイルはsingle.php、或いはpage.phpに該当するファイルになります。
      場所はthe_content()の直下なら無難かと思います。レイアウトはCSSで調整なさってください。

      • cook-note

         親切に教えていただきありがとうございました。
        早速試してみたいとおもいます。

         教えて頂く以上自己責任でやっていくものだと
        考えていますので責任転嫁とか、そういう事は一切考えていないし
        親切で教えて頂いてる以上それが当たり前だとおもいます。

        あと自分で学んで知識を増やしていきたいと思います。

        重ねてありがとうございました。

        これからも更新を楽しみにしてます。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services