WordPress サムネイル画像(特性画像)URLアドレス

WordPressのホームページやカテゴリページから特徴画像をクリックすると、通常の文(Post)本文にリンクされます。 特性の画像(サムネイル画像)のURLアドレスを利用した場合、その画像をクリックすると、記事本文に入る代わりにライトボックスの形やポップアップ形態で特徴画像を開くことが可能です。 次のようなコードで、フロントページやカテゴリページなど目的のアーカイブのページでサムネイルをライトボックス形で活用が可能です。

<?php $thumbimage = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large'); ?>
<a href="<?php echo $thumbimage[0]; ?>" rel="lightbox">
<?php the_post_thumbnail('excerpt-thumbnail'); ?></a>

ライトボックスプラグインによっては、rel = "lightbox"の形でコードを挿入するか、場合によっては画像リンクだけが自動的にライトボックスの形で実行されます。

そして特性の画像(サムネイル画像)のサイズ調整は この記事を参照して定義し、上記のコードで 'large'、 'excerpt-thumbnail'の代わりに使用できます。

例えば以下のようにカテゴリーのレイアウトを作成した場合、上記のコードを利用して、サムネイル画像をクリックすると、ライトボックスの形で実行することができます。
WordPress カテゴリーサムネイル
カテゴリページをギャラリーのレイアウトに変えたい場合は、この方法を利用することができます。

参照


6のコメント

  1. うわ、特性画像のURLだけ選ぶ方法探し迷ったここ発見しましたね。 良いヒントよく参考にしていきます。

    1. ブログを訪問していただきありがとうございます。
      文の内容が役立つことを願っております。
      楽しい夜の時間を過ごす:)

  2. 外部画像を読み込んで使用しています。 そうしたらフロントページの画像サイズがギザギザします。
    均一な大きさに調整することができますか?

    1. こんにちは?

      テーマのソースファイルを少し変更すると、簡単にできるようです。
      (https://www.quora.com/How-do-I-make-all-images-in-my-CSS-styling-to-be-the-same-proportionate-size 文の内容を応用すると、画像の幅と高さの比率を一定に合わせることができます。)

      現状としては、次のようなコードを入れてテストしてみてください?
      .post-thumbnail img {
      object-fit: cover;
      height: 250px !important;
      }

      (注: https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio )

      解像度ごとにHeightを変えればいいようです。
      この部分は、CSS media queryで検索し、解像度ごとに高さを異にすることができます。

  3. こんにちは。 WordPressからサムネイルに外部リンクをかけて -blank 形式で移動させる方法を探しています。 もしこのような機能が可能なプラグインや方法があるのでしょうか。

コメントを残す

*メールアドレスは公開されません。