diff --git a/themes/panda-theme/assets/css/components/blogs.css b/themes/panda-theme/assets/css/components/blogs.css new file mode 100644 index 0000000..cb87278 --- /dev/null +++ b/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); +} diff --git a/themes/panda-theme/assets/css/components/single-blog.css b/themes/panda-theme/assets/css/components/single-blog.css new file mode 100644 index 0000000..7bf4619 --- /dev/null +++ b/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); +} diff --git a/themes/panda-theme/assets/css/main.css b/themes/panda-theme/assets/css/main.css index e7c4b19..228815d 100644 --- a/themes/panda-theme/assets/css/main.css +++ b/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"; diff --git a/themes/panda-theme/blog-list.php b/themes/panda-theme/blog-list.php new file mode 100644 index 0000000..e768013 --- /dev/null +++ b/themes/panda-theme/blog-list.php @@ -0,0 +1,58 @@ + + + + + + Blog + + 'post', + 'posts_per_page' => 8, + 'paged' => $paged + ]); + ?> + + have_posts()) : ?> + + have_posts()) : $q->the_post(); ?> + + + + + + + + + + + + + Czytaj więcej + + + + + + + $q->max_num_pages, + 'mid_size' => 2, + 'prev_text' => '←', + 'next_text' => '→' + ]); + ?> + + + + + + Brak wpisów. + + + + + + diff --git a/themes/panda-theme/footer.php b/themes/panda-theme/footer.php index 9a92460..4d52079 100644 --- a/themes/panda-theme/footer.php +++ b/themes/panda-theme/footer.php @@ -22,10 +22,21 @@ Szybki dostęp - Strona główna - Sklep - Regulamin - Polityka Prywatności + + Strona główna + + + Sklep + + + Blog + + + Regulamin + + + Polityka Prywatności + Nasze social media diff --git a/themes/panda-theme/functions.php b/themes/panda-theme/functions.php index 4f83ad6..df1ed6b 100644 --- a/themes/panda-theme/functions.php +++ b/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; + } +}); + diff --git a/themes/panda-theme/single.php b/themes/panda-theme/single.php new file mode 100644 index 0000000..0cce348 --- /dev/null +++ b/themes/panda-theme/single.php @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + +
Brak wpisów.
Szybki dostęp
Strona główna
Sklep
Regulamin
Polityka Prywatności
+ Strona główna +
+ Sklep +
+ Blog +
+ Regulamin +
+ Polityka Prywatności +
Nasze social media