web-dev-qa-db-ja.com

ライトボックスのサムネイルを元の画像にリンクする方法

カスタム投稿タイプを示すページがありますが、ライトボックスプラグインで開くことができるフルサイズ画像にリンクする方法がわかりません。

投稿ページは次のようになります。

 <div class="content" id="main-content">
<?php
  $args=array(
     'post_type' => 'painting',
    );
  $the_query = new WP_Query($args);
  ?>

  <?php if ($the_query->have_posts() ): while ($the_query->have_posts() ):$the_query->the_post(); ?>

<div class="painting col-md-3 col-sm-6" id="inside">
    <div class="painting-image">
        <?php the_post_thumbnail('painting-thumbnail'); ?>
        <span class="overlay"></span>
    </div>
</div>

<?php endwhile; ?>
<?php endif; ?>

{a}タグの中で何かを使うべきだということはわかっていますが、そのソースにリンクする方法がわかりません。私はまた 'wp_get_attachment_image_src'のWPコーデックスを読みました、しかしそれは役に立ちませんでした。さらに助けてくれてありがとう！

permalinkspost-thumbnailsgallerythumbnailswp-get-attachment-image
1
Omid Akbari Kh.

以下は、投稿のおすすめ画像を表示するための例です。これは、画像の実物大バージョンにリンクされています。

WordPressバージョン4.4.0以降では、 the_post_thumbnail_url() を使用できます。

<a href="<?php the_post_thumbnail_url( 'full' ); ?>" class="thickbox"><?php // wrapped
    the_post_thumbnail( 'painting-thumbnail' ); ?></a>

以前のバージョンのWordPressでは、 wp_get_attachment_image_src() のように使用できます。

<?php
$post_thumbnail_id = get_post_thumbnail_id();
$info = wp_get_attachment_image_src( $post_thumbnail_id, 'full' );
?>
<a href="<?php echo esc_url( $info['0'] ); ?>" class="thickbox"><?php // wrapped
    the_post_thumbnail( 'painting-thumbnail' ); ?></a>

thickboxを適切なclassに置き換えると、フルサイズの画像がモーダル/ポップアップで開きます。

1
Sally CJ