블로그 사이드바에 댓글 메뉴를 추가하면, 댓글을 남긴 방문자는 답글을 쉽게 찾을 수 있다. 단기간에 많은 댓글이 달린다면 (일일이 승인하지만) 순식간에 글이 뒤로 밀리겠지만, 그런 일이 많지는 않을 테니 댓글 메뉴를 추가하는 것도 좋다.
아래는 사이드바 댓글 추가부터 글자 영역 조절 방법을 정리하였다. 이 블로그 적용 테마는 GeneratePress인데 워드프레스 적용 테마에 따라 설정 경로 등에 차이는 있을 수 있는 점 참고하자.
블로그에는 대시보드 – Appearance – Elements에 우측 사이드바를 이미 만든 상황이었다. 그래서 댓글이 들어갈 곳에 Paragraph를 넣고, 위의 아무 Container를 복사해서 제목과 내용만 바꾸면 편하다.
GP 마케터 테마 사이드바 카테고리 목록 추가하는 방법
이때 전체 화면 오른쪽 블록 탭 메뉴를 보면 아래 메뉴를 통해 댓글 스타일을 설정하면 된다.
Display avatar
Display date
Display excerpt
Number of Comments
Save 버튼을 누르고 Appearance – Customize 화면으로 오면 댓글 적용 상태를 볼 수 있다. 그런데 글쓴이와 제목, 글자 영역 간격이 너무 넓어서 자리도 차지하고 보기에도 별로 좋지 않다.
방법은 먼저 F12 키를 눌러 개발자 도구 창을 열고 위쪽 화살표 아이콘을 선택해서 제목과 글자 영역을 검사해 보자. 이후 도구 창 가운데 보이는 .wp-block-latest… 클래스 이름을 복사해서 css 입력 창에 넣고 원하는 설정 값을 넣으면 된다.
* 이미지 왼쪽 댓글 영역이 P라고 뜨는 모습인데 이 이름으로 설정하면 블로그 전체 P 요소에 적용되니 꼭 개발자 도구 창에 나오는 이름을 입력해야 한다.
1 2 3 4 5 6 7 8 9 10 | .wp-block-latest-comments__comment-meta{ line-height: 1.8; } .wp-block-latest-comments__comment-excerpt p { line-height: 1.8; margin-bottom: 0; } ol.wp-block-latest-comments { margin-bottom: 0px; } | cs |
이 블로그에는 line-height를 사용해서 글쓴이/제목 영역과 댓글 영역의 글 높이를 수정하였다.
.wp-block-latest-comments__comment-meta : 글쓴이/글 제목
.wp-block-latest-comments__comment-excerpt p : 댓글
ol.wp-block-latest-comments : 댓글 전체 영역
CSS 저장을 마친 결과, 위처럼 글자 간격이 보기 좋게 변한 것을 볼 수 있다.
만약 글자끼리의 간격을 바꾸려면 letter-spacing을 쓰고 단어 간격을 조정하려면 word-spacing을 추가해서 둘 다 원하는 숫자에 px 같은 단위를 붙이면 적용된다.
워드프레스 마스터 가이드
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
GeneratePress 마케터 테마 선택 이유와 설치 방법
