Add comments template
This commit is contained in:
8
css/avatar.css
Normal file
8
css/avatar.css
Normal file
@@ -0,0 +1,8 @@
|
||||
.avatar {
|
||||
border-radius: 5px;
|
||||
transition: filter var(--transition-md) ease-out;
|
||||
}
|
||||
|
||||
.avatar:hover {
|
||||
filter: saturate(1.3) contrast(1.3);
|
||||
}
|
||||
64
css/comment.css
Normal file
64
css/comment.css
Normal file
@@ -0,0 +1,64 @@
|
||||
.comment__head {
|
||||
display: flex;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.comment__avatar {
|
||||
background-image: var(--windy-svg);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
margin-right: var(--space-sm);
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.comment__metadata {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
margin: var(--space-xs) 0;
|
||||
}
|
||||
|
||||
.comment__date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.comment__body {
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.comment__reply:focus,
|
||||
.comment__reply:hover {
|
||||
color: var(--color-light-blue);
|
||||
}
|
||||
|
||||
.comment__reply-icon {
|
||||
display: inline-block;
|
||||
margin-right: var(--space-xs);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.comment__reply-text {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.comment__reply-text:after {
|
||||
background-color: var(--color-light-blue);
|
||||
bottom: -1px;
|
||||
content: '';
|
||||
left: 0;
|
||||
height: 2px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transition: opacity var(--transition-md) ease-out;
|
||||
}
|
||||
|
||||
.comment__reply:focus .comment__reply-text:after,
|
||||
.comment__reply:hover .comment__reply-text:after {
|
||||
opacity: 1;
|
||||
}
|
||||
20
css/comments.css
Normal file
20
css/comments.css
Normal file
@@ -0,0 +1,20 @@
|
||||
.comments__head {
|
||||
border-bottom: 1px solid var(--color-light-grey);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.comments__title {
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
.comments__item {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.comments__item--depth-1 {
|
||||
margin-left: var(--space-md);
|
||||
}
|
||||
|
||||
.comments__item--depth-2 {
|
||||
margin-left: calc(var(--space-md) * 2);
|
||||
}
|
||||
@@ -4,6 +4,11 @@
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.icon--extra-small {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.icon--small {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
|
||||
@@ -10,6 +10,9 @@
|
||||
@import "search";
|
||||
@import "article";
|
||||
@import "footer";
|
||||
@import "comments";
|
||||
@import "comment";
|
||||
@import "avatar";
|
||||
|
||||
:root {
|
||||
--color-black: #000;
|
||||
@@ -21,6 +24,7 @@
|
||||
--color-facebook: #3e5a98;
|
||||
--color-twitter: #1da1f2;
|
||||
--color-rss: #ee802f;
|
||||
--space-xs: 10px;
|
||||
--space-sm: 20px;
|
||||
--space-md: 30px;
|
||||
--space-lg: 60px;
|
||||
|
||||
34
theme/comments.php
Normal file
34
theme/comments.php
Normal file
@@ -0,0 +1,34 @@
|
||||
<div class="comments" id="comments">
|
||||
<div class="comments__head">
|
||||
<h2 class="comments__title">
|
||||
<?php
|
||||
if (comments_open()) :
|
||||
if (have_comments()) :
|
||||
echo 'Join the conversation';
|
||||
else:
|
||||
echo 'Leave a comment';
|
||||
endif;
|
||||
else:
|
||||
echo 'Comments are closed';
|
||||
endif;
|
||||
?>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="comments__body">
|
||||
<ol class="comments__list">
|
||||
<?php
|
||||
wp_list_comments(
|
||||
array(
|
||||
'walker' => new Windycoys_Walker_Comment(),
|
||||
'style' => 'ol',
|
||||
)
|
||||
);
|
||||
?>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="comments__foot">
|
||||
<?php comment_form(array(
|
||||
'class_form' => 'foo-bar'
|
||||
)) ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,6 +1,33 @@
|
||||
<?php
|
||||
|
||||
class Windycoys_Walker extends Walker_Nav_Menu {
|
||||
class Windycoys_Walker_Comment extends Walker_Comment {
|
||||
function start_el(&$output, $comment, $depth = 0, $args = array(), $id = 0) {
|
||||
$id = $comment->comment_ID;
|
||||
$author_email = $comment->comment_author_email;
|
||||
$author = $comment->comment_author;
|
||||
$avatar = get_avatar($comment, 128);
|
||||
$date = get_comment_date('jS F, Y', $id).' at '.get_comment_date('H:i', $id);
|
||||
$content = $comment->comment_content;
|
||||
$comment_depth = $depth > 0 ? ' comments__item--depth-'.$depth : '';
|
||||
$output .= '<li class="comments__item'.$comment_depth.'">';
|
||||
$output .= '<div class="comment">';
|
||||
$output .= '<div class="comment__head">';
|
||||
$output .= '<div class="comment__avatar">'.$avatar.'</div>';
|
||||
$output .= '<div class="comment__metadata">';
|
||||
$output .= '<span class="comment__author">'.$author.'</span>';
|
||||
$output .= '<span class="comment__date">'.$date.'</span>';
|
||||
$output .= '</div></div>';
|
||||
$output .= '<div class="comment__body">'.$content.'</div>';
|
||||
$output .= '<div class="comment__foot">';
|
||||
$output .= '<a class="comment__reply" href="'.get_comment_reply_link().'">';
|
||||
$output .= '<span class="comment__reply-icon">';
|
||||
$output .= '<svg class="icon icon--extra-small"><use href="#icon-reply"></use></svg></span>';
|
||||
$output .= '<span class="comment__reply-text">Reply</span></a>';
|
||||
$output .= '</div></div></li>';
|
||||
}
|
||||
}
|
||||
|
||||
class Windycoys_Walker_Nav extends Walker_Nav_Menu {
|
||||
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
|
||||
$title = $item->post_title;
|
||||
$uri = get_site_url() . '/' . $item->post_name;
|
||||
@@ -15,7 +42,7 @@ function windycoys_nav() {
|
||||
wp_nav_menu(array(
|
||||
'container' => 'ul',
|
||||
'menu_class' => 'nav__list nav__list--sub-list',
|
||||
'walker' => new Windycoys_Walker()
|
||||
'walker' => new Windycoys_Walker_Nav()
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
@@ -14,6 +14,9 @@
|
||||
<symbol id="icon-hash" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-reply" viewBox="0 0 576 512">
|
||||
<path fill="currentColor" d="M11.093 251.65l175.998 184C211.81 461.494 256 444.239 256 408v-87.84c154.425 1.812 219.063 16.728 181.19 151.091-8.341 29.518 25.447 52.232 49.68 34.51C520.16 481.421 576 426.17 576 331.19c0-171.087-154.548-201.035-320-203.02V40.016c0-36.27-44.216-53.466-68.91-27.65L11.093 196.35c-14.791 15.47-14.791 39.83 0 55.3zm23.127-33.18l176-184C215.149 29.31 224 32.738 224 40v120c157.114 0 320 11.18 320 171.19 0 74.4-40 122.17-76.02 148.51C519.313 297.707 395.396 288 224 288v120c0 7.26-8.847 10.69-13.78 5.53l-176-184a7.978 7.978 0 0 1 0-11.06z"></path>
|
||||
</symbol>
|
||||
<symbol id="icon-rss" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"></path>
|
||||
</symbol>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 6.2 KiB |
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="metadata__comments">
|
||||
<a class="metadata__comments-link" href="<?php the_permalink() ?>">
|
||||
<a class="metadata__comments-link" href="<?php the_permalink() ?>#comments">
|
||||
<svg class="icon">
|
||||
<use href="#icon-comments"></use>
|
||||
</svg>
|
||||
|
||||
@@ -15,13 +15,14 @@
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="article__title">
|
||||
<a href="<?php the_permalink(); ?>">
|
||||
<?php the_title(); ?>
|
||||
</a>
|
||||
<?php the_title(); ?>
|
||||
</h1>
|
||||
<div class="article__content">
|
||||
<?php the_content(__('Continue reading <span class="meta-nav">»</span>', 'windycoys')); ?>
|
||||
</div>
|
||||
<div class="article__comments">
|
||||
<?php comments_template() ?>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="page__metadata is-first">
|
||||
|
||||
Reference in New Issue
Block a user