adolforeyna/WFK_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix layout for single article images and style comments section

Browse Source
This commit is contained in:
Adolfo Reyna
2026-03-13 00:18:20 -04:00
parent a705a2a33e
commit 78a94fb2d2
3 changed files with 146 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
comments.php
View File

@@ -3,26 +3,26 @@
* The template for displaying comments
*/
if ( post_password_required() ) {
if (post_password_required()) {
return;
}
?>
<div id="comments" class="comments-area reading-container">
<?php if ( have_comments() ) : ?>
<?php if (have_comments()): ?>
<h2 class="comments-title">
<?php
$comment_count = get_comments_number();
if ( '1' === $comment_count ) {
if ('1' === $comment_count) {
printf(
esc_html__( 'One thought on &ldquo;%1$s&rdquo;', 'wisdom1' ),
esc_html__('One thought on &ldquo;%1$s&rdquo;', 'wisdom1'),
'<span>' . get_the_title() . '</span>'
);
} else {
printf(
esc_html( _nx( '%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $comment_count, 'comments title', 'wisdom1' ) ),
number_format_i18n( $comment_count ),
esc_html(_nx('%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $comment_count, 'comments title', 'wisdom1')),
number_format_i18n($comment_count),
'<span>' . get_the_title() . '</span>'
);
}
@@ -33,7 +33,7 @@ if ( post_password_required() ) {
<?php
wp_list_comments(
array(
'style' => 'ol',
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 60,
)
@@ -45,20 +45,22 @@ if ( post_password_required() ) {
the_comments_navigation();
// If comments are closed and there are comments, let's leave a little note, shall we?
if ( ! comments_open() ) :
if (!comments_open()):
?>
<p class="no-comments"><?php esc_html__( 'Comments are closed.', 'wisdom1' ); ?></p>
<p class="no-comments"><?php esc_html__('Comments are closed.', 'wisdom1'); ?></p>
<?php
endif;
endif; // Check for have_comments().
comment_form(
array(
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
'title_reply_after' => '</h2>',
)
$args = array(
'class_form' => 'comment-form mt-4 p-4 rounded bg-white shadow-sm border',
'class_submit' => 'btn btn-secondary fw-bold text-uppercase mt-3',
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title h3 font-serif mb-4">',
'title_reply_after' => '</h2>',
'comment_field' => '<div class="comment-form-comment mb-3"><label for="comment" class="form-label fw-bold">Your Perspective <span class="text-danger">*</span></label><textarea id="comment" name="comment" cols="45" rows="6" maxlength="65525" required="required" class="form-control bg-light"></textarea></div>',
);
comment_form($args);
?>
</div><!-- #comments -->

83
single.php
View File

@@ -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 -->

85
style.css
View File

@@ -180,3 +180,88 @@ a:hover {
justify-content: center;
border-radius: 4px;
}
/* Comments Styling overrides for native wp_list_comments */
.comment-list {
list-style: none;
padding: 0;
margin: 0 0 3rem 0;
}
.comment-list .comment {
background: #fff;
border: 1px solid rgba(26, 43, 72, 0.1);
/* Subtle midnight border */
border-radius: 0.5rem;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
.comment-list .comment-body {
display: flex;
flex-direction: column;
}
.comment-list .comment-author {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
font-weight: 600;
color: var(--brand-deep-midnight);
}
.comment-list .comment-author img {
border-radius: 50%;
}
.comment-list .comment-meta {
font-size: 0.85rem;
color: #6c757d;
margin-bottom: 1rem;
}
.comment-list .comment-meta a {
color: #6c757d;
text-decoration: none;
}
.comment-list p {
margin-bottom: 0.5rem;
}
.comment-list .reply a {
display: inline-block;
font-size: 0.85rem;
text-transform: uppercase;
font-weight: 700;
color: var(--brand-deep-teal);
border: 1px solid var(--brand-deep-teal);
padding: 0.25rem 0.75rem;
border-radius: 0.25rem;
transition: all 0.2s;
text-decoration: none;
margin-top: 1rem;
}
.comment-list .reply a:hover {
background: var(--brand-deep-teal);
color: #fff;
}
.comment-list .children {
list-style: none;
padding-left: 2rem;
margin-top: 1.5rem;
border-left: 2px solid rgba(26, 43, 72, 0.1);
}
/* Series Taxonomy Step Numbers */
.series-number-stamp {
font-family: 'Playfair Display', serif;
font-size: 4rem;
color: var(--brand-gold-leaf);
opacity: 0.2;
line-height: 1;
}