코드없이 사용자 정의 워드 프레스 테마를 쉽게 만드는 방법

처음부터 사용자 정의 WordPress 테마를 작성 하시겠습니까??


과거에는 워드 프레스 코덱스를 따라야하고 사용자 정의 워드 프레스 테마를 만들기 위해 적절한 코딩 지식이 있어야했습니다. 그러나 새로운 WordPress 테마 생성기 덕분에 이제 누구나 한 시간 내에 완전히 사용자 정의 된 WordPress 테마를 만들 수 있습니다 (코딩 지식 필요 없음).

이 기사에서는 코드를 작성하지 않고도 사용자 정의 WordPress 테마를 쉽게 만드는 방법을 보여줍니다..

코드를 작성하지 않고 사용자 정의 워드 프레스 테마 만들기

초보자를위한 사용자 정의 워드 프레스 테마 만들기

정적 HTML 사이트와 달리 WordPress 테마는 PHP, HTML, CSS 및 JavaScript로 작성된 템플릿 파일 세트입니다. 일반적으로 이러한 모든 웹 디자인 언어를 이해하거나 웹 개발자를 고용하여 사용자 정의 WordPress 테마를 작성해야합니다..

개발자 또는 대행사를 고용 한 경우 사용자 정의 WordPress 테마 비용은 수천 달러에이를 수 있습니다.

많은 소기업 소유자가 맞춤 WordPress 테마의 높은 비용을 감당할 수 없었기 때문에 많은 사람들이 WordPress와 함께 제공되는 기본 테마로 정착했습니다..

해결하고 싶지 않고 맞춤 설정을 원했던 사람들은 & WordPress 페이지 빌더를 삭제하거나 테마 프레임 워크를 사용하여 사용자 정의 테마를 빌드합니다..

워드 프레스 테마 프레임 워크로 워드 프레스 테마를보다 쉽게 ​​구축 할 수 있지만 일반 웹 사이트 소유자가 아닌 개발자를위한 솔루션입니다.

반면에 WordPress 페이지 빌더 플러그인을 사용하면 드래그를 사용하여 사용자 정의 페이지 레이아웃을 쉽게 만들 수 있습니다. & 드롭 인터페이스이지만 레이아웃으로 만 제한되었습니다. 당신은 그것으로 사용자 정의 테마를 구축 할 수 없습니다.

Beaver Builder까지, 최고의 WordPress 페이지 빌더 플러그인 중 하나는 Beaver Themer라는 부가 기능으로이 문제를 해결하기로 결정했습니다..

비버 빌더 최고의 워드 프레스 페이지 빌더 플러그인

Beaver Themer는 코드 작성을 배우지 않고 끌어서 놓기 인터페이스를 사용하여 사용자 정의 테마 레이아웃을 작성할 수있는 사이트 빌더 추가 기능입니다..

WordPress 테마를 쉽게 만들기 위해 Beaver Themer를 사용하는 방법을 살펴 보겠습니다..

비디오 튜토리얼

WPBeginner 구독

동영상이 마음에 들지 않거나 지침이 더 필요한 경우 계속 읽으십시오..

사용자 정의 테마를 구축하기 위해 비버 테마 설정

Beaver Themer는 Beaver Builder 용 애드온 플러그인이므로이 기사에는 두 가지 플러그인이 모두 필요합니다..

먼저, Beaver Builder 및 Beaver Themer 플러그인을 설치하고 활성화해야합니다. 자세한 내용은 워드 프레스 플러그인 설치 방법에 대한 단계별 가이드를 참조하십시오..

Beaver Themer를 사용하면 사용자 정의 테마를 만들 수 있지만 여전히 테마가 필요합니다. 초보자 용 테마로 사용할 수있는 전체 너비 페이지 템플릿이 포함 된 간단한 테마를 사용하는 것이 좋습니다..

WordPress.org 테마 디렉토리에서 많은 테마를 찾을 수 있습니다. 가장 현대적인 WordPress 테마에는 전폭 템플릿이 포함됩니다. 우리의 최고 선택은 다음과 같습니다.

  • Astra – Beaver Builder를 기본적으로 지원하는 무료 경량 다목적 WordPress 테마.
  • OeanWP – 전체 페이지 빌더 지원과 함께 제공되는 인기있는 무료 다목적 워드 프레스 테마.
  • StudioPress 테마 – 모든 테마는 Beaver Builder와 호환되며 Beaver Themer와 잘 작동합니다..

이 자습서를 위해 가볍고 WordPress 테마를 쉽게 사용자 지정할 수있는 Astra를 사용합니다..

Beaver Themer를위한 테마 설정

Beaver Themer로 사용자 정의 WordPress 테마를 작성할 때 Beaver Themer가 페이지의 전체 본문에 액세스 할 수 있어야합니다 (가장자리에서 가장자리까지)..

이것이 기본 Astra 레이아웃입니다. 보시다시피이 레이아웃에는 비버 테머를 사용할 때 다루기가 어려울 수있는 사이드 바가 포함되어 있습니다.

사이드 바가있는 기본 테마 레이아웃

웹 사이트의 관리자 패널을 방문하여 변경 한 다음 모양»사용자 정의 페이지. 여기에서 레이아웃»사이드 바 탭.

테마에서 사이드 바 끄기

기본 레이아웃 옵션에서 ‘사이드 바 없음’을 선택하고 게시 버튼을 클릭하여 변경 사항을 저장하십시오..

테마는 이제 사이드 바가없는 레이아웃을 사용하기 시작합니다. 이것은 Beaver Themer와 함께 사용하기에 가장 좋은 레이아웃입니다.

사이드 바가없는 테마 레이아웃

이 전체 페이지 레이아웃을 통해 Beaver Themer는 화면의 모든 인치를 사용할 수 있으므로 아름다운 종단 간 시각적 경험을 만들 수 있습니다.

대부분의 WordPress 테마에는 전체 너비 페이지를위한 템플릿 파일이 포함되어 있습니다. 다른 테마를 사용하는 경우 테마 설정에서 사이드 바를 제거하는 옵션이 있습니다..

찾을 수 없으면 테마 개발자에게 문의하면 도움을 줄 수 있습니다..

테마를 전체 너비 레이아웃으로 설정 한 후에는 Beaver Themer를 사용하여 사용자 정의 WordPress 테마를 작성할 준비가되었습니다..

빠른 비버 테마 기본 사항

Beaver Themer는 Beaver Builder에서 작동합니다. 페이지 빌더 플러그인 인 Beaver Builder를 사용하면 항목을 페이지로 끌어서 놓아 사용자 정의 레이아웃을 작성할 수 있습니다.

레이아웃에 사용할 수있는 다음 항목이 있습니다.

  • 템플릿 : 전체 페이지 레이아웃을 구성하는 열 행 및 모듈 모음.
  • 열 : 콘텐츠를 가로로 정렬하는 데 도움이되는 세로 레이아웃 모듈.
  • 행 : 여러 모듈의 가로 모음
  • 모듈 : 제목, 텍스트 블록, 표, 갤러리 등과 같은 특정 정보를 출력하는 항목.

Beaver Builder에서 페이지를 편집 한 다음 오른쪽 상단의 추가 버튼을 클릭하십시오. 그런 다음 열, 행, 모듈을 페이지로 끌어다 놓고 바로 편집을 시작할 수 있습니다.

비버 빌더 사용

처음부터 시작하지 않으려면 사전 제작 된 템플릿 목록에서 선택하여.

비버 빌더 템플릿

Beaver Builder를 사용하면 레이아웃을 저장 한 다음 나중에 템플릿으로 사용할 수 있습니다.

자세한 내용은 Beaver Builder를 사용하여 사용자 정의 페이지 레이아웃을 만드는 방법에 대한 기사를 참조하십시오..

그러나 페이지 레이아웃 만 만들고 싶지는 않습니다. 완벽한 커스텀 테마를 만들고 싶습니다.

이것은 비버 테 머가 들어올 때입니다.

Beaver Builder에 ‘Themer Layout’이라는 다른 항목을 추가합니다..

테마 레이아웃

테마 레이아웃을 사용하면 머리글, 바닥 글, 내용 영역, 404 페이지 및 기타 템플릿 부분에 대한 사용자 정의 레이아웃을 만들 수 있습니다.

이들은 모든 WordPress 테마의 구성 요소이며이를 사용하여 필요에 맞는 사용자 정의 테마를 만들 수 있습니다.

Beaver Themer 템플릿을 사용하여 사용자 정의 WordPress 테마 만들기

다음 지침에서는 가장 인기있는 맞춤 테마 요소를 작성하는 단계를 안내합니다. 완료되면 기본 테마를 완전히 사용자 정의 된 WordPress 하위 테마로 완전히 변환하게됩니다..

테마에 대한 사용자 정의 헤더 작성

웹 사이트의 헤더 영역부터 시작하겠습니다. 사용자 정의 헤더는 테마의 필수 구성 요소이며 기존 방법을 사용하여 까다로울 수 있습니다..

운 좋게도 Beaver Themer에는 헤더 기능이 내장되어 있습니다. 미리 작성된 템플릿을 사용하거나 2 열 레이아웃의 메뉴 및 이미지 모듈을 사용할 수 있습니다..

이 헤더 영역으로 이동하려면 먼저 Beaver Themer에서 헤더 레이아웃을 설정해야합니다. 방문 비버 빌더»새로 추가 페이지와 헤더 제목을 제공하십시오.

맞춤 헤더 레이아웃 만들기

그런 다음 유형으로 ‘Themer Layout’을 선택하고 레이아웃 옵션으로 ‘Header’를 선택하십시오. 완료되면‘테마 레이아웃 추가’버튼을 클릭하여 계속하십시오.

레이아웃 설정 페이지가 나타납니다. 여기에서 헤더 템플릿이 표시 될 위치로 ‘전체 사이트’를 선택해야합니다..

레이아웃 설정

그런 다음 ‘Launch Beaver Builder’버튼을 클릭하여 빌더 인터페이스를 엽니 다..

Beaver Builder는 기본 단일 열과 2 행 헤더 레이아웃을 시작점으로하여 시작합니다..

헤더 레이아웃

동일한 Beaver Builder 드래그 앤 드롭 도구를 사용하여 배경, 색상, 텍스트 등을 변경할 수 있습니다. 오른쪽 상단에있는 추가 버튼을 클릭하여 다른 모듈을 추가하고, 미리 작성된 템플릿을로드하고, 행 / 열을 추가 할 수도 있습니다. 모서리.

디자인에 만족하면 완료 버튼을 클릭하여 레이아웃을 저장하거나 게시하십시오..

이제 웹 사이트를 방문하여 사용자 정의 테마 헤더가 작동하는지 확인할 수 있습니다. 보시다시피, 우리는 사용자 정의 테마에 헤더 레이아웃을 적용했습니다.

사용자 정의 테마의 사용자 정의 헤더

헤더 외에는 아직 콘텐츠가 표시되지 않으며 기본 테마의 바닥 글 영역이 표시 될 수 있습니다..

이것을 바꾸자.

테마에 대한 사용자 정의 바닥 글 작성

사용자 정의 헤더를 만든 것처럼 Beaver Themer를 사용하여 테마에 대한 사용자 정의 바닥 글을 만들 수 있습니다..

향하다 비버 빌더»새로 추가 페이지에 바닥 글 레이아웃의 제목을 제공하십시오. 그런 다음 유형으로 ‘Themer Layout’을 선택하고 레이아웃 옵션으로 ‘Footer’를 선택하십시오..

바닥 글 레이아웃

‘테마 레이아웃 추가’버튼을 클릭하여 계속하십시오.

레이아웃 설정 페이지가 나타납니다. 여기에서 템플릿이 표시 될 위치로 ‘전체 사이트’를 선택해야합니다..

바닥 글 레이아웃 설정

그런 다음 ‘Launch Beaver Builder’버튼을 클릭하여 빌더 인터페이스를 엽니 다..

Beaver Builder는 3 개의 열을 사용하여 바닥 글 레이아웃으로 시작합니다. 이 레이아웃을 시작점으로 사용하여 편집을 시작할 수 있습니다.

바닥 글 레이아웃 편집

모듈, 텍스트 블록 또는 원하는 다른 것을 추가 할 수 있습니다. 언제든지 색상, 글꼴을 변경하고 배경 이미지를 추가 할 수 있습니다..

디자인에 만족하면 완료 버튼을 클릭하여 레이아웃을 저장하거나 게시하십시오..

게시물 및 페이지의 컨텐츠 영역 작성

웹 사이트의 모든 페이지와 게시물에 대한 머리글과 바닥 글을 만들었으므로 이제 게시물이나 페이지 본문 (콘텐츠 영역)을 구축 할 차례입니다..

새로 추가 페이지에 ‘단일’레이아웃을 추가하여 머리글과 바닥 글을 만들 때와 같은 방식으로 시작하겠습니다..

게시물 및 페이지 레이아웃 생성

다음으로이 레이아웃을 표시 할 위치를 선택합니다. 단일 게시물을 선택하여 모든 단일 게시물 및 페이지에 사용하거나 게시물 또는 페이지 만 선택할 수 있습니다.

단수 레이아웃 설정

그런 다음 ‘Launch Beaver Builder’버튼을 클릭하여 빌더 인터페이스를 엽니 다..

단일 레이아웃 편집

Beaver Builder는 상단에 게시물 / 페이지 제목이있는 샘플 단일 레이아웃을로드 한 다음 내용, 작성자 바이오 상자 및 주석 영역.

포인트를 클릭하여 이러한 항목을 편집하거나 필요에 따라 새 모듈, 열 및 행을 추가 할 수 있습니다.

레이아웃에 만족하면 완료 버튼을 클릭하여 변경 사항을 저장하고 게시하십시오..

이제 웹 사이트를 방문하여 실제로 볼 수 있습니다.

내용이 포함 된 테마 레이아웃

사용자 정의 테마를위한 아카이브 레이아웃 생성

사용자 정의 테마가 구체화되었으므로 웹 사이트의 다른 부분에 대한 레이아웃 작성으로 넘어갈 수 있습니다. 보관 페이지는 WordPress에 범주, 태그, 작성자 및 월별 보관 파일을 표시하는 곳.

맞춤 테마에서 보관 페이지의 레이아웃을 만들어 보겠습니다..

당신은 방문으로 시작합니다 비버 빌더»새로 추가 페이지 및 보관 레이아웃의 제목 제공.

사용자 정의 테마의 아카이브 레이아웃 작성

그런 다음 ‘테마 레이아웃’을 유형으로, ‘아카이브’를 레이아웃 옵션으로 선택하십시오. ‘테마 레이아웃 추가’버튼을 클릭하여 계속하십시오.

레이아웃 설정 페이지가 나타납니다. 여기에서 템플릿이 표시 될 위치로 ‘모든 아카이브’를 선택해야합니다. 날짜, 검색 결과, 카테고리, 태그 등과 같은 개별 아카이브 유형별로 별도의 레이아웃을 생성 할 수도 있습니다..

아카이브 레이아웃 설정

그런 다음 ‘Launch Beaver Builder’버튼을 클릭하여 빌더 인터페이스를 엽니 다..

Beaver Builder는 기본 단일 열 아카이브 레이아웃으로 시작합니다. 상단에 보관 제목이 표시되고 그 뒤에 게시물이 표시됩니다..

테마의 아카이브 레이아웃 편집

항목을 가리키고 클릭하여 속성을 편집 할 수 있습니다. 필요에 따라 새 모듈, 행 및 열을 추가 할 수도 있습니다.

그런 다음 ‘완료’버튼을 클릭하여 변경 사항을 저장하고 게시하십시오..

사용자 정의 워드 프레스 테마를위한 다른 레이아웃 만들기

Beaver Themer를 사용하면 템플릿 계층의 다른 페이지 (예 : 404 페이지, 템플릿 부분, 검색 결과 페이지 등)에 대한 레이아웃을 만들 수도 있습니다..

Beaver Builder의 내장 드래그 앤 드롭 기능을 사용하면 코드를 작성하지 않고도 사용자 정의 WordPress 테마를 처음부터 쉽게 만들 수 있습니다. 이것은 실제로 가장 초보자 친화적 인 WordPress 테마 개발 방법입니다.

이 기사가 코딩을 배우지 않고 사용자 정의 WordPress 테마를 만드는 방법을 배우는 데 도움이 되었기를 바랍니다. 더 나은 SEO 및 사용자 경험을 위해 WordPress 웹 사이트의 속도를 높이는 방법에 대한 가이드를 참조하십시오.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map