web-dev-qa-db-ja.com

単一ポストループ内でのIMG srcの奇妙な振る舞い

私は最後の外観を単一の投稿の特集画像を整理しようとしていたので、その目的のためにimgタグにクラスを追加したいと思いました。しかし、途中で、the_post_thumbnail（）関数を使おうとしたときに、ちょっと変わった動作に遭遇しました。これは持っていて実際に動作するコードです。

    <?php
if (have_posts()) :
   while (have_posts()) : the_post(); ?>
           <article class="post">

                     <h2 class="postTitle"><?PHP the_title(); ?></h2>
                     <img class="singleMainImg" src="<?php the_post_thumbnail(); ?></img>
                     <p class="postinfo">Created on <?php the_time('F j, Y ')?>  at  <?php the_time('g:i a') ?>. <?php echo getPostViews(get_the_ID()); ?></p>

                     <?php the_content(); ?>
          </article>
          <?php setPostViews(get_the_ID()); ?>
    <?php endwhile;

  else:
    echo '<p> No Content</p>';
  endif;

get_footer();
 ?>

最初の奇妙なことは、

<img class="singleMainImg" src="<?php the_post_thumbnail(); ?></img>

ご覧のとおり、二重引用符はもう必要ありませんが、php呼び出しを終了した後に ">"はもう必要ありません。

これはこのように動作し、私が望んでいるとおりに表示されます（私が割り当てたクラスによってimgを操作できます。問題は、imgタグ内のこれら2つの閉じない限りコードが正常に見える方法ではありません。

最後の二重引用符を追加するときの問題と、>をイメージタグに追加するときの問題は、実際のページにそのまま表示されます。画像

また、私のfunctions.phpファイルにいくつかの定義済みの画像サイズを追加しようとすると、

<img class="singleMainImg" src="<?php the_post_thumbnail('predefImageSize'); ?></img>

まったく画像を引っ張らない

なぜ私がこの問題を抱えているのかについてのアイデア、説明、解決策はありますか？

敬具

phpimagesimage-size
1
Go Mo

the_post_thumbnail関数は投稿のサムネイル、すなわち<img>タグを表示します。この関数を使うときは<img>タグを使う必要はありません。

このコードを試してください：

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

<article class="post">
     <h2 class="postTitle"><?PHP the_title(); ?></h2>
     <?php the_post_thumbnail( 'predefImageSize', ['class' => 'singleMainImg', 'title' => 'Feature image'] ); ?>
     <p class="postinfo">Created on <?php the_time('F j, Y ')?>  at  <?php the_time('g:i a') ?>. <?php echo getPostViews(get_the_ID()); ?></p>
     <?php the_content(); ?>
</article>

<?php setPostViews(get_the_ID()); ?>

<?php endwhile;

else: echo '<p> No Content</p>';   endif;

get_footer();

修正コード：

<?php the_post_thumbnail( 'predefImageSize', ['class' => 'singleMainImg', 'title' => 'Feature Image'] ); ?>

配列のキーと値を使用してさまざまな属性を設定します。これを使用して投稿のサムネイルにクラスを追加できます。

出典： developer.wordpress.orgのthe_post_thumbnailのドキュメント

2
Kashif Rafique