hesabixWpTheme/single.php

<?php
/**
 * قالب نمایش یک پست وبلاگ
 * با الهام از قالب Hesabix
 *
 * @package Hesabix2
 */

get_header();

$layout_class = hesabix2_has_sidebar() ? 'layout-wrap layout--with-sidebar' : 'layout-wrap layout--single';
?>

<div class="<?php echo esc_attr($layout_class); ?>">

<?php while (have_posts()) : the_post(); ?>
    <?php
    $plain = get_post_meta(get_the_ID(), 'plain', true);
    if ($plain) :
        echo '<main class="single-post-page layout-main"><div class="page-plain-content container mx-auto px-4 py-12">';
        echo wp_kses_post($plain);
        echo '</div></main>';
    else :
        $post_id    = get_the_ID();
        $post_title = get_the_title();
        $post_date  = get_the_date('Y/n/d');
        $post_author = get_the_author();
        $post_views  = get_post_meta($post_id, 'post_views_count', true) ?: '0';
        $post_summary = get_post_meta($post_id, '_hesabix_post_summary', true);
        $categories   = get_the_category();
        $tags         = get_the_tags();
        $post_url     = get_permalink();
        $blog_url     = get_permalink(get_option('page_for_posts')) ?: home_url('/blog');
        $reading_time = hesabix2_reading_time(get_the_content());

        $related_args = array(
            'post_type'      => 'post',
            'posts_per_page' => 5,
            'post__not_in'   => array($post_id),
            'orderby'        => 'date',
            'order'          => 'DESC',
        );
        $related_posts = new WP_Query($related_args);
    ?>
<main class="single-post-page layout-main min-h-screen bg-slate-50">
    <!-- هدر پست -->
    <div class="single-post-header bg-white border-b border-slate-200">
        <div class="container mx-auto px-4 py-8">
            <div class="max-w-4xl mx-auto">
                <?php if (!empty($categories)) : ?>
                    <div class="flex flex-wrap gap-2 mb-4">
                        <?php foreach ($categories as $category) : ?>
                            <a href="<?php echo esc_url(get_category_link($category->term_id)); ?>" class="single-post-cat px-3 py-1 bg-brand-100 text-brand-800 text-sm font-medium rounded-full hover:bg-brand-200 transition-colors">
                                <?php echo esc_html($category->name); ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <h1 class="single-title text-3xl lg:text-4xl font-bold text-slate-900 mb-6 leading-tight">
                    <?php echo esc_html($post_title); ?>
                </h1>

                <div class="single-meta-row flex flex-wrap items-center gap-4 sm:gap-6 text-sm text-slate-600">
                    <span class="flex items-center gap-2">
                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                        توسط <strong class="text-slate-800"><?php echo esc_html($post_author); ?></strong>
                    </span>
                    <span class="flex items-center gap-2">
                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        <time datetime="<?php echo esc_attr(get_the_date('c')); ?>"><?php echo esc_html($post_date); ?></time>
                    </span>
                    <span class="flex items-center gap-2">
                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                        <?php echo esc_html($post_views); ?> بازدید
                    </span>
                    <?php if ($reading_time) : ?>
                        <span><?php echo esc_html($reading_time); ?></span>
                    <?php endif; ?>
                    <?php if (comments_open()) : ?>
                        <a href="<?php comments_link(); ?>" class="single-meta-comments text-slate-600 hover:text-brand-600 transition-colors">
                            <?php comments_number('نظر دهید', '۱ نظر', '% نظر'); ?>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4 py-10 lg:py-12">
        <div class="max-w-6xl mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10 lg:gap-12">
                <!-- محتوای پست -->
                <div class="lg:col-span-2">
                    <article id="post-<?php the_ID(); ?>" <?php post_class('single-article'); ?>>
                        <?php if (has_post_thumbnail()) : ?>
                            <figure class="single-featured mb-8 rounded-2xl overflow-hidden shadow-lg">
                                <?php the_post_thumbnail('large', array('class' => 'single-featured__img w-full h-64 lg:h-80 object-cover')); ?>
                                <?php if (get_the_post_thumbnail_caption()) : ?>
                                    <figcaption class="single-featured__caption bg-slate-100 px-4 py-2 text-sm text-slate-600"><?php the_post_thumbnail_caption(); ?></figcaption>
                                <?php endif; ?>
                            </figure>
                        <?php endif; ?>

                        <?php if ($post_summary) : ?>
                            <div class="single-summary-box bg-brand-50 border-r-4 border-brand-500 p-6 rounded-xl mb-8">
                                <p class="text-lg text-slate-700 leading-relaxed font-medium">
                                    <?php echo esc_html($post_summary); ?>
                                </p>
                            </div>
                        <?php endif; ?>

                        <div class="single-content post-content prose prose-slate max-w-none text-slate-800 leading-relaxed">
                            <?php the_content(); ?>
                        </div>

                        <?php
                        wp_link_pages(array(
                            'before' => '<nav class="single-pages mt-6"><p class="text-sm text-slate-600 mb-2">صفحات:</p><ul class="flex gap-2 flex-wrap">',
                            'after'  => '</ul></nav>',
                        ));
                        ?>

                        <?php if (!empty($tags)) : ?>
                            <footer class="single-footer mt-8 pt-8 border-t border-slate-200">
                                <span class="single-footer__label text-sm font-medium text-slate-600">برچسب‌ها:</span>
                                <?php foreach ($tags as $tag) : ?>
                                    <a href="<?php echo esc_url(get_tag_link($tag->term_id)); ?>" class="single-tag inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-slate-100 text-slate-700 hover:bg-brand-100 hover:text-brand-700 transition-colors ml-2 mt-2">
                                        <?php echo esc_html($tag->name); ?>
                                    </a>
                                <?php endforeach; ?>
                            </footer>
                        <?php endif; ?>

                        <!-- اشتراک‌گذاری -->
                        <div class="single-share mt-12 pt-8 border-t border-slate-200">
                            <h3 class="single-share-title text-lg font-bold text-slate-900 mb-4 flex items-center gap-2">
                                <svg class="w-5 h-5 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
                                </svg>
                                این مطلب را به اشتراک بگذارید
                            </h3>
                            <div class="flex flex-wrap gap-3">
                                <a href="<?php echo esc_url('https://twitter.com/intent/tweet?text=' . rawurlencode($post_title) . '&url=' . rawurlencode($post_url)); ?>" target="_blank" rel="noopener noreferrer" class="single-share-btn single-share-twitter inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-white text-sm font-medium hover:opacity-90 transition-opacity">
                                    توییتر
                                </a>
                                <a href="<?php echo esc_url('https://www.linkedin.com/sharing/share-offsite/?url=' . rawurlencode($post_url)); ?>" target="_blank" rel="noopener noreferrer" class="single-share-btn single-share-linkedin inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-white text-sm font-medium hover:opacity-90 transition-opacity">
                                    لینکدین
                                </a>
                                <a href="<?php echo esc_url('https://t.me/share/url?url=' . rawurlencode($post_url) . '&text=' . rawurlencode($post_title)); ?>" target="_blank" rel="noopener noreferrer" class="single-share-btn single-share-telegram inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-white text-sm font-medium hover:opacity-90 transition-opacity">
                                    تلگرام
                                </a>
                                <a href="<?php echo esc_url('https://wa.me/?text=' . rawurlencode($post_title . ' ' . $post_url)); ?>" target="_blank" rel="noopener noreferrer" class="single-share-btn single-share-whatsapp inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-white text-sm font-medium hover:opacity-90 transition-opacity">
                                    واتساپ
                                </a>
                            </div>
                        </div>

                        <?php if (comments_open() || get_comments_number()) : ?>
                            <div class="single-comments-wrap mt-12">
                                <?php comments_template(); ?>
                            </div>
                        <?php endif; ?>
                    </article>
                </div>

                <!-- سایدبار -->
                <div class="lg:col-span-1">
                    <div class="single-sidebar sticky top-8 space-y-8">
                        <?php if ($related_posts->have_posts()) : ?>
                            <div class="single-sidebar-box bg-white rounded-2xl shadow-md border border-slate-100 p-6">
                                <h3 class="single-sidebar-title text-lg font-bold text-slate-900 mb-5 flex items-center gap-2">
                                    <svg class="w-5 h-5 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 01-2-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                                    </svg>
                                    جدیدترین‌ها
                                </h3>
                                <ul class="space-y-4">
                                    <?php while ($related_posts->have_posts()) : $related_posts->the_post(); ?>
                                        <li>
                                            <a href="<?php the_permalink(); ?>" class="single-related-item group flex gap-3 p-3 rounded-xl bg-slate-50 hover:bg-slate-100 transition-colors">
                                                <?php if (has_post_thumbnail()) : ?>
                                                    <?php the_post_thumbnail('thumbnail', array('class' => 'w-16 h-16 object-cover rounded-lg flex-shrink-0')); ?>
                                                <?php else : ?>
                                                    <div class="w-16 h-16 bg-slate-200 rounded-lg flex-shrink-0 flex items-center justify-center">
                                                        <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                                                    </div>
                                                <?php endif; ?>
                                                <div class="flex-1 min-w-0">
                                                    <h4 class="text-sm font-semibold text-slate-900 group-hover:text-brand-600 transition-colors line-clamp-2"><?php the_title(); ?></h4>
                                                    <time class="text-xs text-slate-500 mt-1 block" datetime="<?php echo esc_attr(get_the_date('c')); ?>"><?php echo esc_html(get_the_date('Y/n/d')); ?></time>
                                                </div>
                                            </a>
                                        </li>
                                    <?php endwhile; ?>
                                </ul>
                                <?php wp_reset_postdata(); ?>
                            </div>
                        <?php endif; ?>

                        <div class="single-back-blog bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl p-6 text-center border border-slate-200">
                            <h3 class="text-lg font-semibold text-slate-900 mb-2">بازگشت به وبلاگ</h3>
                            <p class="text-sm text-slate-600 mb-4">مطالب بیشتری را در وبلاگ ما بخوانید</p>
                            <a href="<?php echo esc_url($blog_url); ?>" class="single-back-blog-btn inline-flex items-center gap-2 px-5 py-2.5 bg-brand-600 text-white rounded-xl hover:bg-brand-700 transition-colors font-medium text-sm">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                                مشاهده همه مطالب
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php
    $prev = get_previous_post();
    $next = get_next_post();
    if ($prev || $next) :
    ?>
    <div class="container mx-auto px-4 pb-12">
        <nav class="single-nav max-w-4xl mx-auto flex gap-4 justify-between border-t border-slate-200 pt-8" aria-label="پست‌های قبلی و بعدی">
            <?php if ($prev) : ?>
                <a href="<?php echo esc_url(get_permalink($prev)); ?>" class="single-nav__item single-nav__prev flex-1 max-w-[50%] p-4 rounded-xl border border-slate-200 hover:border-slate-300 hover:bg-slate-50 transition-colors text-right">
                    <span class="single-nav__label block text-xs text-slate-500 mb-1">قبلی</span>
                    <span class="single-nav__title text-sm font-semibold text-slate-900 line-clamp-2"><?php echo esc_html(get_the_title($prev)); ?></span>
                </a>
            <?php else : ?>
                <span></span>
            <?php endif; ?>
            <?php if ($next) : ?>
                <a href="<?php echo esc_url(get_permalink($next)); ?>" class="single-nav__item single-nav__next flex-1 max-w-[50%] p-4 rounded-xl border border-slate-200 hover:border-slate-300 hover:bg-slate-50 transition-colors text-left">
                    <span class="single-nav__label block text-xs text-slate-500 mb-1">بعدی</span>
                    <span class="single-nav__title text-sm font-semibold text-slate-900 line-clamp-2"><?php echo esc_html(get_the_title($next)); ?></span>
                </a>
            <?php endif; ?>
        </nav>
    </div>
    <?php endif; ?>
</main>
    <?php
    endif; // پایان if (!$plain)
endwhile;
?>

<?php if (hesabix2_has_sidebar()) : ?>
    <aside class="layout-sidebar" role="complementary">
        <?php dynamic_sidebar('sidebar-1'); ?>
    </aside>
<?php endif; ?>
</div>

<?php
get_footer();