워드프레스 테마 디자인을 수정할 땐? 잿팩과 크롬 개발자 도구를 활용하자.

워드프레스의 경우 타 CMS 대비 조금 더 빠르고 저렴한 웹 구축이 가장 큰 장점으로 거론됩니다.

그러한 장점의 중심에는 바로 테마가 있다고 해도 과언이 아닙니다.

그렇기 때문에 일부 국내 대형 언론사들을 제외하고는 모두 테마를 기반으로 워드프레스 사이트를 제작합니다.

 

하지만 테마의 디폴트 디자인이 마음에 들지 않는다면 어떻게 해야할까요?

자식 테마라는 기능을 이용해서 테마를 커스텀할 수도 있습니다.

 

하지만 워드프레스의 장점인 최소의 비용, 최소의 시간이 중요합니다. 따라서 워드프레스를 통한 홈페이지 제작을 맘 먹었다면, 직접 할 수 있는 부분은 빠르고 쉽게 처리를 해야겠지요.

수만가지가 넘는 테마 중에 하나를 선택 했다면, 분명히 그 테마의 전반적인 디자인이 맘에 들어서 선택한 것일 겁니다.

그렇기 때문에 테마가 지원하는 범위를 넘어서 커스텀을 한다고 해도 한글 폰트 적용이나 색상 변경 여백 및 폭 변경이 주로 행해질 것입니다.

 

이러한 경우에는 웹 마크업 언어를 알지 못하는 비전문가도 워드프레스 플러그인인 잿팩(Jetpack)과 구글의 크롬 개발자 도구를 사용한다면 간단한 작업이 가능합니다.

 

Chrome 브라우저와 Jetpack 플러그인은 웬만한 경우이면 둘다 사용하고 계실겁니다.

Jetpack이 설치되지 않은 경우는 워드프레스 관리자 페이지의 플러그인 추가 메뉴에서 Jetpack을 검색해서 설치하시면 됩니다.

Jetpack 플러그인 설정에서 사용자 정의 CSS 기능을 활성화합니다. 처음 잿팩을 설치할 경우 자동으로 활성화 됩니다.

 

사실 별거 없습니다. 이렇게 저렇게 설명 드리는것보다는 그냥 한번 보여드리겠습니다.

 

 

 

수정 하고 싶은 부분을 오른쪽 클릭해서 요소 검사를 띄웁니다. 그러면 하단 우측에 CSS Rule이 뜹니다.

이 부분을 복사해서 제 맘대로 바꿔보겠습니다.

 

먼저 CSS 수정할 부분을 복사합니다.

코드로 되어있어도 영어 읽으시면 어떤 부분을 지칭하는 코드인지 다 아실겁니다.

 

저는 전체를 복사해보았습니다.

복사한 후에 관리자 페이지에서 위젯 – CSS 편집을 들어가서 붙여넣어 줍니다.

 

 

 

여기서 원하는 대로 수정을 하면되는데, 코드가 맞지 않다면 빨간색 경고가 뜨고 코드 중복이나 사소한 오류의 경우 노란색 경고가 뜹니다.

그 부분에 마우스를 가져다대면 무엇이 잘못되었는지까지 친절히 알려 줍니다.

 

CSS의 기본적인 부분만 알려드리면, 점 뒤에 표시되는 부분은 어느 부분에 적용되는 속성인지 구분합니다.

그리고 {}안에 어떤 속성 값을 적용할 지 써 넣습니다.

앞 부분은 지정할 속성(ex. 폰트 크기, 종류 또는 넓이 높이)을 작성하고, :를 추가한 후 띄어쓰기 한번한다음 뒷 부분은 값(몇 픽셀, 폰트 명 등)를 작성후 바로 ;로 마무리해줍니다.

 

저는 폰트 사이즈와 글씨가 뜨는 초록바 부분의 높이를 줄여보겠습니다.

이 경우 font-size 부분과 height 부분을 수정해주면 되겠지요.

 

그리고 편집하지 않은 속성은 그냥 다 지워버리시기 바랍니다.

그래야 속도 저하가 최소화됩니다.

 

저는 위의 코드에서 폰트 크기를 15px로 조정하고 height는 60px로 조정한 후 필요 없는 부분을 삭제하였습니다.

 

.text-slider-one a, .text-slider-one-content a {
font-size: 15px;
height: 60px;
}

그 결과 이러한 코드가 나왔고 저장하기 전에 미리보기를 눌러서 어떻게 나타나는지 보겠습니다.

 

 

보시면 슬라이더 부분의 폰트가 엄청나게 작아진 것을 보실 수 있습니다.

저는 적용할 것이 아니기 때문에 삭제를 하였습니다.

 

처음에는 쉽지 않겠지만, 몇시간만 해보시면 왠만한 자잘한 수정은 다 하실 수 있을겁니다. 이런 글 조차도 참고할 수 없었던 저조차도 몇시간만에 어느정도 다룰 수 있게되었으니까요.

물론 테마를 완전히 뒤바꿀경우는 어느정도 테마와 마크업 언어에 대한 지식이 필요하고 자식 테마를 이용해 작업하셔야합니다.

 

그리고 구지 잿팩으로 작업을 하라는 이유는 오류 검사나 자동으로 줄 정렬 해준다는 장점도 있고, 리비전을 지원해 잘못 수정할 경우에도 바로 복구가 가능합니다.

저도 CSS에 대해 전혀 알지 못하는 사람이지만, 잿팩과 크롬 개발자 도구의 조합으로 디자인의 상당 부분을 맘에 들게 바꿀 수 있었고, 한글 폰트도 적용할 수 있었습니다.

 

폰트 적용의 경우 다음 글에서 설명하도록 하겠습니다.

 

궁금하신 사항이 있으시면 댓글 달아주시면 아는 선에서 답변해드리겠습니다.

미천한 실력이지만, 조금 더 먼저 삽질한 사람으로서 좋은 답변과 글로 베풀고 싶습니다.

왜냐하면 한글로 된 워드프레스 관련 글들이 부족했기 때문에 제가 엄청나게 고생을 했거든요.

그래서 항상 영어를 보거나 혼자 삽질하는데, 한글로된 글들이 많아지려면 간단한 부분이라도 저부터 공유를 해야 이런 글들이 많아져서 저도 결국 도움을 받을 수 있지 않을까 하는 마음에서 글을 쓰고 있습니다.

 

워드프레스로 서비스를 준비하고 있는데, 서비스가 론칭되고 안착에 성공한다면 워드프레스 제작 과정에서 있었던 문제들을 공유해볼까 합니다.