motayeb/archive.php

<?php
/**
 * لیست مقالات و دسته‌بندی‌های بلاگ
 */
get_header();
?>

<main class="pt-16 md:pt-[104px]">
    <!-- هدر بخش -->
    <div class="bg-forest-500 dark:bg-forest-800 text-white py-10 md:py-16">
        <div class="max-w-7xl mx-auto px-4 md:px-6 text-center">
            <h1 class="text-3xl md:text-4xl font-extrabold mb-2">
                <?php if ( is_category() ) { single_cat_title(); } 
                elseif ( is_tag() ) { single_tag_title(); }
                elseif ( is_search() ) { printf( __( 'نتایج جستجو برای: %s', 'motayeb' ), '<span>' . get_search_query() . '</span>' ); }
                else { _e( 'مجله سلامت مطیب', 'motayeb' ); } ?>
            </h1>
            <p class="text-white/70 text-sm flex items-center justify-center gap-2 mt-3">
                <a href="<?php echo home_url(); ?>" class="hover:text-white transition">خانه</a>
                <iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
                <span>مجله</span>
            </p>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 md:px-6 py-12 md:py-16">
        <?php if ( have_posts() ) : ?>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <?php while ( have_posts() ) : the_post(); ?>
                    <article class="group bg-white dark:bg-dark-card rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-cream-200/50 dark:border-dark-border/50">
                        
                        <!-- عکس مقاله -->
                        <a href="<?php the_permalink(); ?>" class="block overflow-hidden h-56">
                            <?php if ( has_post_thumbnail() ) : ?>
                                <?php the_post_thumbnail( 'medium_large', array( 'class' => 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500' ) ); ?>
                            <?php else : ?>
                                <div class="w-full h-full bg-cream-100 dark:bg-dark-bg flex items-center justify-center">
                                    <iconify-icon icon="lucide:file-text" width="48" class="text-cream-300 dark:text-dark-muted"></iconify-icon>
                                </div>
                            <?php endif; ?>
                        </a>

                        <!-- محتوای مقاله -->
                        <div class="p-6">
                            <!-- دسته بندی -->
                            <div class="mb-3">
                                <?php 
                                $categories = get_the_category();
                                if ( ! empty( $categories ) ) {
                                    echo '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '" class="inline-flex items-center gap-1.5 px-3 py-1 bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300 rounded-full text-xs font-semibold hover:bg-forest-100 dark:hover:bg-forest-900/50 transition">';
                                    echo esc_html( $categories[0]->name );
                                    echo '</a>';
                                }
                                ?>
                            </div>
                            
                            <!-- عنوان -->
                            <a href="<?php the_permalink(); ?>" class="block font-bold text-lg mb-3 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition line-clamp-2 leading-relaxed">
                                <?php the_title(); ?>
                            </a>
                            
                            <!-- چکیده -->
                            <p class="text-sm text-cream-500 dark:text-dark-muted leading-relaxed line-clamp-2 mb-5">
                                <?php echo get_the_excerpt(); ?>
                            </p>

                            <!-- پایین مقاله -->
                            <div class="flex items-center justify-between pt-5 border-t border-cream-100 dark:border-dark-border">
                                <div class="flex items-center gap-2 text-xs text-cream-400 dark:text-dark-muted">
                                    <iconify-icon icon="lucide:calendar" width="14"></iconify-icon>
                                    <span><?php echo get_the_date('Y/m/d'); ?></span>
                                </div>
                                <a href="<?php the_permalink(); ?>" class="flex items-center gap-1 text-xs font-bold text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
                                    <span>ادامه مطلب</span>
                                    <iconify-icon icon="lucide:arrow-left" width="14"></iconify-icon>
                                </a>
                            </div>
                        </div>
                    </article>
                <?php endwhile; ?>
            </div>

            <!-- صفحه بندی -->
            <div class="mt-12 flex justify-center">
                <?php
                the_posts_pagination( array(
                    'mid_size'  => 2,
                    'prev_text' => '<iconify-icon icon="lucide:arrow-right" width="18"></iconify-icon>',
                    'next_text' => '<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>',
                ) );
                ?>
            </div>

        <?php else : ?>
            <!-- حالت جستجوی ناموفق -->
            <div class="text-center py-20">
                <iconify-icon icon="lucide:search-x" width="64" class="text-cream-300 dark:text-dark-muted mb-4"></iconify-icon>
                <h2 class="text-2xl font-extrabold mb-3">مقاله‌ای یافت نشد</h2>
                <p class="text-cream-500 dark:text-dark-muted mb-6">متأسفانه موردی با این مشخصات پیدا نشد.</p>
                <a href="<?php echo home_url(); ?>" class="inline-flex items-center gap-2 px-6 py-2.5 bg-forest-500 text-white rounded-xl font-semibold hover:bg-forest-600 transition">
                    <span>بازگشت به خانه</span>
                </a>
            </div>
        <?php endif; ?>
    </div>
</main>

<?php get_footer(); ?>