デイトラの卒業課題でCafeを選択して、進めていますが、課題の中で、NEWS（お知らせ）のセクションがあり、ここの更新が一番多いと思われるので、これを一般の投稿で動的にすることにします。
先日、記述した文字数なども考慮しながら、下記コードを作成しました。
<ul class=”p-news-page__main-list”>
<?php if (have_posts()): ?>
<?php while (have_posts()): ?>
<?php the_post(); ?>
<li>
<a class=”p-news__item-type4″ href=”#”>
<div class=”p-news__item-type-4-category-icon”>
<?php
$categories = get_the_category();
if (!empty($categories) && count($categories) >= 2) {
$second_category = $categories[1]; // 配列の2番目の要素を取得
echo $second_category->name; // カテゴリ名を表示
} ?>
</div>
<style>.p-news__item-type-4-category-icon
{background: url(“<?php echo get_template_directory_uri();?>/assets/img/top/パス\ 68@3x.png”)no-repeat center center/ cover;}
</style>
<div class=”p-news__item-type4-img”>
<img src=”<?php the_post_thumbnail(); ?>
</div>
<div class=”p-news__item-type4-comment“><?php
$title = get_the_title();
if (mb_strlen($title) > 38) {
$title = mb_substr($title, 0, 38) . ‘…’;
}echo $title; ?>
</div>
<time class=”p-news__item-type4-date” datetime=”<?php the_time(‘c’); ?>”><?php the_time(‘Y/n/j’); ?></time>
</a></li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
赤字の部分ですが、カテゴリーの背景のため、HTML/CSSでの作成時点でbackground:urlを使っています。ループで回すために、PHPファイル内でインラインスタイルとしてCSSを記述し、そこで get_template_directory_uri() 関数を使っています。