4가지 쉬운 방법(3가지 코드 없음)

헤더는 대부분의 방문자가 보는 웹사이트의 첫 번째 요소입니다. 일반적으로 사이트의 로고와 메뉴가 배치되는 위치이며 모든 페이지의 일부입니다. 워드프레스 헤더 편집 방법을 모른다면 ️ 강한 첫인상을 남기는 데 어려움을 겪을 것입니다.

WordPress를 사용하면 여러 가지 방법으로 사이트의 헤더를 편집할 수 있습니다. 거의 모든 테마에는 수동으로 사용자 정의할 수 있는 고유한 헤더 디자인이 제공됩니다. 또는 더 큰 WordPress 커뮤니티에서 제공하는 다양한 도구를 사용할 수 있습니다.

이 기사에서는 플러그인을 사용하거나 사용하지 않고 WordPress 헤더를 편집하는 네 가지 방법을 보여줍니다. 일하러 가자!

목차:

1. 커스터마이저를 사용하여 헤더 편집
2. 전체 사이트 편집(및 호환되는 테마) 사용
3. WordPress 페이지 빌더를 사용하여 헤더 편집
4. 플러그인을 사용하여 헤더에 사용자 정의 코드 추가

1. 커스터마이저를 사용하여 헤더 편집

WordPress Customizer는 웹사이트의 전역 요소를 편집할 수 있는 내장 도구입니다. 사용자 지정 도구를 사용하여 사이트의 머리글, 바닥글, 타이포그래피, 메뉴 및 기타 주요 측면을 편집할 수 있습니다.

사용자 지정 도구에 액세스하려면 대시보드로 이동하여 모양 > 사용자 지정 을 클릭합니다. 사용자 지정 프로그램은 왼쪽에 옵션 메뉴를 표시하고 오른쪽에 웹사이트 미리보기를 표시합니다.

대시보드에 WordPress 사용자 정의 도구 옵션이 표시되지 않으면 차단 사용 테마를 사용 중일 수 있습니다. 이 유형의 테마에 대한 헤더를 편집하려면 전체 사이트 편집을 사용해야 합니다. 이에 대해서는 다음 섹션에서 다룰 것입니다.

커스터마이저에서 헤더와 관련된 옵션이 표시되어야 합니다. 때로는 위의 예와 같이 즉시 표시될 수 있습니다. 다른 경우에는 하위 메뉴로 이동해야 할 수도 있습니다. 예를 들어, 일부 테마는 레이아웃 옵션 또는 이와 유사한 항목에 헤더 옵션을 넣습니다.

테마의 헤더 옵션을 찾으면 지금 표시되는 선택 항목은 사용 중인 테마에 따라 달라집니다. 예를 들어 Neve 테마에는 로고, 헤더 색상 및 이 섹션에 표시되는 메뉴를 변경할 수 있는 옵션이 포함되어 있습니다.

Neve는 또한 끌어서 놓기 기능을 사용하여 헤더에 추가할 수 있는 요소 선택을 제공합니다. 사용 가능한 구성 요소에서 요소를 선택하고 사용자 지정 프로그램의 맨 아래에 있는 머리글 행으로 끌어옵니다. Neve를 사용하면 헤더에 대해 최대 3개의 요소 행을 추가하고 원하는 위치에 요소를 배치할 수 있습니다.

헤더 구성이 만족스러우면 사용자 지정 프로그램 상단에 있는 게시 버튼을 클릭하여 테마에 대한 변경 사항을 저장합니다.

사용자 정의 프로그램을 사용하여 변경한 사항은 활성 테마에만 적용됩니다. 테마를 변경하면 WordPress 헤더를 다시 편집해야 합니다.

2. 전체 사이트 편집(및 호환 가능한 테마) 사용

전체 사이트 편집은 블록 편집기를 사용하여 테마 템플릿을 편집할 수 있는 새로운 기능입니다. 이것은 차단이 활성화된 테마에서만 작동하므로 사이트에서 사용할 수도 있고 사용하지 못할 수도 있습니다.

테마가 전체 사이트 편집을 지원하는지 확인하려면 모양 메뉴를 열고 편집기 옵션을 찾으세요.

그것을 선택 옵션을 선택하면 블록 편집기가 열립니다. 그러나 개별 페이지나 게시물이 아닌 테마 템플릿을 편집하게 됩니다.

기본적으로 편집기는 헤더 요소를 포함해야 하는 홈 페이지 템플릿을 엽니다.

일부 블록은 전체 사이트 편집을 사용할 때만 자리 표시자로 나타납니다. 이 도구는 개별 블록을 편집하는 것이 아니라 전체 레이아웃을 편집하기 때문입니다.

헤더를 편집할 때 포함할 블록과 요소를 완전히 제어할 수 있습니다. 목록 보기 도구를 열면 현재 헤더에 포함된 블록에 대한 분석을 볼 수 있습니다.

이 단계에서 헤더에서 블록을 추가하거나 제거하도록 선택할 수 있습니다. 기존 블록을 제거하거나 편집하려면 블록을 선택하고 그렇게 할 때 화면에 나타나는 상황에 맞는 메뉴를 사용하십시오.

블록을 선택하면 블록 을 사용하여 편집할 수도 있습니다. 화면 오른쪽에 있는 설정 메뉴. 이 메뉴에는 일반적으로 스타일 옵션이 포함되어 있으며 편집 중인 블록에 따라 다릅니다.

새 블록을 추가하려면 헤더 요소를 선택하고 더하기 기호 아이콘을 찾으십시오. 이 버튼을 누르면 추가할 블록을 선택할 수 있는 메뉴가 열립니다.

Full Site Editor의 또 다른 유용한 기능은 메뉴를 시각적으로 편집할 수 있다는 것입니다. 이렇게 하려면 탐색 블록을 사용하여 메뉴를 선택하기만 하면 됩니다. 새 링크를 추가하고, 새 메뉴를 만들고, 기존 링크를 바꿀 수 있는 옵션이 표시됩니다.

헤더에 대한 변경 사항이 만족 스러우면 저장 을 클릭하십시오 . 이렇게 하면 테마의 헤더 템플릿에 대한 변경 사항이 저장되고 웹사이트에 자동으로 반영됩니다.

3. WordPress 페이지 빌더를 사용하여 헤더 편집

일부 WordPress 페이지 빌더 플러그인은 WordPress 헤더 편집 옵션을 제공합니다. 예를 들어 Elementor Pro에는 프리미엄 라이선스로 액세스할 수 있는 Theme Builder 도구가 포함되어 있습니다.

Elementor Pro에 액세스할 수 없는 경우 WordPress.org에서 Elementor Header & Footer Builder 플러그인과 같은 무료 타사 확장을 사용할 수 있습니다.

하지만 Elementor Pro와 테마 빌더 기능을 사용하여 이 작업을 수행하는 방법을 보여 드리겠습니다.

실제로 Elementor Theme Builder는 전체 사이트 편집과 유사하게 작동합니다.

테마 빌더에 액세스하려면 템플릿 > 테마 빌더 로 이동합니다. SITE PARTS 아래에서 헤더 옵션을 선택하고 오른쪽에서 기존 템플릿을 찾습니다. 헤더 템플릿은 하나만 있어야 하며 옆에 있는 편집 버튼을 클릭할 수 있습니다.

그러면 Elementor 편집기가 시작됩니다. 여기에서 Elementor 블록을 사용하여 헤더를 빌드하거나 기성 템플릿을 가져올 수 있습니다. 편집기 본문에 있는 폴더 아이콘을 클릭하면 액세스 권한이 있는 헤더 템플릿을 볼 수 있습니다.

Elementor를 사용하는 경우 이러한 템플릿을 활용하는 것이 좋습니다. 이를 통해 모듈을 추가하거나 사용자 정의하여 편집할 수 있는 여러 헤더 스타일을 실험할 수 있습니다.

Elementor 사용에 익숙하지 않은 경우 이 페이지 빌더를 사용하여 왼쪽 메뉴를 사용하여 모듈을 선택할 수 있습니다. 이러한 모듈을 페이지로 드래그하면 화면 오른쪽의 미리보기에 표시됩니다.

테마 빌더를 사용할 때 특정 테마 템플릿만 편집하게 됩니다. 그러나 Elementor가 제공하는 전체 모듈 및 구성 옵션을 계속 사용할 수 있습니다.

헤더 템플릿 편집을 완료한 후 게시 버튼을 사용하여 저장합니다. 그런 다음 Elementor는 템플릿을 표시할 페이지를 선택하라는 메시지를 표시합니다.

프리미엄 Elementor 라이선스에 대해 이미 비용을 지불하지 않는 한 Theme Builder 도구 자체로는 구매를 정당화하지 못할 수 있습니다. 전체 사이트 편집이 수행하는 작업을 정확하게 수행하지만 프리미엄 비용이 듭니다. 주요 차이점은 Elementor의 광범위한 모듈을 사용할 수 있다는 점이며, 이미 Elementor를 사용하고 있다면 헤더 디자인이 사이트의 나머지 부분과 일치하는지 확인하는 것이 더 쉬울 것입니다.

4. 플러그인을 사용하여 헤더에 사용자 정의 코드 추가

일반적으로 플러그인을 사용하는 것이 WordPress에서 사용자 정의를 구현하는 가장 쉬운 방법입니다. 그러나 일반적으로 헤더의 경우는 그렇지 않습니다. 헤더를 시각적으로 편집할 수 있는 플러그인을 원하면 페이지 빌더를 사용해야 합니다. 이 기능을 제공하는 대부분의 페이지 빌더는 이전 섹션에서 논의한 대로 프리미엄이 붙습니다.

헤더를 사용자 정의할 수 있는 무료 플러그인은 일반적으로 헤더에 사용자 정의 코드를 추가하는 더 쉬운 방법만 제공합니다. 대안은 자식 테마를 사용하여 수동으로 테마 파일을 편집하는 것입니다. 이는 웹 개발 경험이 없는 한 위협적일 수 있고 위험할 수 있습니다.

이러한 플러그인의 한 가지 환상적인 예는 머리글 바닥글 코드 관리자입니다. 이 도구를 사용하면 머리글 및/또는 바닥글에 HTML, CSS 및 JavaScript 스니펫을 추가하고 이러한 스니펫이 로드될 페이지를 선택할 수 있습니다.

플러그인이 활성화되면 대시보드에서 HFCM > Add New Snippets 페이지로 이동합니다. 여기에서 추가할 스니펫 유형, 표시할 위치, 머리글 또는 바닥글에 추가할지 여부를 선택할 수 있습니다.

헤더에 새 요소를 추가하려는 경우 HTML을 사용해야 합니다. 헤더와 헤더에 포함된 요소의 스타일을 변경하려면 CSS 스니펫을 사용하는 것이 좋습니다.

이 접근 방식의 주요 단점은 헤더 코드를 확인하여 CSS를 추가하기 위해 헤더 코드가 사용하는 클래스와 ID를 확인해야 한다는 것입니다. 이것은 새로운 코드 조각을 추가하고 변경 사항이 작동하는지 확인하고 결과에 만족할 때까지 코드를 조정할 때 시간이 많이 소요되는 프로세스일 수 있습니다.

지금 WordPress 헤더를 사용자 정의하십시오

WordPress에서 헤더를 편집하는 방법에 대해 질문이 있습니까? 아래 코멘트 섹션에서 그들에 대해 이야기합시다!