워드프레스 테마 커스터마이징, 초보부터 시작해 보자

by

워드프레스 테마 커스터마이징에 관해서 설명하기에 앞서 워드프레스가 무엇이고 왜 사용하는지 간단하게 설명하겠습니다.

전 세계 웹사이트의 43.0%가 워드프레스로 제작되어 있으며, 전체 콘텐츠 관리 시스템(CMS, Content Managment System) 중 64.2%의 시장 점유율을 기록하고 있습니다. 이처럼 많은 사용자가 사용하는 워드프레스는 다양한 테마와 플러그인을 이용하여 손쉽게 웹사이트를 구축할 수 있습니다. 하지만 기본적인 테마만으로는 사용자의 요구를 완벽하게 충족하지 못할 때가 많습니다.

이때 필요한 것이 바로 ‘커스터마이징’입니다. 제공되는 테마를 자신만의 스타일에 맞게 조정하는 과정을 통해 고유한 웹사이트를 만들 수 있습니다.

이 글을 통해 초보자를 위한 테마 커스터마이징 방법을 차례대로 설명하겠습니다.

1. 자녀 테마(Child Theme) 만들기

워드프레스에서 테마를 사용자가 임의로 변경할 때 가장 먼저 고려해야 할 점은 원본 테마 파일을 직접 수정하지 않는 것입니다.

왜냐하면 테마 업데이트 시 수정한 내용이 사라질 수 있기 때문입니다. 이를 방지하기 위해 자녀 테마(Child Theme)를 만들어야 합니다. 자녀 테마는 원본 테마(부모 테마)의 기능을 상속받으면서, 자신만의 스타일을 추가할 수 있는 방법입니다.

자녀 테마를 만들기 위해서는 테마 폴더에 새로운 디렉터리를 생성하고,
예시) 기존 테마 폴더가 generatepress인 경우, 자녀 폴더명은 generatepress_child로 생성

GeneratePress 테마의 자녀테마 예시
GeneratePress 테마의 자녀테마 예시

style.css 파일과 functions.php 파일을 추가하는 것이 기본 과정입니다. 이때 부모 테마의 스타일을 상속받기 위해서는 style.css 파일 내에서 부모 테마의 CSS 파일을 불러와야 합니다.

/*
 Theme Name: 자녀 테마 이름
 Template: 부모 테마 폴더 이름
*/
@import url("../부모테마폴더/style.css");
CSS

자녀 테마의 보다 자세한 내용은 아래의 링크를 통해 확인할 수 있습니다.

자녀 테마(Child Themes): 워드프레스 공식 사이트

2. 워드프레스 사용자 정의 도구(Customizer) 사용하기

워드프레스는 사용자 정의 도구(Customizer)를 통해 기본적인 테마 커스터마이징 작업을 쉽게 할 수 있도록 도와줍니다. 사용자 정의 도구는 워드프레스 대시보드에서 ‘외모’ 메뉴 아래에 있으며, 내용 수정 시 실시간으로 변경 사항을 미리 볼 수 있어 편리합니다.

여기서 할 수 있는 주요 작업은 다음과 같습니다:

  • 로고 및 사이트 아이콘 변경: 웹사이트의 로고와 파비콘(Favicon: 브라우저 탭에 표시되는 작은 아이콘)을 쉽게 변경할 수 있습니다.
  • 색상 설정: 사이트 전체의 색상을 조정하거나, 특정 요소의 색상을 변경할 수 있습니다. 이를 통해 운영하는 블로그 혹은 홈페이지 정체성에 맞는 사이트 디자인을 구현할 수 있습니다.
  • 배경 이미지 및 헤더 이미지 설정: 사이트 배경 또는 헤더 이미지도 이 도구에서 간단하게 변경할 수 있습니다.

3. CSS 수정으로 스타일링 추가하기

기본적인 커스터마이징만으로는 원하는 스타일을 완성할 수 없을 때, CSS를 직접 수정하여 웹사이트의 외관을 필요한 만큼 정교하게 조정할 수 있습니다. 이를 위해서는 약간의 CSS 지식이 필요하지만, 간단한 코드 몇 줄로도 큰 변화를 만들 수 있습니다.

워드프레스에서 CSS를 수정하는 방법에는 두 가지가 있습니다:

  1. 테마의 자녀 테마의 style.css 파일을 수정하는 방법
  2. 사용자 정의 CSS(Custom CSS) 플러그인을 사용하는 방법

간단한 예로, 헤더 메뉴의 색상을 변경하고 싶다면 아래와 같은 CSS 코드를 추가할 수 있습니다:

.header-menu {
    background-color: #000; /* 헤더 배경색을 검은색으로 변경 */
    color: #fff; /* 텍스트 색상을 흰색으로 변경 */
}
CSS

보다 자세한 내용은 아래의 링크를 확인하실 수 있습니다.

워드프레스 디자인, CSS로 완벽하게 커스터마이징하자

4. 플러그인을 이용하기

워드프레스는 다양한 플러그인을 통해 웹사이트의 기능을 확장할 수 있습니다. 플러그인을 통해 복잡한 코딩 없이도 사이트의 외관과 기능을 쉽게 변경할 수 있습니다. 특히 다음과 같은 플러그인들이 테마 임의로 바꿀 때 유용합니다:

  • WPBakery Page Builder: Elementor와 유사한 기능을 제공하며, 직관적인 인터페이스로 초보자도 쉽게 사용할 수 있습니다.
  • Customify: 워드프레스 사용자 정의 도구(Customizer)를 확장하여 더 많은 옵션을 제공하는 플러그인입니다.
  • Elementor: 페이지 빌더 플러그인으로, 드래그 앤드 드롭 방식으로 레이아웃을 자유롭게 설계할 수 있습니다.

이 외에도 다양한 무료 및 유료 플러그인들이 있으며, 필요한 기능에 따라 적절한 플러그인을 선택하는 것이 중요합니다.

단, 플러그인을 과도하게 설치하면 홈페이지 최적화에 악영향을 주므로 최소한의 플러그인 설치를 권장합니다.

5. 추가 코딩

테마를 더욱 고도화하고 싶다면, CSS 외에도 PHP나 자바스크립트를 활용하여 기능을 추가할 수 있습니다. 예를 들어, 스크롤 애니메이션, 슬라이더, 팝업 창 등 다양한 동적인 요소들을 추가하는 것이 가능합니다. PHP를 통해 워드프레스의 기본 동작을 수정하거나, 자바스크립트를 사용해 특정 페이지에서 동작하는 기능을 만들 수도 있습니다. 다만 원활한 사용자 경험을 위해서는 최소한의 자바스크립트 사용을 권장합니다.

하지만 이러한 수준의 임의 수정은 최소한 기초적인 코딩 지식이 필요하므로, 처음 하는 초보자라면 간단한 수정부터 시작하여 점차 난도를 높여가는 것이 좋습니다.

6. 반응형 디자인 구현

오늘날 많은 사용자가 스마트폰을 포함한 모바일 기기에서 웹사이트를 접속하기 때문에, 반응형 디자인을 고려한 커스터마이징은 필수입니다. 반응형 디자인이란, 화면 크기에 따라 사이트 레이아웃이 자동으로 조정되는 방식을 뜻합니다. 대부분의 워드프레스 테마는 기본적으로 반응형을 지원하지만, 원하는 대로 표현되지 않는다면 미세 조정을 해야 할 수도 있습니다.

CSS 미디어 쿼리를 사용하여 화면 크기에 따른 스타일을 변경할 수 있습니다. 예를 들어, 모바일 화면에서 글씨 크기를 바꾸려면 아래와 같은 코드를 추가할 수 있습니다:

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}
CSS

7. 테마 커스터마이징을 할 시 주의할 점

마지막으로, 테마를 커스터마이징할 때 몇 가지 주의할 점이 있습니다:

  • 테마 업데이트: 부모 테마가 업데이트되면 애써서 수정한 내용이 사라질 수 있으므로, 자녀 테마를 사용하는 것이 필수입니다.
  • 호환성 문제 확인: 특정 플러그인이나 테마가 업데이트될 때 발생하는 호환성 문제를 항상 염두에 두고 작업해야 합니다.
  • 백업: 커스터마이징 전에 반드시 백업 해야 합니다. 이렇게 해야만 실수로 사이트가 정상적으로 작동하지 않게 될 경우 쉽게 복구가 가능합니다.

워드프레스 테마 커스터마이징은 사이트의 정체성을 부각할 수 있는 중요한 과정입니다.

처음 할 때는 어려울 수도 있지만, 하다 보면 나만의 홈페이지를 만드는 것에 재미를 느끼실 수 있습니다.

이 글을 참고하셔서 원하시는 사이트를 제작해 보세요.

댓글 남기기