WP 파일 | Comments.php | 댓글 생성하기
정라잇 |
요약
댓글 기능을 생성합니다. 세가지 파일 설정이 완성되어야
정상적인 워드프레스 댓글기능을 사용할 수 있습니다.
- 공식 테마인 twentythirteen 파일을 참고했습니다.
설정법
single.php
if ( comments_open() || get_comments_number() ) {
comments_template();
}노출이 필요한 위치에 해당 코드를 추가합니다.
functions.php
function style_sheet_default()
{
wp_enqueue_script( 'comment-reply' );
}
add_action('wp_enqueue_scripts', 'style_sheet_default');functions.php 파일에 해당 코드를 추가합니다.
해당 코드가 없을 경우 답글의 기능이 적용되지 않습니다.
comments.php
<?php
if ( post_password_required() )
return;
?>
<div id="comments" class="comments-area">
<h2> 댓글 </h2>
<?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
printf( _nx( 'One thought on "%2$s"', '%1$s thoughts on "%2$s"', get_comments_number(), 'comments title', 'twentythirteen' ),
number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
?>
</h2>
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 74,
) );
?>
</ol><!-- .comment-list -->
<?php
// Are there comments to navigate through?
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
?>
<nav class="navigation comment-navigation" role="navigation">
<h1 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'twentythirteen' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'twentythirteen' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'twentythirteen' ) ); ?></div>
</nav><!-- .comment-navigation -->
<?php endif; // Check for comment navigation ?>
<?php if ( ! comments_open() && get_comments_number() ) : ?>
<p class="no-comments"><?php _e( 'Comments are closed.' , 'twentythirteen' ); ?></p>
<?php endif; ?>
<?php endif; // have_comments() ?>
<?php $comments_args = array(
// Change the title of send button
'label_submit' => __( 'Send', 'textdomain' ),
// Change the title of the reply section
'title_reply' => __( 'Write a Reply or Comment', 'textdomain' ),
// Remove "Text or HTML to be displayed after the set of comment fields".
'comment_notes_after' => '',
// Redefine your own textarea (the comment body).
'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br /><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
);
comment_form( $comments_args ); ?>
</div><!-- #comments -->댓글 파일 comments.php 를 만듭니다.
해당 코드가 있어야 적용할 수 있습니다.
자료
functions.php
if ( ! class_exists( 'TwentyTwenty_Walker_Comment' ) ) {
/**
* CUSTOM COMMENT WALKER
* A custom walker for comments, based on the walker in Twenty Nineteen.
*
* @since Twenty Twenty 1.0
*/
class TwentyTwenty_Walker_Comment extends Walker_Comment {
protected function html5_comment( $comment, $depth, $args ) {
$tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
$commenter = wp_get_current_commenter();
$show_pending_links = ! empty( $commenter['comment_author'] );
if ( $commenter['comment_author_email'] ) {
$moderation_note = __( 'Your comment is awaiting moderation.' );
} else {
$moderation_note = __( 'Your comment is awaiting moderation. This is a preview; your comment will be visible after it has been approved.' );
}
?>
<<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>>
<article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<?php
if ( 0 != $args['avatar_size'] ) {
echo get_avatar( $comment, $args['avatar_size'] );
}
?>
<?php
$comment_author = get_comment_author_link( $comment );
if ( '0' == $comment->comment_approved && ! $show_pending_links ) {
$comment_author = get_comment_author( $comment );
}
printf(
/* translators: %s: Comment author link. */
// __( '%s <span class="says">댓글:</span>' ),
sprintf( '<b class="fn">%s</b>', $comment_author )
);
?>
</div><!-- .comment-author -->
<div class="comment-metadata">
<?php
printf(
'<div class="comment-date"><time datetime="%s">%s</time></div>',
esc_url( get_comment_link( $comment, $args ) ),
format_date(get_comment_time('U')) ,
sprintf(
/* translators: 1: Comment date, 2: Comment time. */
__( '%1$s at %2$s' ),
get_comment_date( '', $comment ),
get_comment_time()
)
);
edit_comment_link( __( 'Edit' ), ' <span class="edit-link">', '</span>' );
?>
</div><!-- .comment-metadata -->
<?php if ( '0' == $comment->comment_approved ) : ?>
<em class="comment-awaiting-moderation"><?php echo $moderation_note; ?></em>
<?php endif; ?>
</footer><!-- .comment-meta -->
<div class="comment-content">
<?php comment_text(); ?>
</div><!-- .comment-content -->
<?php
if ( '1' == $comment->comment_approved || $show_pending_links ) {
comment_reply_link(
array_merge(
$args,
array(
'add_below' => 'div-comment',
'depth' => $depth,
'max_depth' => $args['max_depth'],
'before' => '<div class="reply">',
'after' => '</div>',
)
)
);
}
?>
</article><!-- .comment-body -->
<?php
}
}
}
comments.php
<?php
/**
* The template for displaying Comments.
*
* The area of the page that contains comments and the comment form.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
/*
* If the current post is protected by a password and the visitor has not yet
* entered the password we will return early without loading the comments.
*/
if ( post_password_required() )
return;
?>
<div id="comments" class="comments-area">
<?php
function format_date( $time )
{
$time_difference = time() -$time + 32400;
if( $time_difference < 1 ) { return '방금 전'; }
$condition = array( 12 * 30 * 24 * 60 * 60 => '년',
30 * 24 * 60 * 60 => '달',
24 * 60 * 60 => '일',
60 * 60 => '시간',
60 => '분',
1 => '초'
);
foreach( $condition as $secs => $str )
{
$d = $time_difference / $secs;
if( $d >= 1 )
{
$t = round( $d );
return $t . '' . $str . ( $t > 1 ? '' : '' ) . '전';
}
}
}
?>
<?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
printf( _nx( '댓글(1)', '댓글(%1$s)', get_comments_number(), 'comments title', 'twentythirteen' ),
number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
?>
</h2>
<ol class="comment-list">
<?php
wp_list_comments( array(
'walker' => new TwentyTwenty_Walker_Comment(),
'style' => 'li',
'short_ping' => true,
'avatar_size' => 0,
) );
?>
</ol><!-- .comment-list -->
<?php
// Are there comments to navigate through?
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
?>
<nav class="navigation comment-navigation" role="navigation">
<h1 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'rdg_theme' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'rdg_theme' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'rdg_theme' ) ); ?></div>
</nav><!-- .comment-navigation -->
<?php endif; // Check for comment navigation ?>
<?php if ( ! comments_open() && get_comments_number() ) : ?>
<p class="no-comments"><?php _e( 'Comments are closed.' , 'rdg_theme' ); ?></p>
<?php endif; ?>
<?php endif; // have_comments() ?>
<?php $comments_args = array(
// Change the title of send button
'label_submit' => __( '댓글 달기', 'textdomain' ),
// Change the title of the reply section
'title_reply' => false,
// Remove "Text or HTML to be displayed after the set of comment fields".
'comment_notes_after' => '',
// Redefine your own textarea (the comment body).
'comment_field' => '<p class="comment-form-comment"><label for="comment">' . '</label><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
); ?>
<div class="comment-divider"></div>
<?php comment_form( $comments_args ); ?>
</div><!-- #comments -->위의 자료가 전문입니다.
함수를 통해
<?php
function format_date( $time )
{
$time_difference = time() -$time + 32400;
if( $time_difference < 1 ) { return '방금 전'; }
$condition = array( 12 * 30 * 24 * 60 * 60 => '년',
30 * 24 * 60 * 60 => '달',
24 * 60 * 60 => '일',
60 * 60 => '시간',
60 => '분',
1 => '초'
);
foreach( $condition as $secs => $str )
{
$d = $time_difference / $secs;
if( $d >= 1 )
{
$t = round( $d );
return $t . '' . $str . ( $t > 1 ? '' : '' ) . '전';
}
}
}
?><ol class="comment-list">
<?php
wp_list_comments( array(
'walker' => new TwentyTwenty_Walker_Comment(),
'style' => 'li',
'short_ping' => true,
'avatar_size' => 0,
) );
?>
</ol><!-- .comment-list -->CSS 파일
/* 댓글 */
.logged-in-as {
display:none;
}
.comment-author img {
border-radius: 300px;
}
.comment-metadata p , .comment-content p {
margin-block-end: 0px;
}
.comment-date {
color: #000 !important;
}
.comment-form-comment {
margin-block-end: 0px !important;
}
.form-submit {
text-align: right;
}
/* inline */
.vcard , .comment-metadata {
display: inline;
}
.vcard a{
font-size: 17px;
color: #000 !important;
font-weight: 700;
text-decoration: none;
text-decoration-color: #0275d8;
}
.comment-metadata {
padding-left: 5px;
}
.comment-metadata time {
color: rgb(133, 133, 133);
}
textarea {
height: 110px;
border-radius: 5px;
border: 1px solid #d3d3d3;
width: 100%;
padding: 5px 10px;
}
textarea:focus {
outline-color: #a9ccff;
}
#cancel-comment-reply-link {
padding-left: 5px;
}
.comment-date {
display: inline;
font-weight: 400;
}
.comment-body {
padding-top: 20px;
padding-bottom: 5px;
}
.form-submit {
padding-top: 10px;
}
[type=submit]:not(:disabled), button:not(:disabled) {
cursor: pointer;
border: 0px;
border-radius:5px;
padding: 6px 20px 5px;
border: 1px solid #ffffff;
transition: all 0.2s linear;
width: 100%;
color: #000;
background-color: #ffcb2d;
}
[type=submit]:not(:disabled):hover, button:not(:disabled):hover{
color: rgb(31, 31, 31) !important;
border:1px solid rgb(59, 126, 189) !important;
}
#reply-title {
padding: 27px 0 0;
line-height: 1;
}
.reply {
width:50px;
border:1px solid rgb(168, 168, 168);
padding: 4px 10px 2px;
text-align: center;
border-radius: 4px;
transition: all 0.2s linear;
}
.reply:hover {
color: rgb(59, 126, 189) !important;
border:1px solid rgb(59, 126, 189) !important;
}
.reply:hover a {
/* color: rgb(59, 126, 189) !important; */
}
li{
list-style:none;
}
.comment-content p {
padding-top: 5px;
padding-bottom: 10px;
}
.reply a {
color: #000 !important;
font-weight: 700;
text-decoration: none;
text-decoration-color: #0275d8;
}
.required:after {
content: "";
position: relative;
font-size: inherit;
color: #f1416c;
padding-left: .25rem;
font-weight: 700;
}
/* */
.comment-form-author label, .comment-form-email label, .comment-form-url label {
/* display:none; */
/* width: 30%; */
padding-left: 13px;
}
.comment-form-url input, .comment-form-url label {
display: none;
}
.comment-form-author input {
/* display:none; */
border:1px solid rgb(202, 202, 202);
width: 16%;
border-radius: 5px;
padding-left:7px;
}
.comment-form-email input {
border:1px solid rgb(202, 202, 202);
width: 26%;
border-radius: 5px;
padding-left:7px;
}
.comment-form-author{
width: 60px;
display: inline;
width: 30%;
}
.comment-form-email{
width: 60px;
display: inline;
width: 30%;
}
.comment-form-url{
width: 60px;
display: inline;
width: 30%;
}
.comment-form-cookies-consent {
padding-left: 7px;
padding-top: 7px;
display: inline;
}
.comment-notes {
margin-block-start: 0em;
margin-block-end: 10px !important;
}
@media only screen and (max-width: 767px) {
.comment-form-author input {
/* display:none; */
border:1px solid rgb(202, 202, 202);
width: 35%;
border-radius: 5px;
}
.comment-form-email input {
border:1px solid rgb(202, 202, 202);
width: 35%;
border-radius: 5px;
}
.comment-form-cookies-consent {
padding-left: 7px;
padding-top: 10px;
display: block;
}
}
.comment-reply-title:before {
content: "" !important;
}
.comment-divider {
padding-top: 10px;
border-bottom: 1px solid rgb(233, 233, 233);
margin-bottom: 10px;
}
.form-submit {
margin-block-end: 70px !important;
}