Wordpressでアイキャッチ画像を表示したい

Question

前提・実現したいこと

Wordpressでカテゴリ別の記事一覧でアイキャッチ画像を表示させたいと考えております。
画像はできるだけ（常識的な範囲で）小さく一覧性の高い感じにしたいです。
▼現状ページ（一覧の画像がデカく一覧性に乏しい）
↓開発中のサイトなので予告なくリンク切れの可能性があります！
http://ictaga.com/members/okui/wp2/
・Wordpress 5.5.3
・テーマはTwenty Twentyバージョン: 1.5
・index.phpにカテゴリ一覧を入れるソース（下記サイトの）を追加してます！
http://technical.decogr.net/wordpress/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-wordpress/wordpress%E3%81%A7%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E4%B8%80%E8%A6%A7%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/

▼目標ページ
http://www.sakata-kensetu.co.jp/contents/?cat=3

エラーというエラーは出てないですが、カスタマイズの最中って感じです！

該当のソースコード

PHP

試したこと

下記のサイト等見てますがいまいち理解できませんでした
https://arts-factory.net/thumbnail2/
https://www.tsukimi.net/wordpress_thumbnail.html

補足情報（FW/ツールのバージョンなど）

ez-HTML 7.71
Dream weaver CS5
上記2つは使える環境です！

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

Wordpressでカテゴリ別の記事一覧でアイキャッチ画像を表示させたいと考えております。
画像はできるだけ（常識的な範囲で）小さく一覧性の高い感じにしたいです。
▼現状ページ（一覧の画像がデカく一覧性に乏しい）
http://ictaga.com/members/okui/wp2/
・Wordpress 5.5.3
・テーマはTwenty Twentyバージョン: 1.5
・index.phpにカテゴリ一覧を入れるソース（下記サイトの）を追加してます！　
http://technical.decogr.net/wordpress/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-wordpress/wordpress%E3%81%A7%E3%82%AB%E3%83%86%E3%82%B4%E3%83%AA%E3%83%BC%E4%B8%80%E8%A6%A7%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B/

▼目標ページ
http://www.sakata-kensetu.co.jp/contents/?cat=3

▼サイトの現状
http://ictaga.com/members/okui/wp2/

該当のソースコード　

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */

get_header();
?>

<main id="site-content" role="main">
<!-- カテゴリ一覧の表示 ここから -->
<ul class="category_list">
    <?php
    $cat_all = get_terms( "category", "fields=all&get=all&exclude_tree=12&exclude=11" );
    foreach($cat_all as $value):
     ?>
    <li><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?>(<?php echo $value->count;?>)</a></li>
    <?php endforeach; ?>
</ul>
<!-- カテゴリ一覧の表示 ここまで -->

<!-- アイキャッチ画像一覧の表示 ここから -->
<div class="article-wrap">
    <?php

    $archive_title    = '';
    $archive_subtitle = '';

    if ( is_search() ) {
        global $wp_query;

        $archive_title = sprintf(
            '%1$s %2$s',
            '<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
            '&ldquo;' . get_search_query() . '&rdquo;'
        );

        if ( $wp_query->found_posts ) {
            $archive_subtitle = sprintf(
                /* translators: %s: Number of search results. */
                _n(
                    'We found %s result for your search.',
                    'We found %s results for your search.',
                    $wp_query->found_posts,
                    'twentytwenty'
                ),
                number_format_i18n( $wp_query->found_posts )
            );
        } else {
            $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
        }
    } elseif ( is_archive() && ! have_posts() ) {
        $archive_title = __( 'Nothing Found', 'twentytwenty' );
    } elseif ( ! is_home() ) {
        $archive_title    = get_the_archive_title();
        $archive_subtitle = get_the_archive_description();
    }

    if ( $archive_title || $archive_subtitle ) {
        ?>

        <header class="archive-header has-text-align-center header-footer-group">

            <div class="archive-header-inner section-inner medium">

                <?php if ( $archive_title ) { ?>
                    <h3 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h3>
                <?php } ?>
                    <?php
                    $thumbnail_id = get_post_thumbnail_id();//アイキャッチのID
                    $data = wp_get_attachment_image_src($thumbnail_id,'thumbnail');//配列
                    ?>
                    <img src="<?php echo $data[0] ;?>" width="<?php echo $data[1] ;?>" height="<?php echo $data[2] ;?>" >
                <?php if ( $archive_subtitle ) { ?>
                    <div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
                <?php } ?>

            </div><!-- .archive-header-inner -->

        </header><!-- .archive-header -->

            <?php
        }

        if ( have_posts() ) {

            $i = 0;

            while ( have_posts() ) {
        $i++;
        if ( $i > 1 ) {
        echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
        }

        the_post();

        get_template_part( 'template-parts/content', get_post_type() );

     }
    } elseif ( is_search() ) {
        ?>

        <div class="no-search-results-form section-inner thin">

            <?php
            get_search_form(
                array(
                    'label' => __( 'search again', 'twentytwenty' ),
                )
            );
            ?>

        </div><!-- .no-search-results -->

        <?php
    }
    ?>

    <?php get_template_part( 'template-parts/pagination' ); ?>

</main><!-- #site-content -->
</div><!-- /.article-wrap -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php
get_footer();

PHP

試したこと

検索してヒットした下記のサイト等見てますがいまいち理解できませんでした
https://arts-factory.net/thumbnail2/
https://www.tsukimi.net/wordpress_thumbnail.html

Comments

[dit.]

[設定]-[メディア]-[サムネイルのサイズ]を変更していなければ150*150に切り抜かれた画像は作成されていると思うので、画像を表示するところに<?php the_post_thumbnail('thumbnail');?>を使えばいいだけだと思いますがいかがでしょうか？
うまくいっていないものでもいいので、現状のコードを提示していただければと思います。
また、文章が繰り返されてしまっていたりコードがうまくコードブロックになっていないのでプレビューで確認しながら編集してください。

```php
ここにコードを記載
```

[Tomokui]

一応、[設定]-[メディア]-[サムネイルのサイズ]、はご指摘の通りにしてあるんですけれど…。
その
<?php the_post_thumbnail('thumbnail');?>
をどの位置に入れたら良いのか自体がよくわかってないんです…。

[Tomokui]

deleted

[dit.]

コードは質問を編集して質問内に記載してください。

[Tomokui]

deleted

[dit.]

コード確認しました。
エラーが出ているのは、余計な全角スペースが入っていることと、コード編集の際に必要な部分を誤って削除してしまっているためだと思います。

確認ですが、
・アーカイブページ（カテゴリー別）記事一覧の際は各記事の本文は表示させず、タイトルと画像（150*150のサムネイル）を並べて表示させたい
・タイトルや画像に各記事へのリンクをはりたい
ということで間違いないですか？

[Tomokui]

>・アーカイブページ（カテゴリー別）記事一覧の際は各記事の本文は表示させず、タイトルと画像（150*150のサムネイル）を並べて表示させたい
>・タイトルや画像に各記事へのリンクをはりたい
>
引き続きのサポート、ありがとうございます！
ほぼ丸投げに近い形になってしまってるにも関わらず感謝しております。
ですね！間違いないです！
全角スペースってのはどこの部分でしょう？

Answer 1

要望がなんとなく判明したのでさらに書き換えました。
「トップページにカテゴリー一覧（リスト）を表示させる」
「トップページには各カテゴリーのタイトルとそれに所属する記事を画像（150*150）とタイトルで表示→個別ページにリンク」
「アーカイブページもトップページと同じような見た目で表示」

サンプルサイト

◆index.phpをすべて下記に書き換える↓

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */

get_header();
?>

<main id="site-content" role="main">
<div class="category_list"><!-- カテゴリ一覧の表示 ここから -->
<ul>
    <?php
    $cat_all = get_terms( "category", "fields=all&get=all&exclude_tree=12&exclude=11" );
    foreach($cat_all as $value):
     ?>
    <li><a href="<?php echo get_category_link($value->term_id); ?>"><?php echo $value->name;?>(<?php echo $value->count;?>)</a></li>
    <?php endforeach; ?>
</ul>
</div><!-- カテゴリ一覧の表示 ここまで -->

<?php if ( is_home() ) { ?>
  <?php
  $categories = get_categories();
  foreach($categories as $category) :
  ?>
  <hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />
  <div class="has-text-align-center"><h2><a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->cat_name; ?></a></h2></div>
  <?php
    query_posts('cat='.$category->cat_ID.'&showposts=-1');
    if (have_posts()) : ?>
  <div class="ex-list">
    <?php while (have_posts()) : the_post(); ?>
    <div><a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()): ?><img src="<?php the_post_thumbnail_url( 'thumbnail' ); ?>"><?php else: ?><img src="http://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE"><?php endif; ?><?php the_title(); ?></a></div>
    <?php endwhile; ?>
  </div>
  <?php endif; ?>
  <?php endforeach; ?>


<?php }else{ ?>
	<?php

	$archive_title    = '';
	$archive_subtitle = '';

	if ( is_search() ) {
		global $wp_query;

		$archive_title = sprintf(
			'%1$s %2$s',
			'<span class="color-accent">' . __( 'Search:', 'twentytwenty' ) . '</span>',
			'&ldquo;' . get_search_query() . '&rdquo;'
		);

		if ( $wp_query->found_posts ) {
			$archive_subtitle = sprintf(
				/* translators: %s: Number of search results. */
				_n(
					'We found %s result for your search.',
					'We found %s results for your search.',
					$wp_query->found_posts,
					'twentytwenty'
				),
				number_format_i18n( $wp_query->found_posts )
			);
		} else {
			$archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' );
		}
	} elseif ( is_archive() && ! have_posts() ) {
		$archive_title = __( 'Nothing Found', 'twentytwenty' );
	} elseif ( ! is_home() ) {
		$archive_title    = get_the_archive_title();
		$archive_subtitle = get_the_archive_description();
	}

	if ( $archive_title || $archive_subtitle ) {
		?>

		<header class="archive-header has-text-align-center header-footer-group">

			<div class="archive-header-inner section-inner medium">

				<?php if ( $archive_title ) { ?>
					<h1 class="archive-title"><?php echo wp_kses_post( $archive_title ); ?></h1>
				<?php } ?>

				<?php if ( $archive_subtitle ) { ?>
					<div class="archive-subtitle section-inner thin max-percentage intro-text"><?php echo wp_kses_post( wpautop( $archive_subtitle ) ); ?></div>
				<?php } ?>

			</div><!-- .archive-header-inner -->

		</header><!-- .archive-header -->

		<?php
	}

	if ( have_posts() ) {
    ?>
    <div class="ex-list">
    <?php while ( have_posts() ) { the_post(); ?>
      <div><a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()): ?><img src="<?php the_post_thumbnail_url( 'thumbnail' ); ?>"><?php else: ?><img src="http://placehold.jp/cfcfcf/ffffff/150x150.png?text=NO%20IMAGE"><?php endif; ?><?php the_title(); ?></a></div>
    <?php } ?>
    </div>
    <?php
	} elseif ( is_search() ) {
		?>

		<div class="no-search-results-form section-inner thin">

			<?php
			get_search_form(
				array(
					'label' => __( 'search again', 'twentytwenty' ),
				)
			);
			?>

		</div><!-- .no-search-results -->

		<?php
	}
	?>

	<?php get_template_part( 'template-parts/pagination' ); ?>
<?php } ?>
</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php
get_footer();

◆[外観]-[カスタマイズ]-[追加CSS]に追記↓
（flexbox使用。横幅700px以上で横4つ、それより小さい場合は横2つ）

.category_list{
  padding:4rem 0 0;
  max-width: 58rem;
  width: calc(100% - 4rem);
  margin-left: auto;
  margin-right: auto;
}
.ex-list{
  display:flex;
  flex-wrap: wrap;
  width: calc(100% - 4rem);
  padding:4rem 0 0;
  max-width: 58rem;
  margin-left: auto;
  margin-right: auto;
}
.ex-list>div{
  width:50%;
  padding: .5em;
}
.ex-list img{
  display:block;
}
@media (min-width: 700px){
  .ex-list>div{
  width:25%;
  }
}

書き換える部分を極力少なくしました。
index.phpとカスタマイズの所の追加CSSだけです。

※テーマの更新があった場合カスタマイズした内容が元に戻る可能性がありますので子テーマの作成をお勧めします。（子テーマについては知らなければまずは調べていただき、わからなければまた質問してください。）

Comments

[Tomokui]

早速のご対応、ありがとうございました！
一先ず表示されるところまでは復旧できました！
http://ictaga.com/members/okui/wp2/

問題はこの先なんですけれど、
何処にどうやって
<?php the_post_thumbnail('thumbnail');?>
を挿入したら良いんでしょ？

[dit.]

Twenty Twentyでは現在表示されているページの種類に合わせて別のテンプレートを呼び出すような形で見た目を変えています。
ここでいうページの種類というのは「トップページ」「アーカイブ（カテゴリー）ページ」「検索結果ページ」などです。

このテーマの元々の記述を使わずに、独自で記事一覧を表示させるコードを書いていると思っていたので<?php the_post_thumbnail('thumbnail');?>を提案しましたが、想像と違いましたので<?php the_post_thumbnail('thumbnail');?>だけどこかに挿入するという形ではできません。

一度サンプルサイトを作成しますが少し時間がかかります。
目標ページのような形にするのはカテゴリー別のページのみで、トップページなどはそのままのつもりでいますが大丈夫ですか？

[Tomokui]

> 目標ページのような形にするのはカテゴリー別のページのみで、トップページなどはそのままのつもりでいますが大丈夫ですか？
>
トップページにカテゴリー一覧を表示できるなら問題ありません。
そういった運用は可能なのでしたでしょうか？

[dit.]

昨夜回答を編集していますので、そちらのサンプルサイトもご覧ください。
投稿、固定ページの各個別ページ以外にはおそらくカテゴリー一覧は出ているはずです。
アーカイブやカテゴリー別のページの場合には画像とタイトルのみで投稿のリストができていると思います。

[Tomokui]

はい！ご回答、ありがとうございます！
サンプルサイトを再度確認させていただきました。
ただ、何を言わんとされてるのかがよく掴めませんでした…。

[dit.]

質問に提示されていた条件、状態
・カテゴリ別の記事一覧でアイキャッチ画像を表示させたい
・一覧性の高い感じに
・目標ページはhttp://www.sakata-kensetu.co.jp/contents/?cat=3
・index.phpにカテゴリ一覧を入れるソース（下記サイトの）を追加した

それを元に作ったサンプルサイトで以下の点を実装
・カテゴリ一覧の表示（サンプルサイトでいう「人工物」とか「動物」とか「自然」とかのリスト/投稿や固定ページの個別ページ以外で表示）
・アーカイブ（カテゴリ）ページに飛ぶとそのカテゴリに属する記事一覧を目標ページのような見た目で表示
しています。

サンプルサイトでいうアーカイブ（カテゴリ）ページとはこういうページです。
http://milchkrone.com/sample20201126/2020/11/

回答のコメントでも確認した通り
・トップページの見た目はそのまま
・カテゴリ別のページのみ一覧表示
です。
できるだけ元のテーマの記述を残し、それを利用する形で作っています。

もしかしたら、質問者さんと私の間で言葉とイメージに食い違いがあるかもしれません。
「index.phpにカテゴリ一覧を入れる」とはカテゴリー名のリストではなく、

カテゴリ1
□□□□（カテゴリ1の記事一覧）
---
カテゴリ2
□□□□（カテゴリ2の記事一覧）
---
…

という状態を希望しているということでしょうか？
ちなみに「目標ページ」は提示の一覧ページしか見てません（トップページとかで一覧が出ているかどうか等見ていません。）

まずは希望する形とあっていますか？ということを含めてサンプルサイトを提示したので、
希望と違うのであればトップページの時はこう、アーカイブページの時はこう　と、図示も含めて提示してください。
文字だけだと限界があります。

[Tomokui]

いただいたコードを一通り反映してみました！
http://ictaga.com/members/okui/wp2/
参考までに（一番最初の）質問のコードもそのバージョンに差し替えさせていただきました！

因みに当方のトップページのイメージは下記の画像の通りです。
http://ictaga.com/members/okui/image201130.gif
いや、カテゴリへのリンクが抜けてますね。
上のイメージの情報にul>liでテキストリンクが入ってれば良いです！
正にいただいたサンプルページの上部にあるようなやつです。

[dit.]

結局2020/11/26 15:15にコメントで確認した「目標ページのような形にするのはカテゴリー別のページのみで、トップページなどはそのままで大丈夫ですか」が希望と違っていたということですね？
「トップページにカテゴリー一覧を表示できるなら問題ありません」とお返事いただいていたのでカテゴリー名のリストは表示させたのですけど。

取り急ぎサンプルサイトを書き換えましたので希望通りかどうか確認してください。
https://milchkrone.com/sample20201126/
大丈夫そうならカスタマイズの情報を回答に書きます。

[Tomokui]

そうです！
今回のサンプルサイトが完成型に最も近いです！
何度もとなり大変恐縮なのですが、ご回答お待ちしております！

[dit.]

2020/12/07 14:34に回答編集してあります。
サンプルサイトのアドレスが違うものを挙げていますが、内容はほぼ同じです。
http://milchkrone.com/dit20201204/
新規のWordPressをインストールし、テーマをTwentyTwentyに設定、回答にある通りindex.phpの書き換えと追加CSSの記述のみでこの状態になっています。

・トップページにのみカテゴリーのリストを表示
・トップページにカテゴリごとの投稿を一覧表示（小さめの画像で/アイキャッチ登録が無ければダミー画像を表示）
・アーカイブページも小さめの画像で投稿を表示

[Tomokui]

何だか思ってた様な表示になりました！
長期に渡る、ご尽力ありがとうございました！
　↓現状の表示
http://ictaga.com/members/okui/wp2/
幾つかアイキャッチ画像が抜けたままになっていたのでそちらを再編集しましたけど…。
ベストアンサーに選定させていただきます！

[dit.]

投稿の初めに画像があり、アイキャッチも登録してあると2重に画像が出るような形になるので別の画像を設定するか投稿側の画像を消すのも手かと思います。

ひとまず希望の形に近いところまでできたようなのであとはスタイルの調整などお好みで行ってください。

また、回答の最後にも書きましたがテーマの更新があった場合今回のカスタマイズは消えると思ってください。
それを防ぐには子テーマの作成をするか、（おすすめはあまりしませんが）テーマの更新をしないようにするかになると思います。

Answer 2

サンプルサイトを作成しました。
https://ki-hi-ro.com/sample/thumbnail-list/

実現したいイメージはこんなかんじでしょうか？

ますはPHPで、投稿が繰り返されている箇所を article-wrap で囲います。

<div class="article-wrap">

   <?php
    　while ( have_posts() ) {
        $i++;
        if ( $i > 1 ) {
        echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
        }

        the_post();

        get_template_part( 'template-parts/content', get_post_type() );

    　}
   　?>

</div><!-- article-wrap -->

.article-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    margin: 1rem auto;
    max-width: 80%;
}

一つ一つの記事は、articleタグで表現されていて、以下のようにスタイリングします。

article {
    border: 1px solid #ddd;
    width: 22%;
    height: max-content;
    min-width: 200px;
    padding: 1rem;
    margin-bottom: 3rem;
}

画像は、以下のようにして一つ一つの記事の幅に合わせます。

img {
    max-width: 100%;
    height: auto;
}

細かいところは省くと、以上でサンプルサイトのようになります。

ソースコードはこちらからダウンロードできます。
GitHub

PHPが出力されたあとのHTMLを使用しました。
そのため、以下の箇所が計10回繰り返されています。

補足

jquery.matchHeightで、一つ一つのアイテムの高さを揃えました。

１ jQueryの本体を準備する

assets/jsに、jquery-3.5.1.min.jsを作成し、このページの以下の箇所をクリックした後のページから本体のコードをコピペします。

コピペしたコード

２ jquery.matchHeight.jsを準備する

assets/jsに、jquery.matchHeight.jsを作成し、このページからjquery.matchHeight.jsをコピペします。

コピペしたコード

３ 自分でスクリプトを用意する

例えば、script.jsを用意します。

(function ($) {

    $('.item').matchHeight(
        {
            byRow: true,
            property: 'height',
            target: null,
            remove: false
        }
    );

})(jQuery);

４ 一つ一つの要素に同じクラスを付ける

itemというクラスを以下の場所に付けます。(計10箇所)

<article class="item post-268 post type-post status-publish format-standard has-post-thumbnail hentry category-kindergarten" id="post-268">

５ 3つのファイルを読み込む

　<script src="assets/js/jquery-3.5.1.min.js"></script>
  <script src="assets/js/jquery.matchHeight.js"></script>
  <script src="assets/js/script.js"></script>
</body>

以上で一つ一つの投稿の高さが揃いました。

補足2

画像の高さを揃えるには、まずimg-wrapで**<img>**を囲います。(計10箇所)

<div class="img-wrap">
  <img loading="lazy" class="aligncenter size-full wp-image-269" src="http://ictaga.com/members/okui/wp-content/uploads/2020/09/minori.jpg" alt="" width="768" height="576">
</div>

img-wrapに適応させるCSSはこちら

.img-wrap {
    height: 150px;
    margin: 1rem 0;
    overflow-y: hidden;
}

そうすると、タイトルが1行と2行の2パターン存在してしまい、画像の高さが少しだけ揃わなくなります。
そこで、タイトルが共通で持っているentry-titleというクラスに以下のCSSを適応させます。

.entry-title {
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

さらに、デバイスごとの横幅にも対応します。
以下の記述があることを確認し、

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

デバイスの横幅が699pxまでの、投稿全体を覆う要素の幅を定義します。

.article-wrap {
    width: 256px;
}

700pxから

@media screen and (min-width: 700px) {
    .article-wrap {
        width: 590px;
    }
}

1166pxから

@media screen and (min-width: 1166px) {
    .article-wrap {
        width: 870px;
        justify-content: flex-start;
    }
}

一つ一つの投稿は、以下のようにCSSを調整しました

article {
    min-width: 262px;
    margin: 0 .5rem 3rem;
}

補足3

twentytwentyの以下の部分について、解説します。

if ( have_posts() ) {

		$i = 0;

		while ( have_posts() ) {
			$i++;
			if ( $i > 1 ) {
				echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
			}
			the_post();

			get_template_part( 'template-parts/content', get_post_type() );

		}
	}

まず全体が、

if ( have_posts() ) {


	}

で囲まれてますね。

これは、もし投稿があれば中身が実行されるということです。

次に、

$i = 0;

ここでは、$iに0を入れています。この後で使います。

その下に、

　while ( have_posts() ) {
		

　}

とあります。

これは、投稿がある間は中身をずっと繰り返すということです。
投稿が10件あれば、10回繰り返されます。

その直後の

$i++;

は、自分自身に1を足すという意味です。

一番最初の $i を思い出してください。
0が入っていますね。

$i++;

とすることで、 $i に 1 が入ります。

2周目は、1 + 1 = 2
3周目は、2 + 1 = 3
4周目は、3 + 1 = 4

が、$i に入ります。

つまり、1周目だけ、$i に 1が入っています。

その次に

if ( $i > 1 ) {
　echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
}

とあります。

if ( $i > 1 ) {

}

これは、もし$i が1よりも大きい時、中身を実行するという意味です。

中身は、こちらでしたね。

echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';

これは、以下を表示するという意味です。

<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />;

記事同士を区切っている線のことです。

if ( $i > 1 ) {
　echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
}

ということは、$i が2以上の時、つまり、2つ目の投稿から
区切り線を表示するということです。

その次の

the_post();

では、投稿のデータを取得しています。

ここでは、template-parts というフォルダの、content.php を読み込んでます。

get_template_part( 'template-parts/content', get_post_type() );

長いですが、content.php は以下です。

<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

	<?php

	get_template_part( 'template-parts/entry-header' );

	if ( ! is_search() ) {
		get_template_part( 'template-parts/featured-image' );
	}

	?>

	<div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">

		<div class="entry-content">

			<?php
			if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
				the_excerpt();
			} else {
				the_content( __( 'Continue reading', 'twentytwenty' ) );
			}
			?>

		</div><!-- .entry-content -->

	</div><!-- .post-inner -->

	<div class="section-inner">
		<?php
		wp_link_pages(
			array(
				'before'      => '<nav class="post-nav-links bg-light-background" aria-label="' . esc_attr__( 'Page', 'twentytwenty' ) . '"><span class="label">' . __( 'Pages:', 'twentytwenty' ) . '</span>',
				'after'       => '</nav>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			)
		);

		edit_post_link();

		// Single bottom post meta.
		twentytwenty_the_post_meta( get_the_ID(), 'single-bottom' );

		if ( post_type_supports( get_post_type( get_the_ID() ), 'author' ) && is_single() ) {

			get_template_part( 'template-parts/entry-author-bio' );

		}
		?>

	</div><!-- .section-inner -->

	<?php

	if ( is_single() ) {

		get_template_part( 'template-parts/navigation' );

	}

	/**
	 *  Output comments wrapper if it's a post, or if comments are open,
	 * or if there's a comment number – and check for password.
	 * */
	if ( ( is_single() || is_page() ) && ( comments_open() || get_comments_number() ) && ! post_password_required() ) {
		?>

		<div class="comments-wrapper section-inner">

			<?php comments_template(); ?>

		</div><!-- .comments-wrapper -->

		<?php
	}
	?>

</article><!-- .post -->

これが、一つ一つの投稿です。

Comments

[Tomokui]

ご回答、ありがとうございました！
投稿が初だったのであれで上手く伝わるか不安だったのですけれど上手く伝わったみたいで安心しました！

イメージはほぼ間違ってはないのですがボックスの大きさを全て揃えることはできませんでしょうか？
アイキャッチ画像は統一サイズに切り抜かれても良い、という前提で！
というかこれは管理画面側の設定でしたでしょうか？

[khiro]

全てのボックスの大きさを揃えました！
以前のファイルをご確認ください。

jQueryの「jquery-match-height」というプラグインを使用しました。
その解説を回答に記載します。

[Tomokui]

度々のご回答、ありがとうございます（しかも当日中に貰えるとは思ってなかったです）！
なるほど確かにボックスの高さは揃ってますね（画像の位置はチグハグですけれど…）。
例えばですけどサーバサイドで150×150pxに切り抜いて、それを使用するとかってのはできませんでしょうか？

[khiro]

補足2を追加しました。
デモサイトのURLも合わせてご確認ください。

[khiro]

GitHubのソースコードを更新しました。

[khiro]

.img-wrap {
height: 150px;
overflow-y: hidden;
}
これで以下のように画像を囲めば、切り取られますよ。
<div class="img-wrap">
<img>
</div>

[Tomokui]

度々のご回答、ありがとうございます！
まず大元のPHPソースをどう使うのか、からよくわかりません…。
後、その前提でHTMLがどう絡んでくるのかもよくわかりません…。
それらの結果に、jQueryやCSSで微調整をしておられるのはわかるんですけれど、大元が上手くいってないのに微調整だけってのはどうしようもなくて…。

[khiro]

PHPソースが変換されてHTMLになります。

http://ictaga.com/members/okui/wp2/
こちらのページの
index.phpの96行目でエラーが出ているようですが、
ソースコードをご提示いただいてもよろしいでしょうか？

[khiro]

dit. さんのコードを参考にします。

107行目あたりに

get_template_part( 'template-parts/content', get_post_type() );

とあるかと思います。

ここで、articleを読み込んでます。

articleとは、表示されている一つ一つの投稿のHTMLです。

続きは、回答で！

[khiro]

回答に、補足3を追加しました。

不明点があれば遠慮なく聞いてください。