Fix layout for single article images and style comments section
This commit is contained in:
83
single.php
83
single.php
@@ -6,29 +6,32 @@
|
||||
get_header(); ?>
|
||||
|
||||
<main id="primary" class="site-main container my-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<?php
|
||||
while (have_posts()):
|
||||
the_post();
|
||||
?>
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
<header class="entry-header text-center mb-5">
|
||||
<div class="entry-meta text-uppercase text-muted small fw-semibold mb-3">
|
||||
<?php echo get_the_category_list(', '); ?>
|
||||
<span class="mx-2">•</span>
|
||||
<span class="entry-date"><?php echo get_the_date(); ?></span>
|
||||
</div>
|
||||
<?php the_title('<h1 class="entry-title display-4 fw-bold mb-4">', '</h1>'); ?>
|
||||
</header>
|
||||
<?php
|
||||
while (have_posts()):
|
||||
the_post();
|
||||
?>
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
|
||||
<header class="entry-header text-center mb-5">
|
||||
<div class="entry-meta text-uppercase text-muted small fw-semibold mb-3">
|
||||
<?php echo get_the_category_list(', '); ?>
|
||||
<span class="mx-2">•</span>
|
||||
<span class="entry-date"><?php echo get_the_date(); ?></span>
|
||||
</div>
|
||||
<?php the_title('<h1 class="entry-title display-4 fw-bold mb-4">', '</h1>'); ?>
|
||||
</header>
|
||||
|
||||
<?php if (has_post_thumbnail()): ?>
|
||||
<div class="post-thumbnail mb-5">
|
||||
<?php the_post_thumbnail('full', array('class' => 'img-fluid rounded shadow-sm')); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php if (has_post_thumbnail()): ?>
|
||||
<div class="post-thumbnail-full mb-5">
|
||||
<?php the_post_thumbnail('full', array(
|
||||
'class' => 'img-fluid rounded shadow-sm w-100',
|
||||
'style' => 'aspect-ratio: 16/9; object-fit: cover;'
|
||||
)); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="entry-content fs-5 lh-lg font-serif">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="entry-content fs-5 lh-lg font-sans text-dark">
|
||||
<?php
|
||||
the_content();
|
||||
|
||||
@@ -46,28 +49,28 @@ get_header(); ?>
|
||||
<?php the_tags('<span class="badge bg-light text-dark text-decoration-none me-2 p-2">Related: ', '</span><span class="badge bg-light text-dark text-decoration-none p-2">', '</span>'); ?>
|
||||
</div>
|
||||
</footer><!-- .entry-footer -->
|
||||
</article><!-- #post-<?php the_ID(); ?> -->
|
||||
</article><!-- #post-<?php the_ID(); ?> -->
|
||||
|
||||
<nav class="navigation post-navigation mt-5" aria-label="Posts">
|
||||
<div class="row justify-content-between g-4">
|
||||
<div class="col-sm-6 text-start">
|
||||
<?php previous_post_link('<div class="text-muted small text-uppercase fw-bold mb-1">Previous</div>%link', '%title', false, ''); ?>
|
||||
</div>
|
||||
<div class="col-sm-6 text-end">
|
||||
<?php next_post_link('<div class="text-muted small text-uppercase fw-bold mb-1">Next</div>%link', '%title', false, ''); ?>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="navigation post-navigation mt-5" aria-label="Posts">
|
||||
<div class="row justify-content-between g-4">
|
||||
<div class="col-sm-6 text-start">
|
||||
<?php previous_post_link('<div class="text-muted small text-uppercase fw-bold mb-1">Previous</div>%link', '%title', false, ''); ?>
|
||||
</div>
|
||||
<div class="col-sm-6 text-end">
|
||||
<?php next_post_link('<div class="text-muted small text-uppercase fw-bold mb-1">Next</div>%link', '%title', false, ''); ?>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<?php
|
||||
// If comments are open or we have at least one comment, load up the comment template.
|
||||
if (comments_open() || get_comments_number()):
|
||||
comments_template();
|
||||
endif;
|
||||
<?php
|
||||
// If comments are open or we have at least one comment, load up the comment template.
|
||||
if (comments_open() || get_comments_number()):
|
||||
comments_template();
|
||||
endif;
|
||||
|
||||
endwhile; // End of the loop.
|
||||
?>
|
||||
</div>
|
||||
endwhile; // End of the loop.
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</main><!-- #main -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user