Prvi commit: WordPress tema Europe Wonder s CI/CD konfiguracijo
This commit is contained in:
Mark Poljanšek committed
commit
135cc3b4c6
438 files changed
+56454
No files matched your search
+251
@@ -0,0 +1,251 @@
|
||||
<?php
|
||||
/**
|
||||
* Template Name: Blog
|
||||
*/
|
||||
|
||||
get_header(); ?>
|
||||
|
||||
<!-- Hero section -->
|
||||
<section class="page-hero">
|
||||
<div class="hero-content">
|
||||
<h1><?php the_title(); ?></h1>
|
||||
<p>Discover travel stories, tips, and insights</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Blog section -->
|
||||
<section class="blog">
|
||||
<div class="container">
|
||||
<div class="blog-grid">
|
||||
<?php
|
||||
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
|
||||
$args = array(
|
||||
'post_type' => 'post',
|
||||
'posts_per_page' => 9,
|
||||
'paged' => $paged
|
||||
);
|
||||
|
||||
$blog_query = new WP_Query($args);
|
||||
|
||||
if ($blog_query->have_posts()) :
|
||||
while ($blog_query->have_posts()) : $blog_query->the_post();
|
||||
$image = get_the_post_thumbnail_url(get_the_ID(), 'large');
|
||||
if (!$image) {
|
||||
$image = get_theme_file_uri('images/placeholder.jpg');
|
||||
}
|
||||
?>
|
||||
<article class="blog-card">
|
||||
<div class="blog-image">
|
||||
<img src="<?php echo esc_url($image); ?>"
|
||||
alt="<?php echo esc_attr(get_the_title()); ?>"
|
||||
loading="lazy">
|
||||
</div>
|
||||
<div class="blog-content">
|
||||
<div class="blog-meta">
|
||||
<span class="date">
|
||||
<i class="far fa-calendar"></i>
|
||||
<?php echo get_the_date('M j, Y'); ?>
|
||||
</span>
|
||||
<?php
|
||||
$categories = get_the_category();
|
||||
if ($categories) :
|
||||
?>
|
||||
<span class="category">
|
||||
<i class="far fa-folder"></i>
|
||||
<?php echo esc_html($categories[0]->name); ?>
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<h2><?php the_title(); ?></h2>
|
||||
<p><?php echo wp_trim_words(get_the_excerpt(), 20); ?></p>
|
||||
<a href="<?php the_permalink(); ?>" class="btn-read">Read More →</a>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
endwhile;
|
||||
|
||||
// Pagination
|
||||
echo '<div class="pagination">';
|
||||
echo paginate_links(array(
|
||||
'total' => $blog_query->max_num_pages,
|
||||
'current' => $paged,
|
||||
'prev_text' => '←',
|
||||
'next_text' => '→'
|
||||
));
|
||||
echo '</div>';
|
||||
|
||||
wp_reset_postdata();
|
||||
else :
|
||||
?>
|
||||
<div class="no-posts">
|
||||
<p>No blog posts found.</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Blog Page Styles */
|
||||
.blog {
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.blog-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.blog-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.blog-image {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.blog-card:hover .blog-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.blog-meta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.blog-meta span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.blog-meta i {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.blog-card h2 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--dark);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blog-card p {
|
||||
color: #666;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-read {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background-color: var(--accent);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-top: auto;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.btn-read:hover {
|
||||
background-color: var(--accent-dark);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.pagination .page-numbers {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
color: var(--dark);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pagination .page-numbers.current {
|
||||
background-color: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.pagination .page-numbers:hover:not(.current) {
|
||||
background-color: #f5f5f5;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.no-posts {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
background: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.blog-card h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.blog-image {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
Reference in new issue
Block a user