Merge pull request 'feat: blog page' (#1) from blog into main

Reviewed-on: https://gitea.whatthefox.pl/Panda/nowa-panda/pulls/1

themes/panda-theme/assets/css/components/blogs.css

@@ -0,0 +1,100 @@
+/* ==================== Blog Page ==================== */
+
+.blog-page {
+  padding: 60px 0;
+}
+
+.blog-page__container {
+  width: 90%;
+  max-width: 1300px;
+  margin: auto;
+}
+
+.blog-page__title {
+  text-align: center;
+  color: var(--primary);
+  margin-bottom: 40px;
+  font-size: 32px;
+  font-weight: 600;
+}
+
+.blog-grid {
+  display: grid;
+  gap: 30px;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+@media (min-width: 768px) {
+  .blog-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .blog-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.post-card {
+  background: var(--white);
+  border: 1px solid #B0D5DE;
+  border-radius: 20px;
+  overflow: hidden;
+  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.post-card__thumb img {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+}
+
+.post-card__title {
+  padding: 16px;
+  color: var(--primary);
+  font-size: 18px;
+  font-weight: 600;
+  flex: 1;
+}
+
+.post-card__button {
+  margin: 0 auto;
+  background-color: var(--button-color);
+  color: var(--white);
+  padding: 8px 24px;
+  border-radius: 28px;
+  font-size: 15px;
+  transition: 0.3s ease;
+}
+
+.post-card__button:hover {
+  background-color: var(--primary);
+}
+
+/* Pagination */
+.blog-pagination {
+  margin-top: 40px;
+  display: flex;
+  justify-content: center;
+}
+
+.blog-pagination .page-numbers {
+  display: inline-flex;
+  padding: 8px 14px;
+  margin: 0 5px;
+  background: var(--white);
+  border-radius: 10px;
+  border: 1px solid var(--button-color);
+  color: var(--button-color);
+  font-weight: 500;
+}
+
+.blog-pagination .current {
+  background: var(--yellow);
+  color: var(--white);
+  border-color: var(--yellow);
+}

themes/panda-theme/assets/css/components/single-blog.css

@@ -0,0 +1,53 @@
+.blog-single-post {
+  padding-top: 60px;
+  padding-bottom: 80px;
+  display: flex;
+  justify-content: center;
+}
+
+.blog-single-post__container {
+  width: 90%;
+  max-width: 900px;
+  background: var(--white);
+  padding: 40px;
+  border-radius: 24px;
+  border: 1px solid #B0D5DE;
+}
+
+.single-post__title {
+  color: var(--primary);
+  font-size: 32px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.single-post__thumb {
+  width: 100%;
+  height: auto;
+  margin-bottom: 32px;
+}
+
+.single-post__thumb img {
+  width: 100%;
+  border-radius: 20px;
+  object-fit: cover;
+}
+
+.single-post__content {
+  color: var(--primary);
+  font-size: 18px;
+  line-height: 1.7;
+}
+
+.single-post__content p {
+  margin-bottom: 20px;
+}
+
+.single-post__content h2,
+.single-post__content h3 {
+  margin-top: 40px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  color: var(--primary);
+}

themes/panda-theme/assets/css/main.css

@@ -20,5 +20,9 @@
 @import "./components/cart.css";
 @import "./components/account.css";
 
+/* ================ Blog ================ */
+@import "./components/blogs.css";
+@import "./components/single-blog.css";
+
 /* ================ Utils ================ */
 @import "./components/buttons.css";

themes/panda-theme/blog-list.php

@@ -0,0 +1,58 @@
+<?php get_header(); ?>
+
+<main class="blog-page">
+    <div class="blog-page__container">
+
+        <h1 class="blog-page__title">Blog</h1>
+
+        <?php
+        $paged = get_query_var('paged') ?: 1;
+        $q = new WP_Query([
+            'post_type' => 'post',
+            'posts_per_page' => 8,
+            'paged' => $paged
+        ]);
+        ?>
+
+        <?php if ($q->have_posts()) : ?>
+            <div class="blog-grid">
+                <?php while ($q->have_posts()) : $q->the_post(); ?>
+                    <article class="post-card">
+                        <a href="<?php the_permalink(); ?>" class="post-card__thumb">
+                            <?php if (has_post_thumbnail()) : ?>
+                                <?php the_post_thumbnail('medium'); ?>
+                            <?php else : ?>
+                                <img src="https://placehold.co/600x400" alt="">
+                            <?php endif; ?>
+                        </a>
+
+                        <h2 class="post-card__title"><?php the_title(); ?></h2>
+
+                        <a href="<?php the_permalink(); ?>" class="post-card__button">
+                            Czytaj więcej
+                        </a>
+                    </article>
+                <?php endwhile; ?>
+            </div>
+
+            <div class="blog-pagination">
+                <?php
+                echo paginate_links([
+                    'total' => $q->max_num_pages,
+                    'mid_size' => 2,
+                    'prev_text' => '←',
+                    'next_text' => '→'
+                ]);
+                ?>
+            </div>
+
+            <?php wp_reset_postdata(); ?>
+
+        <?php else : ?>
+            <p>Brak wpisów.</p>
+        <?php endif; ?>
+
+    </div>
+</main>
+
+<?php get_footer(); ?>

themes/panda-theme/footer.php

@@ -22,10 +22,21 @@
         </section>
         <section class="site-footer__section">
           <p class="site-footer__section-header">Szybki dostęp</p>
-          <p class="site-footer__section-text">Strona główna</p>
+          <p class="site-footer__section-text">
-          <p class="site-footer__section-text">Sklep</p>
+            <a href="/">Strona główna</a>
-          <p class="site-footer__section-text">Regulamin</p>
+          </p>
-          <p class="site-footer__section-text">Polityka Prywatności</p>
+          <p class="site-footer__section-text">
+            <a href="/sklep">Sklep</a>
+          </p>
+          <p class="site-footer__section-text">
+            <a href="/wpisy">Blog</a>
+          </p>
+          <p class="site-footer__section-text">
+            Regulamin
+          </p>
+          <p class="site-footer__section-text">
+            Polityka Prywatności
+          </p>
         </section>
         <section class="site-footer__section">
           <p class="site-footer__section-header">Nasze social media</p>

themes/panda-theme/functions.php

@@ -280,3 +280,35 @@ add_action('wp_enqueue_scripts', function() {
         ]);
     }
 });
+
+
+
+
+// /wpisy → blog-list.php
+add_action('init', function() {
+
+    add_rewrite_rule(
+        '^wpisy/page/([0-9]+)/?$',
+        'index.php?wpisy_list=1&paged=$matches[1]',
+        'top'
+    );
+
+    add_rewrite_rule(
+        '^wpisy/?$',
+        'index.php?wpisy_list=1',
+        'top'
+    );
+});
+
+add_filter('query_vars', function($vars){
+    $vars[] = 'wpisy_list';
+    return $vars;
+});
+
+add_action('template_redirect', function() {
+    if (get_query_var('wpisy_list')) {
+        include get_template_directory() . '/blog-list.php';
+        exit;
+    }
+});
+

themes/panda-theme/single.php

@@ -0,0 +1,25 @@
+<?php get_header(); ?>
+
+<main class="blog-single-post">
+  <div class="blog-single-post__container">
+
+    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
+
+      <h1 class="single-post__title"><?php the_title(); ?></h1>
+
+      <?php if ( has_post_thumbnail() ) : ?>
+        <div class="single-post__thumb">
+          <?php the_post_thumbnail('large'); ?>
+        </div>
+      <?php endif; ?>
+
+      <div class="single-post__content">
+        <?php the_content(); ?>
+      </div>
+
+    <?php endwhile; endif; ?>
+
+  </div>
+</main>
+
+<?php get_footer(); ?>