WordPress 테마를 사용자 정의하는 방법
이전에 WordPress 테마를 사용자 정의한 적이 없다면 복잡하다고 생각할 수도 있습니다. 그러나 진실에서 더 이상 벗어날 수 있는 것은 없습니다. 고급 테마 옵션과 함께 제공되는 다양한 WordPress 테마 덕분에 WordPress 사이트의 모양과 기능을 그 어느 때보다 쉽게 변경할 수 있습니다.
Total과 같은 많은 테마에는 페이지 빌더와 사용자 정의 옵션이 내장되어 있으므로 코드를 사용하지 않고도 독특한 웹 사이트를 만들 수 있습니다. 테마가 없다면 디자인 설정을 쉽게 추가하는 데 사용할 수 있는 플러그인이 많이 있습니다. 또는 몇 가지 매우 구체적인 스타일 조정이 필요하거나 코딩 능력에 자신이 있는 경우 하위 테마를 만들어 사이트를 하드 코딩하여 편집할 수도 있습니다.
내장된 옵션으로 테마를 사용자 정의하세요
먼저 테마에 기본 제공 스타일 옵션이 포함되어 있는지 살펴보세요. 많은 테마 개발자는 특히 프리미엄 테마를 사용하는 경우 몇 가지 스타일을 포함합니다. 이는 설정, 템플릿 또는 확장일 수도 있습니다.
테마 패널
많은 프리미엄 테마에는 일부 디자인 관련 설정을 찾을 수 있는 테마 패널이 있습니다. 여기에는 배경 옵션, 색상 옵션, 글꼴 설정, 미디어 옵션 등이 포함될 수 있습니다. 사용 가능한 옵션은 테마에 따라 다릅니다.
예를 들어 Total WordPress 테마에는 색상 팔레트, 머리글 및 바닥글 작성기, 글꼴 관리자 등에 대한 사용자 정의를 찾을 수 있는 테마 패널이 포함되어 있습니다.
라이브 커스터마이저
원래 WordPress 3.4에 도입된 Customizer에는 테마 모양과 관련된 다양한 설정이 포함되어 있습니다. 여기에는 로고 업로드 또는 메뉴 관리를 위한 기본 옵션이 포함됩니다. 그러나 테마 개발자는 여기에 다양한 스타일 설정을 추가할 수도 있습니다.
맞춤설정 도구에 액세스하려면 외관 > 맞춤설정으로 이동하면 됩니다. 여기에서 Customizer가 섹션으로 구성되어 있음을 알 수 있습니다. 기본적으로 사이트 ID(제목 및 사이트 아이콘), 메뉴, 위젯, 홈페이지(홈페이지를 블로그 또는 페이지로 설정) 및 사용자 정의 CSS를 추가할 수 있는 마지막 항목에 대한 것입니다.
그러나 Customizer에서 사용할 수 있는 추가 옵션은 활성 테마 및 플러그인에 의해 추가된 옵션에 따라 달라집니다. 그러나 가장 일반적인 것에는 색상 선택기, 레이아웃 옵션, 사용자 정의 게시물 유형 설정 등이 포함됩니다.
일반적으로 사용자 정의 옵션을 선택하면 전역적으로, 즉 전체 사이트에 적용됩니다. 따라서 로고와 메뉴가 중앙에 위치하는 등 다른 헤더 메뉴 레이아웃을 선택하면 사이트의 모든 페이지에서 그런 식으로 표시됩니다(테마가 페이지별 사용자 정의를 제공하지 않는 한).
Total 테마를 다시 예로 사용하면 Total의 Customizer에서 페이지 헤더, 검색 결과, 페이지 매김, 맨 위로 스크롤, 글꼴, 블로그 게시물 구조, 사용자 정의 게시물 유형 구조, 소셜 링크, 상단 표시줄, 바닥글 설명선에 대한 스타일을 찾을 수 있습니다. , 사이트 응답성 설정 등.
참고: 맞춤설정 기능은 일반적으로 클래식 테마에서 사용할 수 있지만 블록 테마에서는 기본적으로 숨겨져 있습니다. 블록 테마를 사용하는 경우 사이트 스타일을 지정하는 데 필요한 대부분의 옵션은 구텐베르그에서 찾을 수 있습니다.
번들 플러그인
마지막으로 일부 프리미엄 테마에는 스타일을 제공하는 프리미엄 플러그인이 포함될 수 있습니다. 이 경우 포함된 플러그인 또는 "번들" 플러그인을 활성화하기만 하면 됩니다. 이는 종종 다음에 다루게 될 프리미엄 페이지 빌더 또는 CSS 편집기입니다.
페이지 빌더 또는 CSS 편집기를 사용하여 사이트 디자인 사용자 정의
테마 디자인을 사용자 정의하는 가장 쉬운 방법 중 하나는 페이지 빌더나 CSS 편집기를 사용하는 것입니다. 이는 다양한 디자인 사용자 정의 옵션을 추가하는 타사 플러그인(한 가지 예외 포함)입니다.
가장 인기 있는 옵션 중 일부를 살펴보기 전에 페이지 빌더나 CSS 편집기가 다음과 같이 번들로 제공되거나 포함될 필요가 없다는 점을 아는 것이 중요합니다. 테마를 사용할 수 있는 옵션이 있습니다. 많은 테마는 타사 플러그인에 대한 호환성이나 지원을 광고합니다. 따라서 테마의 랜딩 페이지를 확인하거나 테마 및 플러그인 개발자에게 연락하여 선호하는 빌더가 테마와 호환되는지 확인하세요. 또는 무료 옵션의 경우 직접 시험해 보고 결과가 어떻게 나오는지 확인해 보세요!
페이지 빌더
페이지 빌더는 삽입, 재정렬 및 편집할 수 있는 블록이나 요소를 사용하여 사이트 디자인에 대한 레이아웃을 만드는 쉽고 시각적인 방법입니다. 빌더는 여전히 테마의 핵심 스타일을 사용하지만 레이아웃을 자유롭게 디자인하거나 원하는 대로 요소를 결합할 수 있습니다. 이는 제목, 아이콘 상자, 이미지 그리드, 버튼, 그래프 등 여러분이 생각할 수 있는 거의 모든 유형의 콘텐츠에 적용할 수 있습니다! 그리고 각 블록이나 요소에 대해 색상, 글꼴, 패딩, 오버레이, 애니메이션 로딩 등과 같은 항목을 사용자 정의할 수 있는 디자인 설정이 있습니다.
페이지 빌더는 매우 유연하므로 코딩 지식이 필요하지 않으므로 초보자에게 훌륭한 옵션입니다!
구텐베르크(무료)
구텐베르크에 대해 알아보기
WordPress 코어에는 Gutenberg 페이지 빌더가 내장되어 있습니다. 게시물 콘텐츠와 페이지를 만드는 데 사용할 수 있는 블록 기반 편집기이며, 전체 사이트 편집(FSE) 테마를 사용하는 경우 구텐베르그를 사용하여 머리글, 바닥글 및 템플릿 부분을 디자인할 수도 있습니다. Gutenberg는 또한 사이트를 디자인하는 데 사용할 수 있는 무료 레이아웃으로 가득 찬 블록 패턴 라이브러리뿐만 아니라 사용할 수 있는 더 많은 블록 옵션을 추가할 수 있는 다양한 타사 확장 기능도 제공합니다.
Elementor(무료 및 프리미엄)
엘리멘터 받기
또 다른 인기 있는 옵션은 무료 버전과 프로 버전을 제공하는 Elementor입니다. 무료 버전은 향상된 스타일링 기능을 갖춘 40개 이상의 표준 빌더 요소를 제공하는 반면, Pro는 90개 이상의 요소와 바로 사용할 수 있는 템플릿, 키트, 모션 효과, WooCommerce 빌더, 팝업 빌더, 역할 관리자, 슬라이더 등을 제공합니다. 무료 버전은 프로에 비해 다소 제한적이지만 특히 예산이 부족하고 Gutenberg보다 Elementor의 인터페이스를 선호하는 경우 여전히 매우 좋은 빌더 옵션입니다.
WP베이커리 (프리미엄)
WP베이커리 받기
마지막으로 소개하고 싶은 빌더는 WPBakery입니다. 이것은 종종 프리미엄 테마와 함께 번들로 제공되는 프리미엄 페이지 빌더입니다. 이 빌더가 약간 다른 점은 WPBakery와 결합된 많은 테마가 확장된 기능을 제공한다는 것입니다. 이는 추가 빌더 블록이나 기능 최적화인 경우가 많습니다. 예를 들어 Total에는 SEO 최적화 슬림 모드를 위한 테마별 빌더 설정과 함께 WPBakery가 포함되어 있습니다.
CSS 편집자
CSS 편집기는 사이트 디자인을 사용자 정의하는 데 사용할 수 있는 또 다른 유형의 플러그인입니다. 특히 처음부터 사이트를 생성할 수 있는 옵션을 제공하는 페이지 빌더와 달리 기존 사이트 레이아웃 및 디자인 기능의 스타일을 변경할 수 있습니다. 예를 들어, 홈페이지 제목에 사용된 글꼴 색상을 변경하고 싶지만 사용자 정의 코드를 직접 추가하는 것이 불편하다면 CSS 편집기를 사용할 수 있습니다.
CSS 히어로(프리미엄)
CSS 히어로 받기
최고의 포인트 앤 클릭 CSS 편집기 중 하나는 CSS Hero입니다. 이 프리미엄 옵션을 사용하면 WordPress 사이트 전체에서 CSS 스타일 옵션을 사용할 수 있으므로 테마가 특정 색상이나 간격 옵션을 제공하지 않더라도 전체 사이트 레이아웃과 디자인을 편집할 수 있습니다. 다른 기능으로는 바로 사용할 수 있는 코드 조각, 코드 검사기, 실시간 미리 보기, 브랜드 색상 지원, 작업 흐름 기록(저장 지점 포함) 등이 포함됩니다.
비주얼 CSS 스타일 편집기(무료)
Visual CSS 스타일 편집기 설치
또 다른 CSS 편집기 옵션은 무료 Visual CSS 스타일 편집기입니다. 이는 색상, 글꼴, 문자 간격, 패딩, 테두리 반경, 불투명도 등과 같은 60개 이상의 CSS 속성을 대상으로 합니다. 프리미엄 버전이 있지만 주로 무료 플러그인을 권장합니다.
사용자 정의 코드를 추가하려면 하위 테마를 생성하세요.
마지막으로, 코딩에 익숙하다면 하위 테마를 사용하는 것이 WordPress 테마를 사용자 정의하는 또 다른 방법입니다. 두 가지 큰 이유 때문에 테마 파일을 직접 맞춤설정해서는 안 됩니다. 첫째는 테마를 업데이트할 때마다 모든 변경 사항이 손실되는 것을 방지하고 둘째는 보안을 위해 테마를 최신 상태로 유지하기 위해서입니다. 하위 테마를 사용하면 상위 테마를 직접 편집하지 않고도 꿈에 그리던 사이트를 구축할 수 있습니다.
하위 테마의 스타일시트 파일(style.css)을 사용하면 몇 줄의 코드로 전체 웹사이트의 모양을 변경할 수 있습니다. function.php라는 특별한 PHP 파일을 사용하면 기능을 추가하거나 사이트를 구조적으로 변경할 수 있습니다. 한 단계 더 나아가 하위 테마용 템플릿 파일을 생성하면 테마의 디자인과 구조를 완벽하게 제어할 수 있습니다.
어린이 테마가 설정되면 원하는 대로 테마를 바꿀 수 있습니다. CSS, HTML, JavaScript, PHP 및 WordPress 기능에 대한 이해에 따라 제한이 있습니다.
<p>이러한 도구를 사용하면 WordPress 테마 및 사이트 디자인을 사용자 정의할 수 있습니다! 대부분의 사용자는 테마에 내장된 디자인 설정을 따르거나 타사 페이지 빌더 또는 CSS 편집기를 사용하는 것이 좋습니다. 학습 기간이 매우 짧으며 디자인을 변경하는 데 필요한 모든 옵션을 제공합니다.