2장. 워드프레스 테마 세팅 방법 :: 워드프레스 세팅 첫단계인 테마는 티스토리의 스킨과 동일한 의미를 가지고 있습니다. 하지만 많은 사람들이 놓치고 있는 것이 테마 세팅에 상당한 시간을 허비한다는 점이죠.
검색을 통해 유입되는 우리의 소비자(검색한 사용자)들은 어떤 테마인지, 이게 티스토리인지, 워드프레스인지 모릅니다. 심지어 뉴스로 알고 들어오는 경우도 많습니다. 게다가, 트래픽의 약 90% 이상은 모바일에서 유입됩니다. 때문에 가독성 높은 테마를 선택하는 것을 권장하고 있습니다.
가독성 높은 테마를 선택해야하는 이유는 다음과 같습니다.
- 로딩 속도가 빠르다. (포털 사이트가 좋아한다.)
- 글쓰는데 집중 할 수 있다.
- 불필요한 비용을 줄일 수 있다.
- 자기 중심적이기 보다 사용자 중심적으로 운영 할 수 있다.
이렇게 4가지로 분류 가능한데, 일반적으로 테마를 신경쓰는 경우 대체로 자기 만족을 높이기 위해서 워드프레스 테마 세팅에 상당한 시간을 소비하게 됩니다. 하지만, 2018년부터 약 5년 동안 워드프레스 운영을 해온 입장에서 본다면, 테마 세팅은 아래처럼 유지하는 것이 좋습니다.
- 레이아웃 2단 보다는 1단으로
- H2 태그 스타일만 신경쓰기
- PC + 모바일 모두 가독성 높게 깔끔히 만들기
준비물
GeneratePress theme, GP Premium
지금까지 여러가지 워드프레스 테마를 설치해봤지만, GeneratePress 테마가 가장 사용이 많고 가독성이 좋았습니다. 물론 개인적인 의견이기 때문에 제가 추천해준 테마 외에도 마음에 드는 테마가 있다면, 해당 테마로 설치해도 무방합니다.
GP Premium 플러그인 및 라이센스는 강의 구매자에 한해서만 제공됩니다.
GeneratePress 테마 설치
워드프레스 관리자 화면으로 전환했다면, 외모 > 테마 > 테마 추가를 눌러줍니다. 이후 검색창에 GeneratePress 단어를 입력 후 위와 같은 화면의 테마를 설치 > 활성화 눌러주면 됩니다.
GP Premium 설치 및 라이센스 입력
GeneratePress 테마 설치가 완료되었다면 외모 > GeneratePress 메뉴가 생성됩니다.
이후 GP Premium 플러그인을 설치해야합니다. 물론, 기존 메뉴로도 충분히 수정 및 작업이 가능하나, 일부 기능이 막혀 있어 불편함이 있습니다.
그 이유는, GP Premium은 GeneratePress 테마의 기능을 활용하기 위해서 반드시 설치해야하는 유료 플러그인입니다. 위 라이센스 키를 입력했다면, 위 사진에 있는 것 처럼 모듈을 모두 활성화(Activate) 해줍니다.
해당 플러그인은 유료 회원들 대상으로 플러그인 + 라이센스 키를 제공드리고 있습니다.
이렇게 GeneratePress, GP Premium 설치를 완료했다면, 이제 테마 세팅을 할 수 있습니다.
레이아웃 선택 (2단)
최근 GeneratePress 사에서 매거진 타입의 테마를 출시 했습니다. GeneratePress 레이아웃은 외모 > GeneratePress > Site Library에서 확인 가능합니다. 매거진 타입의 테마를 원한다면 Info, Newsroom 테마를 설치하는 것이 좋습니다. (예시 : 파이뉴스)
일반적으로 매거진 타입은 2단 구조로 되어 있습니다. 대표적으로 위 레이아웃을 참고하면 될 것 같은데, 2단 구조는 PC에 특화되어 있습니다. (왜냐면 모바일은 2단 구조가 레이아웃 상 불가능하기 때문)
경험상 2단을 선호하는 경우 운영하는 주제의 트래픽이 PC 접근도가 높다면 2단 레이아웃을 권장하고, 그것이 아니라면 1단 레이아웃을 권장하고 있습니다.
참고로 2단 사이드바는 모바일에서 봤을 때 본문 밑에 2단 사이드바가 배치됩니다. 그래서 많은 사람들이 2단 구조로 하는 경우 매거진 타입의 콘텐츠를 운영하는 언론사 경우가 주로 해당 타입을 사용하고 있습니다.
그 이유는 다른 콘텐츠들이 본문 밑에 배치되기 때문에, 더 많은 페이지뷰를 늘릴 수 있기 때문이죠.
레이아웃 선택 (1단)
제가 가장 선호하는 레이아웃은 바로 1단입니다. 왜냐면 PC, 모바일 구조가 동일하기 때문에 깔끔한 장점이 있습니다. 2단, 1단 서로 장단점이 있기 때문에 1단을 해야한다, 2단을 해야한다 제시하기 어렵지만, 저 개인적으로는 1단을 선호합니다.
그동안 여러 데이터를 확인해봤지만, 1단이 애드센스 광고 단가가 가장 좋았기 때문이죠. 그래서 본 강의에서는 운영, 수익 고도화 설명시 적용되는 레이아웃 구조는 1단으로 진행됩니다.
레이아웃 설정 (사용자 정의하기)
기본적으로 GeneratePress 테마의 경우 2단 레이아웃이 디폴트되어 있습니다. 우린 1단으로 설정해야하기 때문에 약간의 변경 작업이 필요합니다.
본 화면에서 좌측 상단 > 사용자 정의하기 버튼을 누릅니다.
여기서 우리가 필요한 메뉴들은 사이트 아이덴티티, Layout, 메뉴 정도 입니다.
레이아웃 설정 (사용자 정의하기 > 사이트 아이덴티티)
사이트 아이덴티티는 간단하게 설명하자면, 사이트 제목, 사이트 설명, 로고, 파피콘을 설정하는 장소라고 보면 됩니다. 브랜딩을 원한다면 로고, 파피콘을 넣을 수 있지만 그것이 아니라면 패스해도 무방합니다.
레이아웃 설정 (사용자 정의하기 > Layout > Container)
다음은 레이아웃 크기를 조절 하는 Container 설정법입니다. 1단으로 할 경우 본문 가로폭이 굉장히 짧게 설정합니다. 애드센스 광고 크기에 적합하게 720 ~ 800 이하로 설장하는 편인데, 저는 790 ~ 800에 맞추는 편입니다.
- Container Width : 가로폭
- Separating Space : 제목 상단 여백
- Content Separator : 제목 하단 여백
- Content Padding : 본문 상단, 하단, 좌측, 우측 여백
긴말 필요 없이, 위 세팅값 그대로 설정해주면 됩니다.
레이아웃 설정 (사용자 정의하기 > Layout > Header)
다음은 헤더 영역입니다. 헤더 영역은 말그대로 보이게 하냐, 안보이게 하냐 그 차이입니다. 앞서 로고 설정에서 언급했듯이 브랜딩을 한다면 보이게, 내가 누군지 모르게 하고 싶다고 한다면 비영역으로 설정하면 됩니다.
만약 비영역으로 설정하고 싶다면 위 설정값 그대로 해주면 됩니다.
레이아웃 설정 (사용자 정의하기 > Layout > Primary Navigation)
콘텐츠 폭 줄이기, 헤더 영역까지 설정했다면 다음은 메뉴 설정입니다. 메뉴를 어떻게 보이게 할 것인지에 대한 설정값으로 기본값으로 두거나, 메뉴를 없애고자 한다면 위 설정값대로 해줘도 됩니다.
제가 로고, 메뉴를 없앤 가장 큰 이유는 1차적으로 경쟁자의 벤치마킹을 막고자 하는 이유이기도 합니다. 물론, 마음만 먹으면 얼마든지 벤치마킹이 가능한 부분이기도 하지만, 시각적으로 벤치마킹을 하지 못하게 막는 경우도 있습니다. 하지만 다 알 수 있는 방법들이 존재해 이러한 작업들은 무의미하다는 것을 알려드립니다.
그래서 제가 추천해드리는 방법은 아래와 같습니다.
- 브랜딩을 한다면 로고를 제작 그게 아니라면, 귀찮으니 만들지 말자.
- 메뉴는 컨셉이 있다면 분류해서 만들어놓자.
- 숨기지 말고 당당하게 공개해라.
간단하게 말씀드리면 위에 설명해드린 설정값은 호불호에 따라 설정해주면 됩니다.
레이아웃 설정 (사용자 정의하기 > Layout > Sidebars)
다음은 사이드바 입니다. 이 메뉴는 앞서 설명드린 테마 레이아웃 2단, 1단에 대한 설정값이라 생각하면 됩니다. 우리는 1단으로만 배치를 할 것이기 때문에 사이드바 기능을 제외할 것입니다.
위 설정값대로 해주면 사이드바 노출은 되지 않습니다.
레이아웃 설정 (사용자 정의하기 > Layout > Blog > Content)
Content 메뉴는 글 목록, 글 본문을 어떻게 보여줄 것인지에 대해 설정하는 값입니다. 예를 들어 본문 내 특성이미지(대표 섬네일) 노출을 안하게 한다면 Featured images 메뉴에서 이미지 항목을 체크해제 하면 해결 됩니다.
그 외에 기능들은 아래를 참고 바랍니다.
Archives 메뉴
Display read more as button : 더 읽기(read more) 버튼 활성화/비활성화
Display post date : 포스트 날짜 활성화/비활성화
Display post author : 작성자 활성화/비활성화
Display post categories : 카테고리 활성화/비활성화
Display post tags : 태그 활성화/비활성화
Display comment count : 댓글수 활성화/비활성화
Use infinite scroll : 스크롤시 페이지가 보이는 기능(인피니티 스크롤) 활성화/비활성화
여기까지 세팅했다면 비로소 테마 설정은 완료라고 볼 수 있습니다. 어떻게 보면 기본 세팅으로 운영해도 상관없습니다. 제일 중요한 건 모바일에서 어떻게 보여주냐 그 차이 일뿐입니다.
테마 세팅방법은 꼭 해야한다, 말아야한다 정답은 없습니다. 하지만 제가 수익화 낼 때 가장 기본으로 하는 설정법이기 때문에 하셔도 좋다는 의미로 해당 파트 강의를 적어두었습니다.