c06ab0b8a2
Implement a complete overhaul of the theme templates to match the Kolli UI design, including enhanced WooCommerce support, dark mode functionality, and improved responsive layouts. - Redesign core templates: front-page, archive, single, and product pages - Implement dynamic WooCommerce templates for shop, single product, and checkout - Add comprehensive asset structure including fonts, images, and custom CSS/JS - Integrate Tailwind CSS via CDN with custom configuration for brand colors - Add dark mode support with local storage persistence - Refactor functions.php for better theme setup and script enqueuing - Implement custom product meta fields for ingredients and health benefits - Add responsive design improvements and custom animations
79 lines
4.5 KiB
PHP
79 lines
4.5 KiB
PHP
<?php
|
|
/**
|
|
* صفحه بلاگ (آرشیو پستها) - مطابق با UI Kolli.html
|
|
*
|
|
* @package Motayeb
|
|
*/
|
|
|
|
get_header();
|
|
?>
|
|
|
|
<!-- ===== BLOG HEADER ===== -->
|
|
<section class="relative bg-forest-500 dark:bg-forest-800 py-12 md:py-16 overflow-hidden">
|
|
<div class="absolute inset-0 opacity-10 honeycomb-bg"></div>
|
|
<div class="max-w-7xl mx-auto px-4 md:px-6 relative">
|
|
<h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white text-center">مجله سلامت مطیب</h1>
|
|
<p class="text-white/70 text-center mt-3 max-w-2xl mx-auto">جدیدترین مقالات و مطالب آموزشی در زمینه سلامت، تغذیه و سبک زندگی ارگانیک</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== BLOG CONTENT ===== -->
|
|
<section class="py-12 md:py-20 bg-cream-100 dark:bg-dark-bg">
|
|
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<?php if ( have_posts() ) : ?>
|
|
<?php while ( have_posts() ) : the_post(); ?>
|
|
<?php
|
|
$categories = get_the_category();
|
|
$cat_name = ! empty( $categories ) ? $categories[0]->name : 'سلامت';
|
|
$cat_color = 'bg-forest-50 dark:bg-forest-900/30 text-forest-500 dark:text-forest-300';
|
|
if ( $cat_name === 'دستور پخت' || $cat_name === 'غذا' ) {
|
|
$cat_color = 'bg-honey-50 dark:bg-honey-900/30 text-honey-400';
|
|
} elseif ( $cat_name === 'سبک زندگی' ) {
|
|
$cat_color = 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-500';
|
|
}
|
|
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'medium' );
|
|
$img_src = $image ? $image[0] : 'https://picsum.photos/seed/' . get_the_ID() . '/600/400.jpg';
|
|
?>
|
|
<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(); ?>">
|
|
<div class="overflow-hidden h-48">
|
|
<img src="<?php echo esc_url( $img_src ); ?>" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="<?php the_title_attribute(); ?>">
|
|
</div>
|
|
</a>
|
|
<div class="p-5">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="px-2.5 py-0.5 <?php echo esc_attr( $cat_color ); ?> text-xs rounded-full font-medium"><?php echo esc_html( $cat_name ); ?></span>
|
|
<span class="text-xs text-cream-500 dark:text-dark-muted"><?php echo get_the_date( 'j F Y' ); ?></span>
|
|
</div>
|
|
<h3 class="font-bold text-lg mb-2 group-hover:text-forest-500 dark:group-hover:text-forest-300 transition">
|
|
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
|
|
</h3>
|
|
<p class="text-sm text-cream-500 dark:text-dark-muted line-clamp-2"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></p>
|
|
<a href="<?php the_permalink(); ?>" class="inline-flex items-center gap-1 mt-4 text-sm font-medium text-forest-500 dark:text-forest-300 hover:gap-2 transition-all">
|
|
<span>بیشتر بخوانید</span>
|
|
<iconify-icon icon="lucide:arrow-left" width="16"></iconify-icon>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
<?php endwhile; ?>
|
|
<?php else : ?>
|
|
<p class="text-center text-cream-500 dark:text-dark-muted col-span-3">هنوز مطلبی منتشر نشده است.</p>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="mt-10">
|
|
<?php the_posts_pagination( array(
|
|
'mid_size' => 2,
|
|
'prev_text' => '<iconify-icon icon="lucide:chevron-right" width="18"></iconify-icon>',
|
|
'next_text' => '<iconify-icon icon="lucide:chevron-left" width="18"></iconify-icon>',
|
|
'screen_reader_text' => ' ',
|
|
'class' => 'flex justify-center gap-2',
|
|
) ); ?>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<?php
|
|
get_footer();
|