WordPress 記事一覧機能

コード

```php

<head>
    <style>
        .article-list {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            /* 適宜調整してください */
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .article-item {
            border: 1px solid #ddd;
            padding: 10px;
            box-sizing: border-box;
            transition: box-shadow 0.3s ease;
        }

        .article-item:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .article-thumb img {
            width: 100%;
            height: auto;
        }

        .article-info {
            padding: 10px 0;
        }

        .article-date {
            font-size: 14px;
            color: #666;
        }

        .article-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>

<div class="content">
    <?php
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1, // 全件表示
    );
    $query = new WP_Query($args);
    if ($query->have_posts()): ?>
        <ul class="article-list">
            <?php while ($query->have_posts()):
                $query->the_post(); ?>
                <li class="article-item">
                    <a href="<?php the_permalink(); ?>">
                        <div class="article-thumb">
                            <?php if (has_post_thumbnail()): ?>
                                <?php the_post_thumbnail('medium'); ?>
                            <?php else: ?>
                                <img src="<?php bloginfo('template_url'); ?>/img/common/noimage.png" alt="ブログイメージ">
                            <?php endif; ?>
                        </div>
                        <div class="article-info">
                            <div class="article-date">
                                <?php the_time('Y年m月d日');
                                foreach (get_the_category() as $category) {
                                    if ($category->parent != 0) { ?><span
                                            class="category"><?php echo $category->name; ?></span><?php }
                                } ?>
                                <?php
                                $last_post_ids = array();
                                $lastposts = get_posts('post_type=post&posts_per_page=1');
                                foreach ($lastposts as $lastpost) {
                                    $last_post_ids[] = $lastpost->ID;
                                } ?>
                                <?php if (in_array(get_the_ID(), $last_post_ids)): ?>
                                    <span class="new-recent">新着</span>
                                <?php endif; ?>
                            </div>
                            <div class="article-title">
                                <?php
                                if (mb_strlen(get_the_title()) > 40) {
                                    $title = mb_substr(get_the_title(), 0, 40);
                                    echo $title . '...';
                                } else {
                                    echo get_the_title();
                                }
                                ?>
                            </div>
                        </div>
                    </a>
                </li>
            <?php endwhile; ?>
        </ul>
    <?php endif;
    wp_reset_postdata(); ?>
</div>