본문 바로가기

워드프레스

워드프레스 테마 가이드 (선택부터 설정까지)

워드프레스 테마 가이드

워드프레스를 설치한 이후에 가장 많은 선택의 시간을 소요하는 워드프레스 테마 선택부터 설정까지 워드프레스 테마 가이드를 정리한다. 워드프레스 테마는 워드프레스 꾸미기 단계에서 어떤 서버(호스팅)로 워드프레스를 설치했는가와 무관하게 모든 워드프레스에서 동일한 화면에서 진행하는 워드프레스 꾸미기 필수 과정이다.

워드프레스 테마 선택부터 설정까지

우선, 해당 워드프레스 테마 설치 단계까지 왔다면 기본적으로 워드프레스는 설치된 상태여야 한다. 앞선 포스팅에서도 여러 번 언급했지만, 처음 워드프레스를 설치하면 해당 호스팅 업체마다 워드프레스가 다르다고 오해할 수 있다. 하지만 워드프레스 설치 과정까지만 서버(호스팅) 업체에 따라 다를 뿐, 워드프레스가 설치된 이후에는 워드프레스 꾸미기 단계이므로 모든 워드프레스에서 테마 설치부터 설정 그리고 사용 방법이 동일하다. 다음에서 애드센스용 워드프레스를 기준으로 어떤 테마를 선택해서 설치하고 기본적인 설정은 어떻게 하는지를 살펴본다.

 

 

 

 

워드프레스 테마 선택하기

우선 워드프레스 관리자 페이지로 접속한다. 기본적으로 자신이 만든 워드프레스 도메인명 뒤에 슬레쉬와 함께 wp-admin을 브라우저의 URL 주소에 기재한다.

 

워드프레스 관리자 페이지

 

그러면 워드프레스 로그인 팝업이 나오는데, 여기에 사전에 설정한 사용자명과 비밀번호를 입력해서 접속하면 된다. 해당 방법은 모든 워드프레스에서 동일하다.

 

워드프레스 관리자 페이지 살펴보기 1
워드프레스 관리자 페이지 살펴보기 2

 

만약 사용자명과 비밀번호가 기억나지 않는다면 서버를 구매한 호스팅사에서 제공하는 워드프레스 관리 프로그램을 활용해서 해당 워드프레스 관리자 페이지로 연결할 수 있다. 필자는 VULTR에서 서버를 구매했으므로 VULTR에서 무료로 제공하는 plesk라는 워드프레스 관리 프로그램을 사용해서 plesk 웹사이트에 접속한 후에 워드프레스 관리자 페이지로 이동할 수도 있다.

 

워드프레스 테마 선택 1

 

워드프레스 관리자 페이지에 접속했다면 왼쪽 메뉴에서 외모를 누르면 세부 메뉴가 펼쳐지는데 여기에서 테마를 눌러서 원하는 워드프레스 테마를 설치할 수 있다.

 

워드프레스 테마 선택 2

 

이후 전환한 페이지에서 상단에 있는 새로운 테마 추가 버튼을 누르면, 워드프레스 테마를 인기 또는 최근순으로 볼 수 있다. 워드프레스 테마는 무료로 사용이 가능한 무료 테마와 유료 테마가 있는데, 대부분 무료 테마도 고급 기능을 사용하려면 유료로 업데이트를 해야 한다. 하지만 애드센스용 워드프레스라면 업데이트 없이 무료 테마에서 제공하는 기본 기능만으로도 충분하다.

 

워드프레스 테마 선택 3
워드프레스 테마 선택 4

 

애드센스용 워드프레스 테마로는 일반적으로 GeneratePress 테마를 가장 많이 추천한다. 현재까지 속도면에서 가장 뛰어나다고 알려져 있어서 대부분 애스센스용 워드프레스 테마로 사용하고 있다. 하지만 디자인이 투박하다 보니, 처음 워드프레스를 설치한 후에 테마를 선택할 때에는 다른 테마를 기웃거릴 수밖에 없다. 최근에 국내 유튜브에서 Neve도 많이 언급하다 보니 해당 Neve 테마를 비롯하여 Customify, OceanWP 등을 선택하는 비중도 점차 증가하고 있다.

 

워드프레스 테마 선택 5
워드프레스 테마 선택 6

 

필자도 워드프레스 테마를 선택할 때 꽤나 많은 시간을 공들였는데, 앞선 포스팅을 본 분들은 알겠지만 워드프레스 꾸미기 단계에서 가장 먼저 하는 테마 설치를 거의 가장 마지막 단계에서 수행했다. 워드프레스를 설치한 다음에 바로 검색 엔진에 등록하고 기본적인 플러그인을 설치한 이후에야 비로소 워드프레스 테마를 선택하고 설치했다. 하지만 처음에 Customify 테마를 설치했다가 다시 Neve 테마로 바꾸었다가, 결국 최종적으로 국내에서 앤드센스용 국민 테마인 GeneratePress 테마로 안착했다.

 

워드프레스 웹사이트

 

즉, 워드프레스 테마는 마음대로 설치 후 삭제할 수 있으므로 처음에는 마음에 드는 테마를 설치해서 연습 겸 사용해보는 것도 좋은 방법이다. 실제로 애드센스용 워드프레스에서 필요한 건 처음 보이는 홈페이지에 해당하는 페이지와 포스팅 시 보이는 페이지, 이렇게 2개의 페이지만 있으면 된다. 또한 어떤 테마를 설치하더라도 기본적인 설정 방식은 워드프레스 관리자 페이지 메뉴에서 외모 내 사용자 정의하기에서 하므로, 처음에만 생소할 뿐 몇 번 설정을 건드리다 보면 별거 아님을 알 수 있다. 하지만 워드프레스가 처음이라면 비교적 참고할 포스팅이 많은 GeneratePress을 선택해서, 유튜브 또는 포스팅에 올라온 글들을 참조해서 사용자 정의하기 메뉴에서 테마 외모를 따라서 설정해 본 후에, 원하는 테마를 선택해서 설치하고 외모를 설정하는 방식을 추천한다.

 

워드프레스 테마 선택 7

 

즉, 어떤 테마를 선택해도 외모 내 사용자 정의하기 항목을 눌러서 세부적인 페이지 UI를 조정할 수 있는데, 브랜딩 개인홈페이지 또는 기업 웹사이트라면 아스트라 테마를 위시한 디자인적으로 퀄리티가 높은 테마가 우선시되지만, 단순 애드센스용 워드프레스라면 GeneratePress 테마처럼 투박하지만 속도면에서 강세인 테마를 선택하면 된다. 

 

워드프레스 기본 세팅하기

앞에서 워드프레스 테마 선택 시 너무 많은 부가적인 이야기를 했는데, 이는 필자가 실제로 워드프레스 테마를 선택 시에 여러 테마를 설치하고 고민했음을 반증한다. 따라서 처음 워드프레스를 사용한다면 또한 애드센스용으로 워드프레스를 사용할 용도라면 국내에서 국민 테마라 불리는 GeneratePress 테마를 설치하는 것을 추천한다.

 

워드프레스 UI

 

앞서 언급했듯이 애드센스용 워드프레스에서 필요한 페이지는 홈페이지와 세부페이지 즉, 2개의 페이지 디자인으로 충분하다. 더구나 홈페이지는 사실상 무쓸모에 가까우므로 실제로 신경써야 할 페이지는 포스팅에 활용한 세부 페이지뿐이기도 하다. 즉, 브랜딩 또는 기업 웹사이트가 아닌 애드센스용 워드프레스가 목적이라면 퀄리티 있는 디자인은 애당초 고려할 필요가 없다는 점이다.

 

워드프레스 UI 2

 

워드프레스 테마를 선택하고 설치했다면 우선 워드프레스 기본 세팅 과정을 거쳐야 한다. 필자는 워드프레스 기본 세팅과 플러그인 설치를 먼저하고 테마를 설치했는데, 일반적으로 테마를 먼저 설치하고 기본 세팅 및 플러그인을 설치한다. 물론 워드프레스 꾸미기 단계에서는 어떤 작업을 먼저 하든 순서는 중요하지 않으므로, 일단 할 수 있는 작업부터 수행해야 초기 시간을 줄일 수 있다.

 

워드프레스 UI 3

 

앞선 포스팅에서 언급했듯이 워드프레스 설치를 어떤 호스팅 서버를 구매해서 했듯 워드프레스를 설치한 이후에는 모두 공통된 워드프레스 관리자 페이지가 나온다. 따라서 워드프레스를 설치한 이후에는 모두 동일한 워드프레스 꾸미기 작업을 수행하면 된다. 그 첫 단계가 워드프레스 관리자 페이지로, 가장 먼저 해당 언어를 한국어로 변경하는 작업이다.

 

워드프레스 관리자 페이지 살펴보기 3

 

모든 워드프레스 관리자 페이지는 위와 같이 동일한 UI를 보이는데, 여기에서 좌측 메뉴에서 설정을 누른 다음에 언어에서 한국어를 선택하면 바로 한국어로 적용된다. 이후 1번 사이트 제목에는 웹사이트 타이틀을 임의로 기재하고 2번 태그라인에서 해당 웹사이트 설명 문구를 입력한다. 해당 1번과 2번에 기재한 내용은 기존에 티스토리를 해봤다면 알겠지만 검색 엔진에서 첫 번째로 확인하는 중요한 부분이므로, 워드프레스로 운영할 주제에 맞춰 기재한다. 참고로 2번은 태그라인이라고 해서 태그를 기재하는 게 아니고, 1번에 제목으로 웹사이트 타이틀을 입력했다면 2번에는 웹사이트 타이틀을 설명하는 부제를 적은 공간이다. 

 

워드프레스 관리자 페이지 살펴보기 4

 

더불어 사이트 언어 다음에 있는 시간대를 한국 시간대인 UTC+9로 선택하고, 날짜 표시 형식 및 시간 표시 형식은 위와 같이 설정하거나 자신의 취향대로 선택하면 된다. 마지막 한 주의 시작일은 보통 월요일로 하는데, 이 역시 개인적인 선호에 따라 선택해도 무방한 항목이다. 참고로, 워드프레스에서 무언가 변경한 이후에는 반드시 변경사항 저장 버튼을 눌러야만 정상적으로 변경하므로, 해당 변경사항 저장은 간단하지만 간과하기 쉬운 작업이므로 주의할 필요가 있다.

 

워드프레스 관리자 페이지 살펴보기 5

 

다음으로 설정 내 고유주소를 누른 후에 고유주소 구조를 글 이름을 선택한다. 기본값은 사용자 정의 구조에 체크되어 있는데, 글 이름으로 했을 때 검색에 조금 유용한 것으로 알려져 있다.  워드프레스 관리자 페이지에서는 이 정도가 필수적으로 수행하는 설정이다. 이외에 설정 내 쓰기, 읽기 항목은 굳이 건드리지 않아도 무방한데 필요시에 테마를 설치하고 실제 글을 쓰고 포스팅할 때 설정을 조정하면 된다. 

 

워드프레스 관리자 페이지 살펴보기 6

 

참고로, 설정에서 토론 메뉴를 선택한 후에 해당 워드프레스로 만든 웹사이트에 추가되는 댓글을 조정할 수 있는데, 해당 부분도 필수는 아니므로 기본값 상태로 두어도 무방하다. 하지만 애드센스용 워드프레스가 목적이므로 댓글 자체가 불편할 수 있어서 보통 기본 글 설정 항목에 있는 3개를 전부 체크 해제한다. 즉, 모든 댓글창을 막아 놓는 설정이다. 이렇게 까지 모든 댓글을 막을 의도가 없다면 기본값 상태에서 하단에 있는 댓글을 공개하기 전에 항목에서 댓글을 수동으로 승인해야 합니다를 체크해서, 댓글을 워드프레스 관리자가 직접 관리할 수 있도록 조치하면 광고 또는 비속어 등이 담긴 댓글을 최소한 막을 수 있다.

 

워드프레스 관리자 페이지 살펴보기 7

 

더불어 댓글을 설정하는 토론 페이지에서 아래로 스크롤하면 아바타 보이기 항목이 나오는데, 워드프레스 속도에 민감하다면 해당 아바타 보이기 항목을 체크 해제해야 한다. 실제로 애드센스용 워드프레스는 아바타 보이기를 대부분 체크 해제하는데, 이 사항은 필수는 아니므로 개인적인 취향에 따라 결정하면 된다. 이후 앞에서 언급했지만 쉬우면서도 자주 잊을 수밖에 없으므로 다시 한번 강조하면, 워드프레스에서 무언가 변경하면 반드시 변경사항 저장 버튼을 눌러야만 적용이 된다.

 

워드프레스 테마 설정하기

 

 

위에서 제시한 워드프레스 기본 세팅을 한 후에 워드프레스 테마를 설정하는 게 더욱 간편하다. 물론, 워드프레스 테마를 먼저 세팅해도 무방하다. 어떤 워드프레스 테마를 설치했든지, 모두 동일하게 외모 메뉴에서 사용자 정의하기라는 세부 메뉴를 선택해서 해당 테마가 제공하는 디자인을 수정할 수 있다.

 

워드프레스 테마 설정 1

 

사용자 정의하기에 들어가면 위와 같은 메뉴가 나오는데, 워드프레스에서 보여질 페이지의 디자인은 여기에서 한다고 생각하면 된다. 이때 가장 먼저 고려해할 부분은 보일 페이지의 레이아웃으로, 사이드바의 존재 유무이다. 가장 상단에 있는 사이드 아이덴티티 메뉴는 기본적으로 워드프레스 기본 세팅 시에 작성한 대로 나오므로 따로 건드릴 사항이 없다. 처음에 가장 많이 건드리는 메뉴가 Layout이고, 여기에서도 가장 먼저 사이드바를 넣을지 뺄지를 선택하고 이후 레이아웃 디자인을 설정해야 빠르게 진행할 수 있다.

 

워드프레스 테마 설정 2

 

위와 같이 Layout 메뉴로 들어가면 또 다시 세부화된 다양한 메뉴가 나오는데, 여기에서 Sidebars 메뉴를 먼저 설정하는 것을 추천한다. 

 

워드프레스 테마 설정 3

 

개인적으로는 사이드바가 없는 UI를 선호해서 홈페이지부터 포스팅에 나오는 개별 페이지까지 사이드바를 없앤 구성으로 설정했다. 하지만 사이드바에 애드센스 광고를 넣기를 원하다면 세부 항목에서 사이드바가 있는 항목을 선택하면 된다. 이렇듯, 우선 사이드바의 존재 유무를 결정해야 향후 디자인 작업이 수월하다. 더불어 테마 설정에서 변경 후에는 반드시 상단에 있는 공개 버튼까지 눌러야만 적용이 되므로, 해당 공개 버튼을 누르는 작업을 잊어서는 안 된다.

 

워드프레스 테마 설정 4

 

이후 세부 레이아웃 메뉴를 순서대로 간단히 살펴보면, Container는 전체 화면 구성으로 여기에서 중요한 부분은 상단에 있는 크기이다. 보통 기본값을 사용하지만 애드센스 전문 워드프레스 사용자들은 1000px로 조금 작은 화면 크기를 사용하기도 한다. 2번째 항목은 눌러보면 알 수 있는데, 해당 콘텐츠를 하나처럼 보이게 할 것이지 개벌 콘텐츠마다 분리해서 보여줄 것인지를 결정하는 항목이다.

 

워드프레스 테마 설정 5
워드프레스 테마 설정 6

 

다음으로 Header 메뉴는 문자 그대로 웹페이지에서 상단에 위치한 타이틀이 나오는 공간을 구성하는 항목으로, 그냥 눌러보면 직관적으로 이해할 수 있다. 이때 공개 버튼을 누르기 전까지는 변경사항이 적용되지 않으므로 원하는 대로 눌러보면 된다. 그 아래에 있는 Primary Navigation은 모바일 화면에서 보이는 일명 햄버거 버튼이라고 해서 메뉴바 위치와 크기 등을 설정하는 공간이다. 

 

워드프레스 테마 설정 7

 

하단에 있는 데스크탑, 태블릿, 모바일 아이콘을 누르면 바로 해당 디자인을 확인할 수 있는데, 최근에는 모바일 UI를 기준으로 설정하는 추세이다.

 

워드프레스 테마 설정 8

 

가장 먼저 설명했던 Sidebars 메뉴 다음에 있는 Footer 메뉴는 문자 그대로 페이지에서 하단에 보통 홈페이지 제작사 및 저작권 표시가 나오는 공간을 꾸미는 항목이다. 여기에서 중요한 항목은 마지막에 있는 Back to Top Button으로 해당 항목을 Enable로 선택하면, 페이지 우측 하단에 화살표 아이콘을 자동으로 추가한다. 해당 화살표 아이콘을 누르면 페이지 상단으로 이동한다. 더불어 Footer Widgets를 활용해서 페이지 하단에 추가로 애드센스 광고를 비롯하여 바로가기 콘텐츠 등을 삽입할 수 있는데, 개인적으로는 사용하지 않으므로 0을 선택했다. 필요시에는 외모에서 사용자 정의하기 메뉴 중 위젯 항목과 연계해서 꾸밀 수 있다. 

 

워드프레스 테마 설정 9

 

레이아웃에서 마지막 항목인 Blog는 홈페이지 즉, 첫 페이지에 보여질 개별 포스팅 페이지 형태이다. Excerpt를 선택하면 포스팅 페이지 앞부분만 보여주는 방식이고, Full Context를 선택하면 포스팅 페이지 전체를 홈페이지 초기 화면에 보여주는 구성을 의미한다. 보통 Excerpt를 선택하는 게 일반적인 설정 방식이다.

 

워드프레스 글쓰기 설정 기본 1

 

이 정도까지만 초반에 테마 설정을 했다면 가급적 실제로 글을 작성해서 최소 3-4개를 포스팅하는 게 유용하다. 그래야 테마 레이아웃 설정이 어떻게 변경됐는지를 직접 체감할 수 있어서, 원하는 대로 디자인을 구성하기에 더욱 유용하다. 따라서 테마의 기본적인 설정을 마무리했다면 실제 글을 작성할 때 필요한 읽기, 쓰기 메뉴에서 필수적인 사항만 설정한 후에 바로 글쓰기 작업을 수행해야 한다. 

 

워드프레스 글쓰기 설정 기본 2
워드프레스 글쓰기 설정 기본 3

 

우선 워드프레스 관리자 페이지 설정에서 쓰기 메뉴에서는 상단에 나오는 기본 글 카테고리는 워드프레스에서 글을 쓴 후에 발행할 때 적용되는 카테고리를 지칭한다. 물론 콘텐츠를 발행하기 전에 카테고리를 지정하면 되는데, 이때 특정 카테고리를 지정하지 않을 때 적용되는 기본 카테고리를 해당 부분에서 설정할 수 있다. 다음으로 읽기 메뉴에서 마지막에 나오는 검색 엔진 가시성 항목에 있는 검색 엔진이 이 사이트를 검색하는 것을 차단은 기본값 그대로 체크가 해제되어 있어야 한다. 해당 항목에 담긴 문자 그대로 해당 항목을 체크하면 검색 사이트에서 해당 워드프레스에서 작성한 콘텐츠를 검색해서 나오지 않게 하므로, 실수로라도 검색 엔진 가시성 항목을 체크하는 일이 없어야 한다. 다만, 워드프레스를 처음 설치한 후에 이것저것 건드리면서 연습할 때에는 해당 검색 엔진 가시성을 체크해서, 검색 엔진이 연습용으로 작성한 콘텐츠를 가져가지 않도록 설정해도 된다. 하지만 이후에 반드시 해당 검색 엔진 가시성은 체크를 해제해야만 자신이 발행한 콘텐츠가 검색사이트에서 검색이 된다는 점을 잊어서는 안 된다.  

 

워드프레스 글쓰기 설정 기본 4
워드프레스 글쓰기 설정 기본 5

 

더불어 워드프레스에서 글을 작성할 때에는 좌측 메뉴에서 글을 누른 다음에 새 글 추가를 눌러 작성하는 방식이다. 해당 부분은 테마와 플러그인까지 설치한 다음에 진행하므로 여기에서는 쓰기에서 언급한 카테고리만 설명한다. 해당 글 메뉴에 새 글 추가 다음에 있는 카테고리를 눌러서 카테고리를 생성할 수 있다. 해당 카테고리는 웹사이트에서 상단에 메뉴 형식으로 보이는 메뉴바를 의미한다. 바로 쓰기에서 기본 카테고리로 지정할 때 상기 글 메뉴에 담긴 카테고리 항목에서 필요한 카테고리를 생성할 수 있다. 처음 워드프레스를 접한다면 무슨 말인지 이해가 안 갈 수도 있지만, 나중에 워드프레스로 글을 작성하고 콘텐츠를 발행하는 과정까지 진행하면, 여기에서 언급한 카테고리 사항은 저절로 알 수 있는 부분이므로 지금은 이런 게 있다는 정도만 확인하고 넘어가도 무방하다. 

 

워드프레스 테마 세부항목

워드프레스에 몇 개 포스팅을 했다면 다시 워드프레스 관리자 페이지에서 외모 메뉴에서 사용자 정의하기로 들어가면 이전에 작업했던 디자인 변경을 더욱 유용하게 활용할 수 있다. 앞에서 언급했던 레이아웃을 다시 수정해보면 포스팅이 있다 보니 더욱 어떤 디자인으로 변경되는지 실감할 수 있을 뿐만 아니라, 이후 필요한 추가적인 디자인 작업도 매우 용이하다.

 

 

테마 사용자 정의하기에서 세부적인 디자인 시에 활용할 수 있는 항목은 Colors와 Typography가 대표적이다. Colors는 문자 그대로 워드프레스에서 보여지는 모든 색상을 선택할 수 있고, Typography는 글자 크기, 글꼴 모양, 색상 등 텍스트 전반적인 사항을 설정할 수 있다.

 

워드프레스 테마 세부 수정하기 1

 

Colors 메뉴에 들어가면 UI에 보여지는 각각의 세부 항목을 선택해서 색상을 설정할 수 있는데, 개인적으로는 기본값 그대로 두고 사용하고 있다. 필요시에 여기에서 원하는 위치의 백그라운드를 비롯하여 버튼 등의 색상을 변경할 수 있다.

 

워드프레스 테마 세부 수정하기 2

 

다음으로 Typography에서 글자와 관련한 모든 사항을 조정할 수 있는데, 개인적으로 Typography 메뉴는 적극 활용하고 있다. 대표적으로 Add Font 버튼을 눌러서 사용할 글꼴을 추가하고, h1을 비롯하여 각각의 태그에 사용할 글꼴과 크기 등을 설정했다. 참고로, H 태그는 어느 정도 글꼴 크기가 괜찮아서 기본값으로 사용하지만, P 태그에 해당하는 본문 글꼴은 조금 작은 듯해서 크기를 조금 키웠다. 이렇듯 워드프레스에서 보이는 모든 텍스트 관련 옵션은 Typography 메뉴에서 언제든지 간편하게 변경할 수 있다.

 

워드프레스 테마 세부 수정하기 3

 

더불어 메뉴 즉, 홈페이지 또는 각각의 포스팅 페이지 상단에 나오는 카테고리에 해당하는 메뉴는 테마의 사용자 정의하기에서 설정하는 것보다 글 메뉴에 있는 카테고리를 활용해서 작성하는 게 수월하다. 물론 어떤 방식을 사용하든 메뉴 생성 및 수정은 동일하다. 이외에 위젯과 추가 CSS는 워드프레스에서 매우 유용한 기능이긴 하지만 처음 워드프레스를 접한다면 어느 정도 워드프레스 글쓰기에 익숙해질 때까지는 건드리지 않는 게 좋다. 위젯과 추가 CSS를 사용하면 워드프레스 UI를 퀄리티 있는 디자인으로 꾸밀 수도 있지만, 해당 부분이 필요할 시점이라면 간단히 유료 테마를 구매해서 사용하는 게 더욱 효율적이다.