motayeb/single.php

<?php
/**
 * مقاله تکی بلاگ
 */
get_header();
?>

<main class="pt-16 md:pt-[104px]">
    <div class="max-w-3xl mx-auto px-4 md:px-6 py-12 md:py-16">
        
        <!-- نوار breadcrumbs -->
        <div class="flex items-center gap-2 text-sm text-cream-500 dark:text-dark-muted mb-8">
            <a href="<?php echo home_url(); ?>" class="hover:text-forest-500 transition">خانه</a>
            <iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
            <a href="<?php echo esc_url( get_permalink( get_option( 'page_for_posts' ) ) ); ?>" class="hover:text-forest-500 transition">مجله</a>
            <iconify-icon icon="lucide:chevron-left" width="14"></iconify-icon>
            <span class="text-earth-400 dark:text-dark-text line-clamp-1 max-w-[200px]"><?php the_title(); ?></span>
        </div>

        <?php while ( have_posts() ) : the_post(); ?>
        
            <!-- عنوان -->
            <h1 class="text-3xl md:text-4xl font-extrabold leading-tight mb-6 text-earth-400 dark:text-dark-text">
                <?php the_title(); ?>
            </h1>

            <!-- متادیتا (نویسنده و تاریخ) -->
            <div class="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-cream-200 dark:border-dark-border">
                <?php
                $author_id = get_the_author_meta('ID');
                $avatar_url = get_avatar_url($author_id, 80);
                if ( $avatar_url && ! is_wp_error($avatar_url) ) {
                ?>
                <img src="<?php echo esc_url($avatar_url); ?>" alt="<?php echo esc_attr(get_the_author()); ?>" class="w-10 h-10 rounded-full border-2 border-cream-200 dark:border-dark-border">
                <?php } ?>
                <div>
                    <div class="text-sm font-bold text-earth-400 dark:text-dark-text"><?php the_author(); ?></div>
                    <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('d F Y'); ?></span>
                    </div>
                </div>
                <!-- دسته‌بندی‌ها -->
                <div class="mr-auto flex gap-2 flex-wrap">
                    <?php 
                    $categories = get_the_category();
                    if ( ! empty( $categories ) && ! is_wp_error( $categories ) ) {
                        foreach ( $categories as $cat ) {
                            echo '<a href="' . esc_url( get_category_link( $cat->term_id ) ) . '" class="px-3 py-1 bg-cream-100 dark:bg-dark-bg rounded-full text-xs text-cream-500 dark:text-dark-muted hover:bg-forest-50 hover:text-forest-500 dark:hover:bg-forest-900/30 dark:hover:text-forest-300 transition">' . esc_html($cat->name) . '</a>';
                        }
                    }
                    ?>
                </div>
            </div>

            <!-- عکس اصلی مقاله -->
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="rounded-2xl overflow-hidden mb-10 border border-cream-200/50 dark:border-dark-border/50">
                    <?php the_post_thumbnail( 'large', array( 'class' => 'w-full object-cover' ) ); ?>
                </div>
            <?php endif; ?>

            <!-- متن مقاله -->
            <div class="prose max-w-none text-earth-400 dark:text-dark-text leading-relaxed mb-12
                        prose-headings:font-extrabold prose-headings:text-2xl prose-headings:text-forest-500 dark:prose-headings:text-forest-300 prose-headings:mt-8 prose-headings:mb-4
                        prose-p:text-cream-500 dark:prose-p:text-dark-muted prose-p:leading-8
                        prose-a:text-forest-500 dark:prose-a:text-forest-300 prose-a:font-semibold
                        prose-img:rounded-2xl prose-img:border prose-img:border-cream-200/50 dark:prose-img:border-dark-border/50 prose-img:my-8
                        prose-strong:text-earth-400 dark:prose-strong:text-dark-text">
                <?php the_content(); ?>
            </div>

            <!-- تگ‌ها -->
            <?php 
            $tags = get_the_tags();
            if ( $tags && ! is_wp_error( $tags ) ) : ?>
                <div class="flex items-center gap-2 flex-wrap mb-12 pb-12 border-b border-cream-200 dark:border-dark-border">
                    <iconify-icon icon="lucide:tag" width="18" class="text-cream-400 dark:text-dark-muted flex-shrink-0"></iconify-icon>
                    <?php foreach ( $tags as $tag ) : ?>
                        <a href="<?php echo esc_url( get_tag_link( $tag->term_id ) ); ?>" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-xs text-cream-500 dark:text-dark-muted hover:bg-honey-50 hover:text-honey-400 transition">
                            <?php echo esc_html($tag->name); ?>
                        </a>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>

            <!-- کامنت‌ها -->
            <?php
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }
            ?>

        <?php endwhile; ?>

        <!-- نویسنده مقالات مرتبط -->
        <?php
        $cats = get_the_category();
        if ( ! empty( $cats ) && ! is_wp_error( $cats ) ) {
            $cat_ids = wp_list_pluck( $cats, 'term_id' );
            if ( ! empty( $cat_ids ) ) {
                $related_posts = get_posts( array(
                    'category__in' => $cat_ids,
                    'posts_per_page' => 3,
                    'post__not_in' => array( get_the_ID() ),
                    'orderby' => 'rand'
                ) );
                
                if ( $related_posts && ! is_wp_error( $related_posts ) ) :
                ?>
                <div class="mt-12 pt-12 border-t border-cream-200 dark:border-dark-border">
                    <h3 class="text-xl font-extrabold mb-8 text-earth-400 dark:text-dark-text">نوشته‌های مرتبط</h3>
                    <div class="grid md:grid-cols-3 gap-6">
                        <?php foreach ( $related_posts as $post ) : setup_postdata( $post ); ?>
                            <a href="<?php the_permalink(); ?>" class="group block bg-white dark:bg-dark-card rounded-xl overflow-hidden border border-cream-200/50 dark:border-dark-border/50 hover:shadow-lg transition-all">
                                <div class="h-40 overflow-hidden">
                                    <?php if ( has_post_thumbnail() ) : ?>
                                        <?php the_post_thumbnail( 'medium', array( 'class' => 'w-full h-full object-cover group-hover:scale-105 transition-transform duration-500' ) ); ?>
                                    <?php endif; ?>
                                </div>
                                <div class="p-4">
                                    <h4 class="font-bold text-sm line-clamp-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition"><?php the_title(); ?></h4>
                                    <span class="text-xs text-cream-400 dark:text-dark-muted mt-2 block"><?php echo get_the_date('Y/m/d'); ?></span>
                                </div>
                            </a>
                        <?php endforeach; wp_reset_postdata(); ?>
                    </div>
                </div>
                <?php
                endif;
            }
        }
        ?>

    </div>
</main>

<?php get_footer(); ?>