5단계로 사용자 정의 WordPress 테마를 쉽게 구축하는 방법

게시 됨: 2022-07-19

소규모 비즈니스 웹사이트를 위한 맞춤형 WordPress 테마를 구축하시겠습니까?

WordPress 테마 개발은 테마 디자인을 처음부터 코딩하거나 값비싼 개발자를 고용하지 않고는 어려웠습니다. 그러나 요즘에는 간편한 드래그 앤 드롭 기능을 사용하여 시각적으로 테마를 만들 수 있는 강력한 WordPress 플러그인을 사용할 수 있습니다.

이 기사에서는 코드 한 줄을 건드리지 않고 처음부터 WordPress 테마를 만드는 방법을 보여줍니다.

목차
  1. 1단계. SeedProd 플러그인 설치 및 활성화
  2. 2단계. WordPress 테마 템플릿 선택
  3. 3단계. 테마 부분 사용자 지정
  4. 4단계. 이메일 마케팅 서비스 연결
  5. 5단계. 사용자 정의 WordPress 테마 게시

WordPress 테마를 사용자 정의하는 이유는 무엇입니까?

인터넷은 표적 청중의 관심을 끌기 위해 경쟁하는 수백만 개의 웹사이트로 바쁘게 움직입니다. 눈에 띄고 다른 사람임을 보여주는 한 가지 방법은 웹에서 집을 맞춤설정하는 것입니다. 즉, 웹사이트입니다.

많은 WordPress 웹 사이트 소유자는 기본 테마를 바로 사용하기 때문에 사용자 정의하면 사이트가 경쟁자보다 눈에 띄게 될 수 있습니다. 또한 맞춤형 WordPress 테마를 사용하면 브랜드의 개성을 더 쉽게 선보이고 리드 생성 기능을 추가하며 웹사이트의 속도와 성능을 개선할 수 있습니다.

처음부터 WordPress 테마를 어떻게 구축합니까?

대부분의 WordPress 테마는 HTML, CSS, PHP 및 JavaScript 코딩 언어로 만들어집니다. 이러한 언어를 배우려면 많은 웹사이트 소유자에게 현실적이지 않은 시간과 훈련이 필요합니다.

즉, 유일한 옵션 중 하나는 개발자 또는 개발 에이전시를 고용하여 맞춤형 테마를 구축하는 것입니다. 결과적으로 맞춤형 WordPress 사이트 비용은 수천 달러에 달할 수 있습니다.

또 다른 옵션은 SeedProd를 사용하여 사용자 정의 WordPress 테마를 만드는 것입니다. 이 강력한 WordPress 플러그인은 초보자라도 누구나 WordPress 테마의 모든 측면을 사용자 정의하는 데 사용할 수 있는 간편한 드래그 앤 드롭 인터페이스와 함께 제공됩니다.

왜 SeedProd를 사용해야 합니까?

SeedProd는 가장 사용자 친화적인 WordPress용 웹사이트 빌더 플러그인입니다.

seedprod WordPress website builder

여기에는 광범위한 사용자 지정 옵션이 포함되어 있으며 다음과 같은 다양한 기능을 제공합니다.

  • 워드프레스 테마 빌더
  • 170개 이상의 방문 페이지 템플릿
  • 전체 WordPress 테마 키트
  • 드래그 앤 드롭 빌더
  • 이메일 마케팅 통합
  • 가져오기/내보내기 기능
  • 가입자 관리
  • 출시 예정 및 유지 관리 모드
  • 그리고 훨씬 더.

이전에는 SeedProd를 사용하여 기존 테마 내에서 랜딩 페이지만 만들 수 있었습니다. 그러나 게임을 바꾸는 몇 가지 업데이트 후에 동일한 끌어서 놓기 빌더로 전체 WordPress 테마를 만들 수 있습니다.

즉, 코딩 없이 웹사이트를 위에서 아래로 사용자 지정할 수 있으므로 수행 방법을 알아보겠습니다.

SeedProd로 맞춤형 WordPress 테마 만들기

이 자습서에서는 도메인에서 호스팅되는 WordPress 사이트가 이미 있다고 가정합니다. 그렇지 않은 경우 WordPress 웹 사이트 생성에 대한 이 단계별 가이드를 따를 수 있습니다.

SeedProd는 현재 WordPress 테마를 처음부터 만들 테마로 대체하므로 개발 환경을 사용하는 것이 좋습니다. 이렇게 하면 게시할 준비가 될 때까지 변경 사항이 라이브 웹사이트에 영향을 미치지 않습니다.

Bluehost와 같은 인기 있는 WordPress 호스팅 서비스는 호스팅 패키지와 함께 스테이징 및 개발 환경을 제공합니다.

bluehost WordPress hosting

스테이징 환경을 생성할 뿐만 아니라 시작하기 전에 사이트를 백업해야 합니다. 이렇게 하면 문제가 발생할 경우 웹사이트를 복원할 수 있습니다. WordPress용 최고의 백업 플러그인은 이 게시물을 참조하세요.

위의 준비가 끝나면 아래 단계에 따라 사용자 정의 WordPress 테마 구축을 시작할 수 있습니다.

1단계. SeedProd 플러그인 설치 및 활성화

첫 번째 단계에서는 WordPress 사이트에 SeedProd 플러그인을 설치하고 활성화해야 합니다. 이 단계에서 도움이 필요한 경우 WordPress 플러그인 설치에 대한 자세한 가이드를 따르세요.

테마 빌더 기능을 잠금 해제하려면 SeedProd Pro 라이선스를 선택해야 합니다. 이렇게 하면 플러그인의 설정 페이지에 입력할 수 있는 라이센스 키가 제공됩니다.

라이센스 키를 찾으려면 SeedProd 계정에 로그인하고 다운로드 탭을 클릭한 다음 복사 아이콘을 클릭하여 키를 클립보드에 저장합니다.

Copy the SeedProd license key

그런 다음 WordPress 관리자로 이동하여 SeedProd » 설정 으로 이동하여 키를 '라이선스 키' 필드에 붙여넣습니다. 그런 다음 키 확인 버튼을 클릭하여 변경 사항을 저장합니다.

Paste the SeedProd license key in WordPress

이제 SeedProd » 테마 빌더 페이지로 이동하여 SeedProd가 테마의 다양한 요소를 표시합니다.

SeedProd theme builder

SeedProd로 맞춤형 WordPress 테마를 만드는 방법에는 두 가지가 있습니다. 테마의 각 부분을 처음부터 만들거나 미리 만들어진 템플릿을 사용하여 웹사이트 요구 사항에 맞게 각 부분을 사용자 지정할 수 있습니다.

각 WordPress 테마는 다음을 포함하여 템플릿 파일이라는 여러 부분으로 구성됩니다.

  • 헤더
  • 보행인
  • 단일 게시물
  • 단일 페이지
  • 아카이브 또는 블로그 페이지
  • 검색 결과
  • 글로벌 부분
WordPress theme template files

처음부터 테마를 만드는 것이 처음이라면 이것은 상당히 압도적일 수 있습니다. 따라서 미리 만들어진 테마 템플릿으로 시작하는 것이 좋습니다.

SeedProd에는 한 번의 클릭으로 테마 구조를 설정하는 다양한 반응형 테마 템플릿이 있습니다. 각 템플릿 파일을 자동으로 생성하지만 고유한 사용자 정의로 각 파일을 편집할 수도 있습니다.

이 가이드의 나머지 부분에서는 사용자 지정 테마를 구축하는 데 가장 초보자에게 친숙한 접근 방식이기 때문에 테마 템플릿을 사용하여 사용자 지정 프로세스의 각 단계를 보여줍니다.

2단계. WordPress 테마 템플릿 선택

SeedProd의 모든 테마 템플릿을 보려면 테마 버튼을 클릭하십시오.

Click the themes button

포트폴리오, 여행, WooCommerce 매장, 부동산, 이벤트 등 다양한 유형의 웹사이트에 대한 테마를 보여주는 창이 열립니다.

이 튜토리얼에서는 시작 테마 를 사용할 것이므로 테마 이미지 위에 마우스를 놓고 주황색 체크 표시 아이콘을 클릭합니다.

Choose a WordPress theme template

테마 템플릿을 가져오기 위해 클릭하는 즉시 SeedProd는 테마 부분을 자동으로 생성합니다.

Custom WordPress theme template parts

특정 테마 부분이 필요하지 않은 경우 게시됨 제목 아래의 토글을 '아니요' 위치로 클릭하여 끄십시오.

Turn off a WordPress theme part

'조건 수정' 링크를 클릭하여 각 부분의 조건을 변경할 수도 있습니다.

edit theme part conditions

그러면 부품의 이름, 유형, 우선 순위 및 웹 사이트에서 부품이 표시되어야 하는 위치를 선택할 수 있는 창이 열립니다.

Theme part condition settings

대부분의 경우 이러한 설정을 변경할 필요가 없으며 바로 각 부품의 모양을 사용자 정의할 수 있습니다.

3단계. 테마 부분 사용자 지정

이제 테마의 필수 부분이 설정되었으므로 원하는 방식으로 디자인을 사용자 지정할 수 있습니다. 템플릿 파일을 수정하려면 해당 파일 위에 커서를 놓고 '디자인 수정' 링크를 클릭하세요.

Customize a theme part

이 가이드의 머리글, 바닥글, 홈 및 블로그 부분을 사용자 지정합니다. 다른 테마 부분을 사용자 정의하는 것도 동일한 원칙을 따릅니다.

WordPress 머리글 및 바닥글 사용자 지정

머리글을 사용자 지정하려면 머리글 템플릿 위로 커서를 이동하고 디자인 편집 을 클릭합니다.

Edit WordPress header design

다음 화면에서 SeedProd의 테마 빌더 인터페이스를 볼 수 있습니다. 실시간 미리보기의 아무 곳이나 가리키고 클릭하면 왼쪽 패널에서 각 요소의 설정을 볼 수 있습니다.

SeedProd WordPress theme builder interface

기본 SeedProd 로고를 클릭하여 이미지 블록 설정을 열어 시작하겠습니다. 콘텐츠 설정 패널에서 휴지통 아이콘을 클릭하여 기본 이미지를 삭제하고 컴퓨터 또는 WordPress 미디어 라이브러리에서 새 로고를 업로드할 수 있습니다.

Customize WordPress logo

동일한 패널에서 이미지 크기, 정렬을 변경하고 로고에 사용자 정의 링크를 제공할 수 있습니다. 예를 들어 로고를 클릭하는 방문자를 홈페이지로 리디렉션할 수 있습니다.

seedprod image block settings

행 설정 아이콘을 클릭하여 머리글 배경색을 변경할 수도 있습니다. 여기에서 배경 이미지, 색상 또는 사용자 정의 배경 그라디언트를 추가할 수 있습니다.

Header row customization options

그런 다음 라이브 미리 보기에서 메뉴 블록을 클릭하여 탐색 메뉴를 사용자 지정합니다. SeedProd는 기본적으로 2가지 메뉴 옵션이 있는 이 섹션에 대해 탐색 메뉴 블록을 사용합니다.

  • 단순: 빌더 인터페이스에서 개별적으로 메뉴 링크 추가
  • WordPress 메뉴 : 기본 WordPress 메뉴를 사용하여 탐색 표시
Navigation menu block settings

메뉴 유형을 선택한 후 고급 탭을 클릭하고 메뉴 링크 색상, 타이포그래피, 스타일 등을 변경할 수 있습니다.

Advanced navigation menu settings

헤더 디자인이 마음에 들면 오른쪽 상단 모서리에 있는 저장 버튼을 클릭하고 'X' 아이콘을 클릭하여 테마 빌더를 종료합니다.

Save custom WordPress theme header

이제 동일한 단계에 따라 WordPress 바닥글을 사용자 정의할 수 있으며 완료되면 홈페이지 편집으로 이동할 수 있습니다.

WordPress 홈페이지 사용자 정의

웹사이트 홈페이지는 사이트의 첫 페이지이며 일반적으로 비즈니스를 정의하는 필수 요소를 포함합니다. 예를 들어, 귀하가 누구인지, 무엇을 하는지, 리뷰 및 평가, 연락처 정보에 대한 세부 정보입니다.

Customize WordPress homepage sections

사용 중인 템플릿에는 다음 홈페이지 섹션이 포함되어 있습니다.

  • 영웅
  • 특징
  • 사용후기
  • 자주 묻는 질문

레이아웃, 이미지, 콘텐츠, 버튼 등을 포함하여 이 페이지의 모든 측면을 변경할 수 있습니다. 이 간단한 예를 보고 홈페이지의 다른 부분을 편집하는 것이 얼마나 쉬운지 확인하십시오.

customize WordPress theme

왼쪽에 있는 블록과 섹션을 사용하여 모든 것이 마음에 들 때까지 홈페이지를 편집할 수 있습니다. 예를 들어 별점, Google 지도, 검색 양식 및 기타 여러 웹사이트 요소를 추가할 수 있습니다.

홈페이지의 모바일 버전을 확인하는 것도 중요합니다.

Mobile preview icon

사이트의 모바일 버전이 올바르지 않은 경우 완벽해 보일 때까지 계속 수정할 수 있습니다.

Mobile WordPress theme preview

홈페이지 디자인이 만족스러우면 변경 사항을 저장하고 SeedProd 테마 빌더 대시보드로 돌아갑니다.

맞춤형 블로그 페이지 스타일링

다음으로 사용자 정의할 테마 부분은 블로그 페이지입니다. 테마 빌더 대시보드에서 블로그, 색인, 아카이브, 검색 제목을 찾고 디자인 편집 링크를 클릭하십시오.

Edit WordPress blog page

이 페이지에서 블로그 게시물 콘텐츠, 추천 이미지, 발췌문 및 저자 약력과 같은 다양한 요소를 추가, 제거 및 이동할 수 있습니다.

WordPress blog page layout

기본적으로 이 템플릿은 게시물 블록을 사용하여 최근 블로그 게시물 목록을 표시하므로 이를 클릭하여 구성할 수 있는 다양한 설정을 표시합니다.

Posts block settings

게시물 설정 패널에서 페이지 매김, 메타, 작성자 세부 정보, 댓글 수 등과 같은 정보를 표시하고 표시하거나 숨길 블로그 게시물 유형을 선택할 수 있습니다.

블로그 페이지를 사용자 정의한 후 저장 버튼을 클릭하고 테마 빌더 대시보드로 돌아갑니다.

전역 설정 정의

마지막 템플릿 부분에서는 테마 버튼, 색상, 타이포그래피 및 레이아웃에 대한 전역 스타일 설정을 제어합니다. 전역 CSS 부분을 찾고 디자인 편집 링크를 클릭하여 설정을 엽니다.

Edit global css template

이 화면에서 각 탭을 확장하고 다른 설정을 사용자 지정할 수 있습니다.

Global CSS settings

예를 들어 버튼 탭을 열고 웹사이트에 있는 모든 버튼의 기본 스타일을 사용자 지정할 수 있습니다.

Global WordPress theme button settings

또한 글꼴, 레이아웃, 배경을 변경하고 WordPress 테마에 사용자 정의 CSS를 추가할 수 있습니다. 각 변경 사항은 전체 웹 사이트에 자동으로 적용됩니다.

계속하기 전에 저장 버튼을 클릭하여 변경 사항을 저장하는 것을 잊지 마십시오.

4단계. 이메일 마케팅 서비스 연결

테마 디자인에서 옵트인 양식 또는 연락처 양식 블록을 사용한 경우 이메일 목록에 새 연락처를 추가하는 방법이 필요합니다. 운 좋게도 SeedProd는 인기 있는 이메일 마케팅 서비스와 직접 통합되어 이를 쉽게 만듭니다.

디자인을 편집할 때 연결 탭을 클릭하면 SeedProd의 이메일 통합을 찾을 수 있습니다. 거기에서 이메일 마케팅 서비스를 찾고 화면의 지시에 따라 연결할 수 있습니다.

SeedProd email marketing services

이메일 서비스와 직접 통합하는 것 외에도 SeedProd는 내장된 가입자 대시보드에 연락처를 저장할 수 있습니다. 이것은 이메일 목록을 작성하기 시작하고 아직 공급자를 선택하지 않은 경우에 유용합니다.

SeedProd subscriber dashboard

5단계. 사용자 정의 WordPress 테마 게시

사용자 지정 WordPress 테마를 사용자 지정했으므로 이제 웹 사이트에 라이브로 만들 차례입니다. 그렇게 하려면 테마 빌더 대시보드로 이동하여 SeedProd 테마 활성화 제목 옆에 있는 토글을 '켜기' 위치로 돌립니다.

Enable seedprod theme

그런 다음 웹 사이트의 프런트 엔드로 이동하여 새 사용자 지정 WordPress 테마를 볼 수 있습니다.

create custom WordPress theme example

당신은 그것을 가지고 있습니다!

이 게시물이 코딩 없이 처음부터 WordPress 테마를 만드는 방법을 배우는 데 도움이 되었기를 바랍니다.

SeedProd에는 RafflePress 블록도 포함되어 있다는 사실을 알고 계셨습니까? 사용자 정의 테마 디자인의 아무 곳에나 RafflePress 경품을 추가하면 트래픽, 리드 및 소셜 미디어 팔로어를 매우 쉽게 늘릴 수 있습니다.

다이빙 할 준비가 되셨습니까?

여기에서 SeedProd를 시작하고 여기에서 RafflePress 사본을 받으십시오.

이 기사가 마음에 들면 RafflePress 비디오 자습서용 YouTube 채널을 구독하십시오. Twitter와 Facebook에서도 찾을 수 있습니다.