WordPress 테마를 맞춤 설정하는 방법 (단계별 5 가지 방법)

WordPress 테마를 설치했지만 자신에게 적합하지 않은 경우 답답할 수 있습니다. WordPress 테마를 맞춤 설정할 수있는 다양한 옵션이 있습니다.

올바른 방법을 찾는 것이 문제입니다.

이 게시물에서는 다음 내용을 안내해 드리겠습니다. WordPress 테마 사용자 지정 옵션, 자신에게 적합한 테마를 결정하고 안전하고 효율적으로 수행하는 방법을 보여줍니다.

비디오 버전을보고 싶으십니까? 아래에서 재생을 클릭하십시오.

테마 사용자 지정 옵션

테마에 들어가서 변경을 시작하기 전에 다양한 상황에 적합한 옵션이 무엇인지 이해하는 것이 좋습니다.

다음은 사용 가능한 옵션에 대한 개요입니다.

• 테마에 기능을 추가하려면 플러그인을 설치하세요.
• 테마에 따라 글꼴, 색상 및 레이아웃을 맞춤 설정할 수있는 WordPress 관리자 화면의 맞춤 설정 도구입니다.
• 페이지 빌더 테마로 작업하는 경우 해당 기능을 사용하여 사이트 디자인을 맞춤 설정하세요.
• 프레임 워크 테마를 설치 한 경우 사용 가능한 하위 테마 중 하나를 사용하여 사이트를 맞춤 설정하고 관리 화면을 소유 할 수있는 맞춤 설정 옵션을 사용하세요.
• 테마가 다음과 같은 경우 사이트에 고유하고 편하게 할 수 있으면 테마 코드를 직접 편집하십시오.
• 타사 테마의 코드를 편집하려면 하위 테마를 만드십시오.

코드를 편집하려는 경우 에서는 블록 편집기 사용에서 사용자 정의 프로그램, 파일 편집에 이르기까지 다양한 옵션을 사용할 수 있습니다. 이 게시물에서 모두 살펴 보 겠지만 가장 간단한 옵션 인 플러그인 설치부터 시작하겠습니다.

테마를 사용자 정의해야합니까?

때로는 그렇지 않습니다. 테마를 전혀 맞춤 설정할 필요가 없습니다. 대신 플러그인을 설치해야합니다.

테마는 사이트의 디자인과 콘텐츠 표시 방식을 결정합니다. 플러그인은 추가 기능을 추가합니다.

변경하려는 변경 사항이 디자인이 아닌 기능에 초점을 맞춘 경우 플러그인을 직접 설치하는 것이 좋습니다. 작성해야하는 플러그인, 플러그인 디렉토리에서 다운로드 한 플러그인 또는 구매 한 플러그인 일 수 있습니다.

테마에서 functions.php 파일을 편집하고 싶은 경우 다음과 같이 자문 해보십시오.

나중에 테마를 전환해도이 기능을 유지 하시겠습니까?

답이 ‘예’인 경우 해당 코드는 테마가 아닌 플러그인에 있어야합니다.

위젯 추가, 사용자 지정 게시물 유형 및 분류를 등록하는 등 테마 대신 플러그인을 사용하는 좋은 예 , 사용자 정의 필드를 만들고 상점 또는 SEO 향상과 같은 추가 기능을 추가합니다.

WordPress 관리 화면을 통해 WordPress 테마 사용자 정의

변경하려는 변경 사항이 디자인 중심이고 비교적 간단하지만 관리자 화면을 통해 만들 수 있습니다. 맞춤 설정 도구는 테마를 조정할 수있는 다양한 옵션을 제공합니다. 테마에 따라 사용할 수있는 항목이 다릅니다. 그리고 Appearance 메뉴에서 Editor라는 것을 볼 수 있습니다. 잠시 후 설명하겠습니다.

사용자 지정 프로그램을 통해 테마 사용자 지정

WordPress 테마를 사용자 지정하는 가장 쉬운 방법은 WordPress 사용자 지정 프로그램을 사용하는 것입니다.

다음 두 가지 방법 중 하나로 액세스합니다.

• 사이트를 볼 때 (로그인 한 상태에서) 화면 상단의 관리 표시 줄에서 맞춤 설정 링크를 클릭합니다.
• 관리자 화면에서 모양 > 사용자 지정을 클릭합니다.

사용자 지정 도구로 이동합니다.

위 스크린 샷에서 많은 사용자 정의 옵션이있는 ColorMag라는 무료 테마를 설치했습니다. 헤더 이미지, 소셜 미디어, 카테고리 색상 및 사이트의 레이아웃과 디자인을 변경할 수있는 더 많은 탭으로 이동하는 디자인 옵션 탭을 포함한 디자인 기능에 대한 섹션이 Customizer에 추가되었습니다.

테마마다 사용자 정의 옵션이 다르지만 최신 테마는 점점 더 많은 것을 추가하는 것 같습니다. 마음에 드는 테마를 찾았지만 자신에게 적합하지 않은 경우 테마를 사용자 지정하면 필요한 디자인과 레이아웃을 정확하게 얻을 수 있습니다.

테마 편집기 (및 사용하지 않는 이유) it)

관리자 화면에서 테마 편집기라는 옵션을 볼 수 있습니다. 테마 편집기는 모양 > 테마 편집기를 통해 표시됩니다.

테마의 파일에 액세스 할 수 있습니다. 즉, 직접 편집 할 수 있습니다.

하지 마십시오.

CSS 또는 PHP 작성에 익숙하더라도 다음 두 가지 이유로 테마의 파일을 이와 같이 편집하는 것은 매우 나쁜 생각입니다.

• 타사 테마를 구입하거나 다운로드 한 경우 다음에 테마를 업데이트 할 때 변경 한 내용이 손실됩니다 (보안상의 이유로 테마를 업데이트해야 함).
• 더 중요한 것은 사이트를 손상시키는 변경 사항은 추적되지 않으며 파일의 이전 버전은 변경되지 않습니다. 사이트를 돌이킬 수 없게 파괴 할 수 있습니다.

테마의 코드를 편집하려면 코드 편집기를 사용하여 수행해야합니다 (최고의 무료 HTML 편집기 확인). 준비 사이트에서 테스트 할 때까지 라이브 사이트의 파일을 편집하지 마십시오. 타사 테마를 편집해야하는 경우 하위 테마를 통해 편집해야합니다. 이 게시물의 뒷부분에서이 두 가지에 대해 자세히 알아 봅니다.

WordPress는 테마 편집기를 사용하는 것이 얼마나 안전하지 않은지 알고 있습니다. 액세스하려고 할 때 경고를 표시하기도합니다.

WordPress의 조언을 따르십시오. 테마 편집기를 사용하세요!

페이지 빌더 및 프레임 워크를 사용하여 WordPress 테마 사용자 지정

대부분의 WordPress 테마에는 사용자 지정 옵션이 있습니다. 즉, 다음을 통해 디자인 및 레이아웃을 변경할 수 있습니다. 하지만 일부 테마는이를 더 확장하고 크게 사용자 정의하도록 설계되었습니다. 이러한 테마를 테마 프레임 워크라고합니다.

또 다른 옵션은 사용자 친화적 인 인터페이스를 사용하여 사이트를 디자인 할 수있는 플러그인을 사용하는 것입니다.이를 페이지 빌더라고합니다.

페이지 사용 테마를 사용자 정의하는 빌더

페이지 빌더 플러그인은 사용자가 얻고있는 것을 볼 수있는 인터페이스를 사용하여 사이트 디자인을 쉽게 설정할 수 있도록 설계되었습니다.

호환 가능한 테마로 페이지 빌더 플러그인을 설치 한 다음 제공되는 옵션을 사용하여 사이트를 원하는 방식으로 정확하게 디자인합니다.

가장 잘 알려진 페이지 빌더 중 하나는 Elementor입니다. 페이지 빌더 모음에서 몇 가지 대안에 대해 알아볼 수 있습니다.

페이지 빌더를 사용하면 드래그 앤 드롭 인터페이스로 게시물과 페이지를 편집 할 수 있습니다. 즉, 콘텐츠가 어떻게 보이고 각 페이지를 고유하게 만들 수 있습니다.

아래에서는 호환되는 Hello Elementor 테마와 함께 Elementor 페이지 빌더를 사용하고 있습니다.

페이지 빌더는 페이지의 레이아웃과 디자인에 많은 유연성을 제공합니다. Wix와 같은 웹 사이트 빌더에 익숙하다면 WordPress로 쉽게 전환 할 수 있습니다. WordPress 콘텐츠에 WYSIWYG 인터페이스를 선호하는 경우 페이지를 빠르게 디자인하는 데 도움이 될 수 있습니다.

테마 프레임 워크를 사용하여 테마 사용자 지정

페이지 빌더의 대안은 테마입니다. 프레임 워크. 함께 작동하도록 설계된 테마 모음입니다. 프레임 워크 인 하나의 상위 테마와 기본 테마를 사용자 정의하고 원하는 방식으로 보이게하는 데 사용할 수있는 하위 테마를 선택할 수 있습니다.

테마 프레임 워크의 예는 Divi입니다. 페이지 빌더와 유사한 드래그 앤 드롭 인터페이스를 포함하여 하위 테마의 디자인을 더욱 세부적으로 조정할 수있는 사용자 정의 옵션입니다.

WordPress 테마 코드 편집

CSS 및 / 또는 PHP 편집에 익숙하다면 다음을 수행 할 수 있습니다. 테마의 코드를 수정하여 테마를 맞춤 설정하세요.

이렇게하면 최대한의 제어가 가능합니다.

사이트 및 사이트에 고유 한 테마를 수정하는 경우 특별히 개발되었으므로 테마를 직접 편집 할 수 있습니다. 그러나 타사 테마로 작업 중이고이를 편집하려면 다음에 테마를 업데이트 할 때 변경 사항이 손실되지 않도록 하위 테마를 만들어야합니다.

테마 파일 편집

WordPress 테마를 편집하는 첫 번째 단계는 어떤 테마 파일이 무엇을 제어하고 편집해야하는지 이해하는 것입니다.

스타일 시트

모든 WordPress 테마에는 style.css라는 스타일 시트. 여기에는 레이아웃, 글꼴, 색상 등 사이트 스타일 지정을위한 모든 코드가 포함되어 있습니다.

예를 들어 테마의 색상을 변경하려는 경우 스타일 시트를 수정할 수 있습니다. 새 글꼴을 추가하려면 스타일 시트를 사용하여 본문 텍스트 및 제목과 같은 다른 요소에 적용합니다.

스타일 시트를 편집 할 때주의하세요. 특이성은 요소의 코드가 항상 사용자의 위치에서 오는 것은 아니라는 것을 의미합니다. 그렇다고 생각합니다.하위 요소에 특정한 스타일을 추가하지 않는 한, 요소는 페이지의 계층 구조에서 상위에있는 다른 요소의 스타일을 상속받습니다.

페이지의 어떤 요소에 영향을 미치는 CSS를 확인하려면 다음을 수행하십시오. 브라우저의 검사기를 사용하여 CSS를 봅니다 (이 예에서는 Chrome DevTools) :

그러면이를 사용하여 페이지의 개별 요소 또는 다양한 요소 또는 클래스를 대상으로하는 새 CSS를 작성할 수 있습니다.

요소, 클래스 및 특수성에 대한이 모든 이야기가 처음 인 경우 테마의 CSS를 직접 편집하지 않는 것이 좋습니다. 적어도 CSS와 그 작동 방식에 대해 더 많이 배우기 전까지는 요.

함수 파일

거의 모든 테마가 가질 또 다른 파일은 함수 파일 (functions.php)입니다. . 이것은 당신의 테마에서 많은 것들을 작동시키는 파일입니다. 그 안에는 추천 이미지, 위젯 등과 같은 테마 기능을 등록하는 코드가 있습니다.

테마에 기능 코드를 추가하고 싶다면 여기에 추가 할 수 있습니다. 그러나주의하십시오. 대부분의 경우 플러그인을 작성해야합니다. 스스로에게 물어보십시오.

나중에 테마를 변경해도이 기능을 유지 하시겠습니까?

답이 예인 경우 함수 파일에 코드를 추가하는 대신 플러그인을 작성하십시오. 플러그인이 클 필요는 없습니다. 몇 줄의 코드로 플러그인을 생성하는 것을 막을 수는 없습니다.

함수 파일은 모두 PHP로 작성되었으므로 익숙해 져야합니다. 그. Google 검색을 통해 찾은 코드를 맹목적으로 복사하지 마세요. 코드의 기능을 파악하고 이해하는 데 시간을 할애하세요. 그렇게하면 좋지 않은 코드를 추가 할 가능성이 줄어 듭니다.

테마 템플릿 파일

테마에있는 대부분의 파일은 테마 템플릿 파일입니다. . WordPress가 특정 페이지에 출력하는 콘텐츠를 결정하는 파일이며 템플릿 계층 구조에 따라 선택됩니다.

주어진 게시물 유형, 페이지 또는 아카이브에서 콘텐츠가 출력되는 방식을 변경하려는 경우 , 이러한 파일 중 하나를 편집하거나 새 파일을 만들어야합니다.

예를 들어 테마에 카테고리 및 태그에 대한 아카이브 페이지를 출력하는 데 사용되는 archive.php 파일이 있다고 가정 해보십시오. 태그가 출력되는 방식을 변경하려고합니다. 따라서 “tag.php”라는 파일을 생성합니다.이 파일은 조정을 통해 archive.php를 기반으로합니다.

다시 한 번주의해서 파일을 편집하면 사이트가 손상 될 수 있습니다. 항상 로컬에서 테스트하십시오. 먼저 DevKinsta 및 / 또는 스테이징 사이트와 같은 도구를 사용하여 설치하십시오.

어떤 파일 형식을 편집해야하든 올바르게 수행해야합니다. 아래의 모범 사례 섹션을 읽고 편집 방법을 알아보십시오. 사이트를 손상시키지 않고 보안 문제를 일으키지 않는 방식으로 코드를 작성합니다.

하위 테마로 타사 테마 사용자 지정

사이트에서 실행하는 것은 타사에서 제공 한 것이며 코드를 편집하려면 하위 테마를 만들어야합니다.

이는 테마를 직접 편집 한 다음 업데이트 ( 변경 사항을 모두 잃게됩니다.

하위 테마 만들기는 4 단계로 구성됩니다.

1. wp-content /에 새 폴더 만들기 테마.
2. 그 폴더에서 스타일 시트를 만듭니다. 해당 스타일 시트에서 tel l WordPress에서 기존 테마의 하위 테마임을 확인합니다.
3. 편집 할 파일의 사본을 하위 테마에 추가하고 거기에서 편집합니다.
4. 다음에서 하위 테마를 활성화합니다. 귀하의 사이트.

WordPress는 상위 테마의 계층 구조에서 더 높은 파일이없는 한 항상 하위 테마의 파일을 사용하여 콘텐츠를 출력합니다. 동일한 파일의 두 가지 버전이있는 경우 하위 테마의 버전을 사용합니다. 즉, 하위 테마의 새 파일이 상위 테마의 파일을 재정의합니다.

WordPress 테마 사용자 지정 모범 사례

테마를 사용자 지정할 계획입니다. 계속 진행하여 변경하기 전에 다음 팁을 따라 안전하게 수행하고 사이트를 손상 시키거나 공격에 취약하게 만들거나 코드를 잃어 버리지 않도록하십시오.

가능한 경우 , 코드를 편집하지 않고 사용자 지정

사용자 지정 도구 또는 관리자 화면의 다른 곳에서 사용자 지정을 수행 할 수있는 경우 코드를 편집하는 것보다 안전합니다.

알고있는 경우에만 코드를 편집하십시오. CSS (스타일 시트 용) 및 PHP (기타 테마 파일 용)에 익숙하고 안전하게 수행하는 방법을 알고 있습니다.

로컬 개발 사이트를 사용하여 변경

테마의 코드를 편집하거나 변경하기 위해 하위 테마를 만드는 경우에는 다음에서 개발 작업을 수행해야합니다. 테마가 설치된 WordPress 로컬 설치 및 라이브 사이트에서 복사 한 콘텐츠.

이렇게하면 라이브 사이트의 미러를 통해 변경 사항을 테스트 할 수 있습니다. 로컬 사이트에서 작업하는 것은 라이브 사이트에 영향을주지 않으며 더 빨라질 수 있습니다.

사용자 정의 프로그램을 사용하는 경우에도 사이트의 로컬 버전을 사용하여 테스트하는 것이 도움이 될 수 있습니다. 변경 사항을 게시하고 라이브 사이트에 영향을주지 않고 테스트 할 수 있습니다.

테마 변경 사항을 테스트 한 후에는 라이브 사이트에 업로드하거나 더 나은 방법으로 테스트 할 수 있습니다. 스테이징 사이트를 실행 한 다음 게시합니다.

버전 제어 사용

테마를 변경할 때 버전 제어를 사용하여 변경 사항을 추적해야합니다.

간단하게 말하자면 테마의 버전 번호를 변경하고 두 버전의 복사본을 유지하는 것을 의미합니다. 하지만 버전 제어를 제대로 수행하려면 GitHub와 같은 서비스를 사용하여 변경 사항을 추적해야합니다.

이렇게하면 변경 사항으로 인해 문제가 발생하면 수동으로 만들지 않고도 쉽게 롤백 할 수 있습니다. 수정.

버전 제어는 팀의 일원으로 작업하는 경우 훨씬 더 유용합니다. 다른 구성원이 무엇을하고 있는지 볼 수 있기 때문입니다. git vs Github 가이드를 꼭 읽어보세요.

준비 사이트를 사용하여 변경 사항 테스트

준비 사이트에 액세스 할 수있는 경우 (예 : 모든 제품과 함께 제공되는 Kinsta의 무료 준비) 계획), 라이브 사이트에서 테마의 새 버전 (또는 새 하위 테마)을 활성화하기 전에이를 테스트하는 것이 가장 안전한 방법입니다.

이것은 로컬 사이트가 라이브 사이트와 약간의 차이가 있기 때문입니다. 다른 서버에 있습니다 (하나는 로컬 컴퓨터), 다른 버전의 PHP 또는 사이트를 실행하는 다른 도구를 실행 중일 수 있습니다.

스테이징 서버에서 라이브 사이트의 복사본을 만든 다음 새 버전을 업로드하고 활성화합니다. 테마. 사이트를 철저히 테스트하여 모든 것이 작동하는지 확인한 다음 변경 사항을 라이브 사이트에 푸시 할 수 있습니다.

테마를 반응 형으로 만들기

테마를 변경해야하는 경우 모바일뿐 아니라 데스크톱에서도 작동합니다.

휴대 전화를 통해 인터넷에 액세스하는 사람이 점점 더 늘어나고 Google의 모바일 우선 색인이 증가함에 따라 테마가 모바일에서 작동하는 것이 더 중요 할 것입니다. 데스크탑에서합니다. 따라서 테마에 대한 모든 변경 사항은 모바일 친화적이어야하거나 관련이있는 경우 모바일 우선이어야합니다.

이것은 주로 스타일 또는 레이아웃에 대한 모든 변경 사항에 적용됩니다. 새 레이아웃이 작동하는지 확인하십시오. 레이아웃이 다양한 화면 크기에 맞게 조정되도록 미디어 쿼리를 추가했습니다.

테마가 반응하지 않으면 검색 엔진 순위와 전환율에 부정적인 영향을 미칩니다.

p>

테스트 할 여러 모바일 장치에 액세스 할 수없는 경우 BrowserStack과 같은 도구를 사용하여 사이트가 다른 장치에서 어떻게 보이는지 확인할 수 있습니다. 브라우저의 개발자 도구와 사용자 정의 프로그램의 반응 형보기를 사용할 수도 있습니다.

사용자 지정이 접근성에 영향을 미치지 않도록 확인

테마 변경 사항은 장애 나 감각 장애가있는 사용자도 액세스 할 수 있어야합니다. .

사이트가 스크린 리더에서 작동하는지 확인하는 것만이 아닙니다. 색 구성표 및 글꼴 크기와 같은 다른 고려 사항은 많은 사람들에게 중요합니다.

변경되는 경우 테마를 만드는 것은 색상을 더 밝게하거나 텍스트를 더 작게 만드는 것입니다. 다시 생각해보십시오. 이렇게하면 사람들이 사이트를 읽거나 상호 작용하는 것이 어려울 수 있습니다.

변경 사항을 적용하기 전에 접근성 검사기를 사용하여 사이트를 테스트하고 사람들을 제외하지 않는지 확인하세요.

WordPress 코딩 표준을 고수하세요

테마에서 코드를 수정하거나 만드는 경우 치 코드가 WordPress 코딩 표준과 일치하는지 확인해야합니다.

이러한 표준은 코드의 일관성과 품질을 보장하고 코드가 엉망이되는 것을 방지하기 위해 존재합니다. PHP, CSS 및 JavaScript에 대한 표준이 있으므로 자신과 관련된 표준을 확인하고 따라야합니다.

기존 WordPress 테마가 잘 코딩되어 있고 새로 작성하는 경우 일관된 방식으로 코드를 작성하면 코드가 규정을 준수하는지 확인할 수 있습니다. 테마에 대한 변경 사항에 주석을 추가하여 나중에 코드 작업을 위해 돌아 왔을 때 수행 한 작업을 본인이나 다른 사람이 알 수 있도록하십시오.잊지 않을 것이라고 생각할 수도 있지만 몇 달이 지나면 코드 줄을 편집 한 이유를 놀랍게도 쉽게 잊을 수 있습니다.

#WordPress 테마를 고유하게 사용자 정의해야합니까? 많은 옵션이 있습니다! 심층 가이드에서 귀하에게 맞는 것을 선택하십시오! 👚👔 트위트하려면 클릭

요약

WordPress 테마를 맞춤 설정하는 것은 그리 어렵지 않습니다. 맞춤 설정 도구를 사용하여 글꼴이나 색상을 변경하는 간단한 경우도 있습니다 (WordPress 글꼴에 대한 심층 가이드를 읽어보세요). 다른 경우에는 테마에 새 템플릿 파일을 추가하기 위해 새 하위 테마를 만들어야합니다.

테마를 사용자 지정하는 데 사용할 수있는 옵션에는 플러그인 또는 사용자 지정 도구 사용, WordPress 테마의 코드 직접 편집이 포함됩니다. , 또는 하위 테마를 만듭니다.

사이트를 손상시키지 않고 나에게 적합한 옵션을 식별하고 안전하게 맞춤 설정하세요.