カスタム投稿タイプ　記事一覧ページを作成＋All in One SEOカスタマイズ

https://abc.com/
　∟https://abc.com/news/（カテゴリー）
　　∟https://abc.com/news/post-1/（投稿ページ）
　　∟https://abc.com/news/post-2/（投稿ページ）
　　∟https://abc.com/news/post-3/（投稿ページ）

投稿タイプのスラッグ・・・news
タクソノミースラッグ・・・news

<?php if ( have_posts() ) : ?>
<div class="posts-grid">
<?php while ( have_posts() ) : the_post(); ?>
<div class="post-item">
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<h3 class="post-title"><?php the_title(); ?></h3>
</a>
<p class="post-description">
<?php
// 'All in One SEO' ディスクリプションを取得
$aioseo_description = get_post_meta(get_the_ID(), '_aioseo_description', true);
if ( !empty($aioseo_description) ) {
// ディスクリプションが設定されていれば表示（100文字で切り詰め）
echo esc_html(mb_strimwidth($aioseo_description, 0, 100, '…'));
} else {
// ディスクリプションがなければ抜粋を表示（100文字で切り詰め）
echo esc_html(mb_strimwidth(get_the_excerpt(), 0, 100, '…'));
}
?>
</p>
</div>
<?php endwhile; ?>
</div>
<?php else : ?>
<p>記事が見つかりませんでした。</p>
<?php endif; ?>

<style>
/* コンテナとグリッドシステムのスタイル */
.posts-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: -10px;
}

/* 各投稿アイテムのスタイリング */
.posts-grid .post-item {
width: calc(33.333% – 20px);
margin: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
flex-direction: column;
background-color: #fff;
}

/* サムネイルのコンテナ */
.post-thumbnail {
display: flex;
justify-content: center;
align-items: center;
height: 170px;
width: 100%;
}

/* サムネイル画像とデフォルト画像のスタイリング */
.posts-grid .post-item .post-thumbnail img,
.posts-grid .post-item .post-thumbnail .custom-thumbnail {
height: 170px;
width: 100%;
object-fit: cover;
object-position: center;
}

/* 投稿タイトルのスタイリング */
.posts-grid .post-item .post-title {
padding: 0px;
font-size: 15px;
margin: 10px;
font-weight:bold;
color: #333;
}

/* 投稿の概要部分 */
.post-description {
padding: 0 15px 15px; /* 概要のパディング */
font-size: 14px; /* 概要のフォントサイズ */
color: #666; /* 概要の文字色 */
overflow: hidden; /* 内容がはみ出た場合に非表示に */
text-overflow: ellipsis; /* テキストがオーバーフローしたときに省略記号を表示 */
}

@media (max-width: 1000px) {
.posts-grid .post-item {
width: calc(50% – 20px); /* 2列表示にする */
}
}

</style>