워드프레스 GeneratePress 테마: 댓글 폼을 댓글 목록 위로 이동하기

GeneratePress 테마에서는 다른 워드프레스 테마와 비슷하게 댓글 폼이 댓글 목록 아래에 위치해있습니다. 댓글 템플릿 파일을 수정하여 댓글 목록 위로 댓글 작성 폼을 이동시킬 수 있습니다.

워드프레스 GeneratePress 테마: 댓글 폼을 댓글 목록 위로 이동하기

GeneratePerss 테마의 댓글 섹션은 그대로 사용하기에는 조금 이질감이 느껴질 것 같습니다. 아무런 커스텀을 하지 않으면 다음 그림과 비슷하게 댓글이 표시됩니다.

약간의 커스텀을 통해 댓글 섹션을 개선할 수 있습니다.

기본적으로 comments.php 파일을 통해 댓글 섹션을 변경할 수 있습니다. 그리고 CSS를 사용하여 글자 크기, 배경식 등을 조정할 수 있습니다.

댓글 폼을 댓글 리스트 위로 이동시키려면, 차일드 테마를 만들고, 부모 테마 폴더 아래의 comments.php 파일을 차일드 테마 폴더로 이동시킵니다. 다음과 같은 순서로 진행하면 됩니다.

1) FTP에 접속한 후에 /wp-content/themes/generatepress 폴더 아래의 comments.php 파일을 PC로 다운로드합니다.

FTP를 통해 generatepress 폴더 아래의 comments.php 파일을 PC로 다우로드함.

2) PC로 다운로드한 comments.php 파일을 차일드 테마 폴더(예: /wp-content/themes/generatepress-child)로 업로드합니다.

comments.php 파일을 차일드 테마 폴더(예: generatepres-child)로 업로드함.

3) 업로드한 파일을 선택하고 마우스 오른쪽 버튼을 클릭한 다음 보기/편집을 클릭합니다(FileZilla 사용 시). 그러면 텍스트 편집기에서 comments.php 파일이 열립니다.

comments.php 파일을 텍스트 편집기에서 열었다면 comments.php 파일의 내용을 다음 텍스트로 대체합니다.

<?php
/**
 * The template for displaying Comments.
 *
 * The area of the page that contains both current comments
 * and the comment form. The actual display of comments is
 * handled by a callback to generate_comment() which is
 * located in the inc/template-tags.php file.
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/*
 * 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;
}

/**
 * generate_before_comments hook.
 *
 * @since 0.1
 */
do_action( 'generate_before_comments' );
?>
<div id="comments">

	<?php
	/**
	 * generate_inside_comments hook.
	 *
	 * @since 1.3.47
	 */
	do_action( 'generate_inside_comments' );
	
	comment_form();

	if ( have_comments() ) : ?>
		<h3 class="comments-title">
			<?php
			$comments_number = get_comments_number();
			$comments_title = apply_filters( 'generate_comment_form_title', sprintf( // WPCS: XSS OK.
				/* translators: 1: number of comments, 2: post title */
				esc_html( _nx(
					'%1$s thought on &ldquo;%2$s&rdquo;',
					'%1$s thoughts on &ldquo;%2$s&rdquo;',
					$comments_number,
					'comments title',
					'generatepress'
				) ),
				number_format_i18n( $comments_number ),
				get_the_title()
			) );

			echo esc_html( $comments_title );
			?>
		</h3>

		<?php
		/**
		 * generate_below_comments_title hook.
		 *
		 * @since 0.1
		 */
		do_action( 'generate_below_comments_title' );

		if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
			<nav id="comment-nav-above" class="comment-navigation" role="navigation">
				<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'generatepress' ); ?></h2>
				<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'generatepress' ) ); ?></div>
				<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'generatepress' ) ); ?></div>
			</nav><!-- #comment-nav-above -->
		<?php endif; ?>

		<ol class="comment-list">
			<?php
			/*
			 * Loop through and list the comments. Tell wp_list_comments()
			 * to use generate_comment() to format the comments.
			 * If you want to override this in a child theme, then you can
			 * define generate_comment() and that will be used instead.
			 * See generate_comment() in inc/template-tags.php for more.
			 */
			wp_list_comments( array(
				'callback' => 'generate_comment',
			) );
			?>
		</ol><!-- .comment-list -->

		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
			<nav id="comment-nav-below" class="comment-navigation" role="navigation">
				<h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'generatepress' ); ?></h2>
				<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'generatepress' ) ); ?></div>
				<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'generatepress' ) ); ?></div>
			</nav><!-- #comment-nav-below -->
		<?php endif;

	endif;

	// If comments are closed and there are comments, let's leave a little note, shall we?
	if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>
		<p class="no-comments"><?php _e( 'Comments are closed.', 'generatepress' ); // WPCS: XSS OK. ?></p>
	<?php endif;


	?>

</div><!-- #comments -->
1 && get_option( 'page_comments' ) ) : ?>
'generate_comment', ) ); ?>
1 && get_option( 'page_comments' ) ) : ?>
 Eng



1 && get_option ( 'page_comments')) :?>
'generate_comment', )); ?> 1 && get_option ( 'page_comments')) :?>

댓글 작성 양식을 댓글 리스트 위에 위치시키고 싶을 때 위와 같이 수정할 수 있습니다.

위의 작업을 하려면 FTP에 접속하여 작업할 수 있어야 합니다. 블루호스트를 사용하는 경우 FTP 계정을 생성할 수 있습니다.

블루호스트(Bluehost)에서 FTP 계정 만들기 (새로운 cPanel 인터페이스)

FTP 접속 정보를 모르는 경우 서버 담당자나 웹호스팅 업체에 문의하시기 바랍니다. FTP 사용법은 다음 글을 참고해보세요.

[워드프레스] FTP 사용하기 - 워드프레스 기본

댓글 작성자 이름 필드와 이메일 필드를 한 라인에 표시하기

다른 테마에서도 비슷한 방식으로 댓글 폼을 커스텀할 수 있습니다. 댓글 폼에서 이름 필드와 이메일 필드가 한 라인에 표시되도록 하고 싶은 경우에는 다음과 같은 CSS 코드를 사용할 수 있습니다.

@media (min-width: 769px) {
    .comment-form #author, 
    .comment-form #email {
        width: 48%;
        float: left;
    }

    .comment-form #email {
        float: right;
    }

    .comment-form #url {
        width: 100%;
    }
}

위의 코드를 워드프레스 대시보드 > 테마 디자인 > 사용자 정의하기 > 추가 CSS에 추가하도록 합니다. 위의 CSS 코드를 추가하면 화면 해상도가 769px 이상인 기기에서 댓글 작성자 필드와 이메일 필드가 같은 라인에 표시됩니다.

인기 뉴스, 매거진, 블로그 테마인 뉴스페이퍼 (Newspaper)를 사용하면 레이아웃을 크게 수정할 필요가 없지만, GeneratePress 테마를 사용할 경우 CSS 등을 사용하여 레이아웃을 비교적 자유롭게 수정할 수 있습니다. 커스텀하여 사용하고 싶은 경우 좋은 테마 같습니다.

참고

워드프레스 플랫섬 테마 (Flatsome Theme) 계정 옵션 설정

블로그 리뉴얼: GeneratePress 테마로 변경 - 워드프레스 기본