Merge pull request 'feat: blog page' (#1) from blog into main
Reviewed-on: https://gitea.whatthefox.pl/Panda/nowa-panda/pulls/1
This commit is contained in:
commit
66d8af4c8a
100
themes/panda-theme/assets/css/components/blogs.css
Normal file
100
themes/panda-theme/assets/css/components/blogs.css
Normal file
@ -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);
|
||||
}
|
||||
53
themes/panda-theme/assets/css/components/single-blog.css
Normal file
53
themes/panda-theme/assets/css/components/single-blog.css
Normal file
@ -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);
|
||||
}
|
||||
@ -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";
|
||||
|
||||
58
themes/panda-theme/blog-list.php
Normal file
58
themes/panda-theme/blog-list.php
Normal file
@ -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(); ?>
|
||||
@ -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">Sklep</p>
|
||||
<p class="site-footer__section-text">Regulamin</p>
|
||||
<p class="site-footer__section-text">Polityka Prywatności</p>
|
||||
<p class="site-footer__section-text">
|
||||
<a href="/">Strona główna</a>
|
||||
</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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
25
themes/panda-theme/single.php
Normal file
25
themes/panda-theme/single.php
Normal file
@ -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(); ?>
|
||||
Loading…
Reference in New Issue
Block a user