wtakop

ご連絡が遅くなりごめんなさい。御対応いただきありがとうございます。
無事解決できました。この度はありがとうございました！

Daisuke Takahashiさま

今後の説明文はhttp〜を含まないようにいたします。
ご対応いただきありがとうございました。

英語のサイトで同トピックのものを見つけました。
https://wordpress.org/support/topic/retreive-first-image-from-post
すみません。ループのことを忘れていました。
これで表示できましたが間違っていないでしょうか。不勉強ですみません。

表示させるphp内

<?php query_posts('showposts=10'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php
if ( $first_image = catch_that_image() ) : ?>
	<img src="<?php echo $first_image; ?>" width="300" alt="<?php the_title(); ?>" />
<?php endif; ?>
  <?php endwhile;?>

taku-k様

今試してみたところ、思っていた感じで表示がされました。
ずっと悩んでいた箇所でしたのでスッキリしました。
php初心者なので一行一行の意味を検索して勉強してみます。

Advanced Custom Fieldsで作ったもののフィールド名とカスタム投稿のIDを結びつける方法がわかっておらず苦戦しておりました。

本当に助かりました。ありがとうございました。

KUCKLUさん、맹조さん
ご回答いただいてありがとうございます。
実は表示元にslick.jsを使用して画像一覧のスライダをレスポンシブ表示にしていたので、少し複雑にしてしまっていました。調整しつつなんとかやってみます。

同じお悩みの方へ下記CSSを見つけましたのでよければご参考ください。

方法1(元の画像が正方形でない場合は歪みます。)
li {
 width: 300px;
 height: 300px;
 overflow: hidden;
}
方法2
li {
position:relative;
width: 300px;
height: 300px;
overflow: hidden;
}
li > img{
position:absolute;
top:-10px;
left:-20px;
}
方法3
li {
position:relative;
height: 300px;
}
li > img{
position:absolute;
clip: rect(10px 100px 80px 10px);
}

背景表示やjQueryもあるようです。

この度はありがとうございました。