워드프레스 블로그 개설을 위한 모든 것 - 워드프레스 테마 설정

이전 편까지 워드프레스 블로그 개설을 위한 호스팅 서버의 등록 방법부터 관리자 계정 생성까지 필요한 모든 내용을 알아보았습니다. 이번 편에서는 워드프레스 테마 설정을 어떻게 하는지 자세히 알아보도록 하겠습니다.

워드프레스 테마 설정

워드프레스의 테마는 정말 많습니다. 그중 아스트라, 자크라, generatepress 테마를 추천하시는 분들이 많은데요. 저는 이들 테마도 좋지만 OnePress 라는 테마를 사용하도록 하겠습니다. OnePress 테마는 속도도 빠르고 광고를 넣기에도 적당하기 때문입니다.

먼저 워드프레스에 관리자 권한으로 로그인한 후, 언어를 한국어로 변경합니다. (영어가 편하시다면 그대로 진행하셔도 됩니다. )

Timezone을 Seoul로 변경합니다.

Date Format 등은 원하시는 형식으로 변경하신 후 아래로 스크롤 하여 “Save Changes” 클릭하여 저장하면, 한국어로 화면이 바뀌게 됩니다.

이제 OnePress 테마를 추가해 보도록 하겠습니다. 외모 → 테마 → “새로운 테마 추가”를 클릭합니다.

OnePress 로 검색을 한 결과에서 “설치”를 클릭하여 설치합니다. 설치가 완료되면 표시되는 “활성화”를 클릭하면 내 워드프레스 블로그에 OnePress 테마가 적용되게 됩니다.

테마가 적용됐는지 확인하기 위해 내 블로그로 들어가 보시면, 테마가 바뀐 것을 확인하실 수 있습니다. 만약 테마가 바뀌지 않았다면 “활성화”를 하지 않은 것이니 위의 설명대로 “활성화”를 클릭하여 활성화하시면 됩니다.

OnePress 테마를 설치하고 활성화 하였기 때문에 글을 하나 써 보도록 하겠습니다. 아래와 같이 +새로 추가 → 글 을 클릭합니다.

아래와 같이 짧은 글을 하나 썼습니다.

그리고 미리보기를 실행하여 어떻게 보이는지 확인해 보았습니다.
보시기에 어떠신가요? 저는 개인적으로 H2와 H3 태그의 폰트 사이즈 차이가 너무 큽니다. 또한 본문의 폰트 사이즈가 너무 작고 흐리게 보여 가독성이 너무 떨어지는 것 같습니다. 그리고 오른쪽 사이드바에서 Recent Comments와 Archives는 필요가 없기 때문에 삭제했으면 좋겠고, 검색과 Recent Posts 사이에 4각형 광고와 Categories 아래에 수직형 광고를 하나 넣으면 좋겠다는 생각입니다. 제가 마음에 들지 않는 부분에 대해서 테마를 수정해 보도록 하겠습니다.

우선 H태그와 본문 폰트를 수정하는 방법은 2가지가 있습니다. 첫번째는 글을 쓸 때마다 일일이 원하는 폰트크기와 색상으로 변경해 주는 방법이고, 두번째는 일일이 수정해 주는 것이 아니라 테마에 H태그와 본문의 폰트크기와 색상을 CSS로 설정해 주는 방법입니다. 저는 두번째 방법을 사용하도록 하겠습니다.

워드프레스 관리자 페이지에서 외모 → 사용자 정의 를 클릭합니다.

추가 CSS 를 클릭합니다.

아래의 빨간색 테두리 부분에 H태그와 본문의 폰트 및 색상을 지정하도록 하겠습니다.

그 전에 먼저 폰트의 색상은 Hex 코드로 작성을 해야 하는데 우리가 모르기 때문에 확인하도록 하겠습니다. 워드프레스 글 수정 또는 새글 추가를 클릭해서 편집모드로 들어간 후 아래와 같이 텍스트 → 사용자 정의를 클릭하고 원하는 색상을 선택하시면 그 아래 Hex 코드가 생성되는데 그 코드를 복사합니다. 완전 블랙은 000000 이지만 조금 촌스럽기 때문에 그보다는 조금 연한 블랙이 좋겠습니다.

Hex 코드를 알았다면 다시 위에서 말씀드렸던 CSS 추가로 이동한 후, 아래와 코드를 복사하여 붙여넣기 합니다. p는 본문의 폰트크기와 색상을 변경하는 것이고, ul은 목록의 폰트크기와 색상을 변경한 것입니다. 목록의 경우 일반적으로 본문보다는 작은 폰트를 쓰지만 저는 같은 크기와 색상을 선호하기 때문에 동일하게 적용하였습니다.

p {
 font-size: 18px;
 color: #0E0E0E;
}

ul {
 font-size: 18px;
 color: #0E0E0E;
}

h3 {
 font-size:24px;
}

h4 {
 font-size:22px;
}

h4 {
 font-size:20px;
}

추가 CSS에 P태그 폰트의 크기와 색상, H태그와 ul의 폰트 크기를 정의합니다

원하는데로 본문의 폰트크기와 색상, 그리고 h3 태크 등의 크기를 변경했다면, 위의 “공개”를 클릭하여 저장하면 반영됩니다.

다음으로 오른쪽 사이드바에서 필요없는 항목을 제거하도록 하겠습니다. 광고코드를 추가하려면 애드센스에서 광고단위를 만들어야 하기 때문에 지금은 하지 않도록 하겠습니다.
워드프레스 관리자 화면에서 외모 → 위젯을 클릭하면 아래와 같이 위젯을 편집할 수 있는 화면이 나옵니다.

여기서 아래와 같이 삭제하고자 하는 부분으로 마우스 이동 후 세로 3개점 → 삭제를 클릭하면 제거할 수 있습니다.

불필요한 위젯을 아래와 같이 모두 삭제하였다면 “업데이트”를 클릭하여 저장입니다.

본문의 폰트 사이즈 및 색상, H 태그의 폰트 사이즈 조정, 그리고 불필요한 위젯까지 삭제한 후, 어떻게 보이는지 확인해 보면 수정하기 전보다 가독성이 높아진 것을 확인할 수 있습니다. 참고로 저는 본문 폰트 16px가 모바일에서 작은 것 같아 18px로 조정하였습니다.

그런데 이렇게 폰트 사이즈를 조정하고 보니 그림의 크기에 비해 글자가 차지하는 공간이 커졌고, 이로 인해 아래와 같이 그림 밑 부분에 빨간색 박스 크기의 공백이 생겨 보기에 좋지 않게 되었습니다. 이를 해결하는 방법은 그림의 세로크기를 늘리던지, 아니면 글자수를 줄여야 합니다. 저는 글자수를 줄이는 방법으로 해결하였습니다.

관리자 화면에서 외모 → 테마 편집기를 클릭합니다.

오른쪽에서 “테마 기능”을 클릭합니다.

아래 화면과 같이 맨 밑으로 이동하신 후 아래 코드를 붙여넣기 한 후, 파일 업데이트를 클릭하여 저장합니다.

function custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

다시 블로그에 들어가 보니 위의 코드를 적용하기 전보다는 공백이 줄었지만 아직 마음에 들지 않습니다. 위의 코드에서 return 20; 의 숫자 부분을 조정해서 맞추도록 하겠습니다.

저의 경우 return 14; 로 조정하였더니 아래와 같이 보기 좋게 수정되었습니다.

보기좋게 수정되지 않았을 경우 숫자를 줄어 다시 적용한 후 결과를 확인합니다

오늘은 워드프레스 블로그 개설후 Oenpress 테마를 설치하고 사용자에게 맞게 본문 및 H태그의 폰트, 그리고 사이드바에서 필요하지 않은 가젯등을 Customizing하는 방법에 대해서 알아보았습니다. 내용이 조금 길지만 천천히 따라해 보시기 바랍니다.

워드프레스 블로그 개설을 위한 모든 것 – 파비콘 등록