GeneratePress 테마의 Element 기능을 활용하면 사이드바에 카테고리 목록을 쉽게 추가할 수 있다. 만약 기본 디자인이 부족하다고 느낀다면 설정이 조금 필요한데, 카테고리를 만든 Element 기능에는 한계가 있다 보니 CSS 코드를 추가해서 해결해야 한다.
GP 테마는 대시보드 – Appearance – Customize – Additional CSS를 열고, 다른 워드프레스 테마도 경로에 맞게 CSS 입력 란을 열면 된다.
Element로 추가한 카테고리는 글자가 작고 간격도 좁은 데다 이름 왼쪽에 목록 점이 표시되어 있다. 전체 카테고리 영역도 많이 남는 모습인데 아래 코드를 추가해 보자. (복사 가능한 전체 코드는 본문 글 맨 아래 있습니다)
우선 크롬 창에서 개발자 도구를 열고 카테고리 전체 목록을 검사해서 클래스 이름을 확인해야 한다. (위의 빨간 줄 .gb-container-3491ac98) 이 곳에 자신의 카테고리 클래스 이름을 넣고 위 코드를 CSS 란에 넣으면 된다.
– margin-left : 카테고리 박스 왼쪽 간격
– line-height : 글자 수직 간격
– list-style : 목록 점 가림
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
코드 적용 결과, 글자 크기와 간격이 안정적으로 변하였다. 이대로 작업을 마쳐도 되겠지만, 카테고리 사이에 밑줄과 화살표 아이콘을 추가해 보았다.
위에서 빨간 줄 카테고리 이름 없이 li, ul li…로 작성해도 블로그에 적용은 가능하다. 하지만 만약 상단 카테고리를 설정했다면 같이 적용될 수 있으니, 꼭 카테고리 클래스 이름을 넣어야 한다.
코드를 적용하면 위처럼 깔끔한 밑줄과 화살표를 추가할 수 있다. 아래 전체 코드를 복사해서 CSS에 넣은 뒤 취향대로 설정해서 저장을 마치면 적용이 완료된다.
위 코드에서 (Class Name) 전체를 지우고 자신의 클래스 이름을 넣으면 적용 가능하다.
그 외 카테고리 박스 간격은 CSS에 클래스 이름을 넣으면 설정할 수 있는데 번거롭다면 카테고리를 추가한 Element 페이지 설정 창에서 진행하면 된다. 또한 Element 페이지에 가면 카테고리 옆 숫자도 감출 수 있는 점 참고하자. (아래 사이드바 카테고리 목록 추가 관련 글)
관련 글
GP 마케터 테마 사이드바 카테고리 목록 추가하는 방법
워드프레스 사이드바 글 제목 줄 바꿈 스타일 조절 방법
GeneratePress 마케터 테마 선택 이유와 설치 방법
