설치형 워드프레스에서 외모 (Appearance)란 사이트의 외관, 테마 등을 설정하는 메뉴인데 위젯을 통해 사이드바 메뉴를 추가하거나 변경할 수 있다.
1. List View 위젯 아이템 추가
먼저 워드프레스 대시보드 디자인 – 위젯(Widgets) 이동 후 List View를 참고하자. 예로 Right Sidebar 위젯에는 검색 메뉴와 댓글 창이 기본으로 설정되어 있는데 필요한 위치에 요소를 추가하면 된다.
List View에서 필요한 항목 이름 선택 – 위 Toggle Block Inserter 아이콘 클릭 – 필요한 요소 이름 검색 또는 아이콘을 누르면 처음 선택한 항목 아래 추가할 수 있다. (페이지 목록, 카테고리 목록 등)
혹은 위젯 설정 화면 가운데에서 필요한 위치 아래 + 버튼 클릭 후 요소를 추가해도 된다.
원하는 요소를 선택했다면 왼쪽 목록 이름 클릭 – 오른쪽 창에서 스타일을 지정할 수 있다. (가운데 화면 아래 + 네모를 눌러서 블록 추가)
폰트 스타일이나 크기, 색깔 등 원하는 방식으로 지정하면 되는데 만약 세팅 창이 안 보이면 오른쪽 상단의 아이콘을 누르면 열릴 것이다.
2. 위젯 댓글 옵션 설정
예시로 댓글 설정 창을 보면 아래와 같은 옵션이 있다. 설정은 ‘최신 댓글’ 목록을 클릭하고 오른쪽 세팅 창에서 옵션을 변경하고 저장하면 된다.
– Display avatar : 댓글 작성자의 아바타 보이기
– Display date : 댓글 작성 날짜 보이기
– Display Excerpt : 댓글 내용 보이기
– Number of comments : 화면에서 보일 댓글 갯수 (기본 상태는 5)
Display Excerpt 버튼을 활성화했더니 댓글 내용이 잘 나오는 것을 볼 수 있다.
만약 오직 ‘댓글 내용’만 보이게 하고 싶다면 관리자 화면의 Customize – Additional css 설정에서 클래스를 추가하면 된다.
* 제너레이트 프레스 테마 기준이며, 테마에 따라 경로는 조금 다를 수 있습니다.
Additional CSS를 클릭하면 테마에 따라 다양한 css 코드가 설정되어 있는데 아무 빈칸에 아래 코드를 넣으면 된다.
footer.wp-block-latest-comments__comment-meta {
display : none:
}
코드 입력을 마친 다음 전체 화면 왼쪽 위의 Publish (발행) 버튼을 클릭하면 사이트에도 적용이 된다.
다만 현재 테마에 따라 위 코드가 적용되지 않을 수 있다. 이럴 때는 직접 클래스 이름을 찾아서 {} 괄호로 닫아주고 안에 display : none;을 추가하면 되는데 방법은 어렵지 않다.
키보드에서 F12 키를 누르면 개발자도구 창이 뜨는데 먼저 화면 위에 작은 점선 화살표 아이콘을 클릭하자. (또는 Ctrl+Shift+C)
이후 화면에 마우스를 가져가면 각 구성 요소가 선택 가능해지는데 댓글 창 작성자 이름과 글 제목 영역에 마우스를 대면 위 모습을 볼 수 있다.
여기서 마우스 왼쪽 클릭 시 조금 전 개발자도구 창 가운데쯤에 자동으로 클래스 이름이 나올 것이다. 그럼 그대로 이름을 복사해서 워드프레스 css 설정 화면에 {(클래스 이름) display: none;} 형식으로 추가하면 된다.
그런데 가끔 이렇게 해도 개발자도구 창에 정확한 클래스 이름이 안 나올 때가 있다. 이럴 때는 조금 번거롭지만, 마우스를 클릭하지 않고 올려둔 상태에서 이름을 외우거나 스크린샷을 찍어서 수동 타이핑을 하면 된다.
관련 글
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
워드프레스 사이드바 스티키 고정 기능 설정 방법
GP 마케터 테마 사이드바 카테고리 목록 추가하는 방법
GeneratePress 마케터 테마 선택 이유와 설치 방법
