티스토리 블로그를 운영하다 워드프레스를 시작하게 되면 티스토리 블로그와 다른 화면으로 많은 어려움을 겼습니다. 이번글에서는 워드프레스 블로그를 티스토리 블로그와 비슷하게 만들어주는 원프레스(Onepress) 테마 설치 및 설정 방법에 대해서 정리하였습니다. 글자 크기 및 색상 조정 방법, 사이드바 변경, 그리고 티스토리 에서 사용되는 섬네일 링크를 만들어주는 플러그인 설치 방법까지 알아보겠습니다.
1. 원프레스(Onepress) 테마 설치
워드프레스에서는 다양한 무료 또는 유료 테마을 제공하고 있습니다. 외국의 경우 ‘아스트라’ 테마를 많이 사용하고 있는데, 이 테마의 경우 블로그 보다는 홈페이지 구축에 적당한 테마입니다. 블로그의 경우 제너레이트프레스(GeneratePress) 테마를 가장 많이 사용하고 있습니다. 하지만 이 테마의 경우 무료로도 사용할 수 있지만, 제대로 이용하려면 유료로 구매해야합니다. 무료로 이용할 수 있는 테마 중 티스토리와 비슷한 형태의 테마가 바로 원프레스(Onepress) 테마을 추천합니다.
티스토리 블로그에서 많이 볼 수 있는 형태처럼 상단에 블로그 제목 및 블로그 설명이 있고, 그 아래 작성한 글들이 리스트 형태로 나타납니다. 그리고 우측에 사이드 바가 위치하고 있으며, 여기에는 검색, 카테고리, 태그, 댓글과 같은 위젯이 위치합니다.
테마 설치의 경우 관리페이지 메뉴에서 [외모] – [테마] 버튼을 클릭한 뒤 [새로 추가] 버튼을 클릭한 후 ‘onepress’를 설치합니다. 테마 설치가 끝나면 [활성화] 버튼을 클릭하여 테마을 적용합니다.
지금 보고 있는 이 블로그가 바로 Onepress 테마가 적용된 블로그입니다. 다른 테마도 사용할 수 있지만 간편하게 사용하기 좋은 테마라고 생각됩니다.
2. 사이드바 설정 (구글 애드센스 추가)
Onepress 테마를 설치하고 나면 오른쪽 사이드바에 검색창, 최신글, 최신 댓글, 보관, 카테고리 5개의 위젯이 기본적으로 나타납니다. 우측 사이드바의 경우 애드센스 광고 추가를 위해 사용하기도 합니다. 사이드바에 서 불필요한 항목은 삭제하는 것을 추천드립니다. 5개의 위젯 중 검색창, 최신글은 반드시 남겨두시고, 댓글과 보관 항목은 삭제합니다. 카테고리 위젯의 경우 본인의 활용 여부에 따라 남겨두시기 바랍니다. 저는 댓글과 보관 항목을 삭제하겠습니다.
사이드바를 수정하기 위해서는 워드프레스 관리 페이지 메뉴에서 [외모] – [테마]를 클릭 합니다. 그러면 [외모] 메뉴 아래 [테마], [사용자 정의하기], [위젯], [메뉴], [Onepress 테마], [테마파일 편집기] 메뉴가 다시 나타나는데, [위젯] 메뉴를 클릭합니다.
위젯을 클릭하면 위젯를 설정할 수 있는 화면이 나타는데 위젯도 하나의 페이지라고 생각하시면 됩니다. 제목아래 특수 기능이 있는 블록을 추가한 것이 바로 위젯입니다. 위젯을 삭제하거나 추가할 때 블록을 편집하는 것과 동일하게 진행을 하면 됩니다. 최신 댓글 삭제의 경우 ‘Recent Comments’라고 되어 있는 제목 블록을 클릭한 후 아래 그림처럼 삭제를 하시면 됩니다. 그 아래 있는 댓글 블록도 동일한 방식으로 지우시면 됩니다.
최근 댓글과, 보관 항목을 삭제하면 아래와 같이 정리가 됩니다. 영어로 적혀 있던 ‘Recent Posts’와 ‘Categories’를 한글로 수정하였습니다. 그리고 글자 크기가 너무 커서 제목 글자 크기를 h2에서 h3로 변경하였습니다.
오른쪽 상단에 있는 [업데이트] 버튼을 누르면 수정한 사항들이 반영 됩니다. 마지막으로 사이드 바 상단에 구글 애드센스 넣는 방법까지 알려 드리겠습니다. 아래 그림처럼 [사용자 정의 HTML] 박스를 추가합니다.
플로팅 메뉴에 있는 화살표를 이용하여 [사용자 정의 HTML] 박스를 제일 위로 올립니다. 그리고 [사용자 정의 HTML] 박스에 구글 애드센스 코드를 추가하고 저장을 하면 됩니다.
3. 폰트 (크기 및 색상) 설정 (CSS 파일 수정)
이번 단락에서는 글의 폰트 크기 및 색상 변경 방법에 대해 알려드리겠습니다. 별도의 플러그인을 사용하지 않고 CSS 파일 수정을 통해 글에서 보여지는 글자 크기 및 색상을 수정할 수 있습니다. 워드프레스 관리 페이지에서 [외모] – [사용자 정의하기]를 클릭합니다. 그러면 [외모] 관련 메뉴가 다시 나타나는데 여기서 [추가 CSS] 항목을 클릭합니다.
추가 CSS 창에서 폰트 크기와 색상을 정의합니다. 글의 본문 단락(Paragraph) 수정을 위해서 아래와 같이 내용을 추가하시면 됩니다.
p {
font-size: 16px;
color: #333333;
}
H2, H3 제목도 아래와 같이 글자 크기와 색상을 수정하였습니다. 기본으로 설정된 본문 글자의 경우 너무 연하게 되어 있어 가독성이 떨어집니다. 글자 색상을 조금더 진하게 변경하였습니다. 목차 항목 글자 수정을 하고자 할 경우 ul { } 으로 추가하시면 됩니다.
글자 크기를 변경하면 홈 화면의 글씨도 커지기 째문에 썸네일 사진과 글자 간의 비율이 맞지 않아 이상하게 표시되는 경우가 있습니다. 이 경우 관리페이지 [외모]-[테마 페이지]에서 수정할 수 있습니다. 수정 방법 및 폰트 변경을 위한 다른 방법들에 대해 별도 글로 작성하였습니다. 자세히 알고 싶다면 아래 링크 글 참고하시기 바랍니다.
4. 목차 플러그인 설치
구글 SEO를 높이기 위한 방법 중 한가지는 목차입니다. 긴 글의 경우 글 앞쪽에 목차가 있는 것이 좋습니다. 관리 페이지 메뉴에서 [플러그인] – [새로 추가]를 클릭한 후 검색 창에 ‘목차’를 검색하면 [쉬운 목차]라는 플러그인이 있는데 해당 플러그인을 설치 한 후 활성화 합니다.
[쉬운 목차]를 활성화한 뒤 설정을 진행합니다. 관리페이지 메뉴에서 [설정] – [쉬운 목차]를 선택합니다. 작성한 글에만 목차를 삽입하기 위해 [자동 삽입] 항목에 [글] 체크 박스를 선택합니다. 그리고 자동으로 삽입되는 목차 위치를 설정합니다. 저는 ‘첫 단락 이후’ 목차를 표시하도록 설정하였습니다. 그리고 제목 항목이 3개 이상일 때만 목차가 삽입되도록 하였습니다.
5. 비주얼 링크 프리뷰(Visual Link Preview) 플러그인 설치
티스로리 블로그의 경우 링크 주소를 넣을 경우 자동으로 임베드 되면서 썸네일과 요약 설명이 표시가 됩니다. 워드프레스에도 티스토리처럼 링크 주소를 임베드 할 수 있는 플러그인이 있습니다. 바로 ‘Visual Link Preview’ 입니다. 관리 페이지 [플러그인] – [새로 추가]에서 Visual Link Preview를 검색하여 설치합니다.
사용방법은 간단합니다. 블록 추가에서 위젯 항목에 있는 Visual Link Preview를 선택한 후 URL를 입력하면 됩니다.
이번 글에서는 워드프레스 블로그를 설치 후 기본적으로 해야하는 테마 설치, 폰트 크기 및 색상, 플러그인 설치 방법들에 대해 알아보았습니다.