WordPress 사용자 정의 헤더: 정의 및 생성 방법

WordPress가 도입한 가장 유연하고 유용한 기능 중 하나는 Custom Headers입니다. WordPress 웹 사이트의 상단 섹션을 사용자 정의할 수 있는 기능으로 사용자 정의 헤더 템플릿을 사용하여 적절하다고 생각하는 대로 개인화할 수 있는 기능을 제공합니다. 그리고 대부분의 WordPress 기능과 마찬가지로 테마 기능, 사용자 정의 코드 또는 WordPress 플러그인을 사용하여 헤더를 사용자 정의하는 여러 방법이 있습니다.

이 기사에서는 이러한 경로를 안내하고 몇 가지 예를 제공합니다. 그러나 먼저 WordPress 헤더와 왜 사용자 지정을 귀찮게 하는지에 대해 이야기해 보겠습니다.

맞춤 WordPress 헤더를 사용하는 이유는 무엇입니까?

헤더는 방문자가 가장 먼저 알아차리는 것이기 때문에 웹사이트의 가장 필수적인 그래픽 측면 중 하나입니다. 따라서 웹사이트의 헤더를 변경하면 사용자 경험이 개선될 수 있는지 여부를 검토할 가치가 있습니다. 예를 들어, 비즈니스 메시지가 방문자에게 보다 효과적으로 전달되도록 헤더의 미학과 디자인을 향상시킬 수 있습니다.

Pressidium으로 웹사이트 호스팅

60일 환불 보장

계획 보기

또한 잘 구성된 헤더는 방문자가 귀하의 콘텐츠를 보다 쉽게 ​​탐색하는 데 도움이 될 수 있으며 귀하가 집중하기 원하는 제품이나 서비스로 방문자를 부드럽게 밀어넣는 데 사용할 수 있습니다.

실제로 변경할 수 있는 것

기술적으로 글꼴 크기, 이미지, 색 구성표 등을 포함하여 웹 사이트 헤더에서 변경할 수 있는 거의 모든 것이 열려 있습니다. 위젯 영역을 추가하고, 특정 페이지에 다양한 스타일을 적용하고, 로고를 원하는 대로 배치하고, CTA(Call to Action) 버튼을 적용하고, 탐색 메뉴를 수정하는 등 다양한 작업을 할 수 있습니다!

이 시점에서 사용자 정의 헤더 템플릿이 필요하다고 확신하는 경우 개발자와 비 코더 모두를 위해 WordPress와 함께 제공되는 옵션이 있습니다.

WordPress에서 헤더를 사용자 정의하는 방법

헤더를 사용자 정의하는 가장 널리 사용되는 몇 가지 방법을 살펴보겠습니다.

테마의 사용자 지정 프로그램 사용

내장된 WordPress 사용자 정의 도구를 사용하여 헤더를 편집하려면 먼저 테마가 이를 지원하는지 확인해야 합니다. 공식 테마 라이브러리에서 테마를 조회하고 필터를 사용하여 현재 테마에 사용자 정의 헤더에 대한 내장 기능이 있는지 확인할 수 있습니다.

이 기능과 함께 제공되는 테마 중 하나를 설치하면 활성화 시 "모양" 메뉴 아래에 일부 추가 메뉴 항목이 나타납니다. 예를 들어 Blog Forever를 설치하고 활성화하면 다음 메뉴가 표시됩니다.

"헤더" 메뉴 항목을 클릭하면 헤더 옵션으로 이동합니다.

사용자 지정 메뉴에서 헤더를 사용자 지정하는 데 도움이 되는 다른 옵션도 찾을 수 있습니다.

여기에서 많은 옵션을 사용할 수 있습니다. 색상을 변경하고, 소셜 미디어 또는 연락처 정보와 같은 헤더에 위젯을 추가하고, 슬로건 등을 변경할 수 있습니다.

그러나 테마가 "헤더 편집 가능" 테마 중 하나가 아닌 경우에는 어떻게 됩니까?

테마에 사용자 정의 헤더 지원을 추가하는 방법

이 기능을 지원하지 않는 테마의 예로 GeneratePress 테마를 살펴보겠습니다. 이 테마를 설치하고 활성화하면 테마 커스터마이저에서 헤더 이미지를 변경하는 옵션이 표시되지 않습니다.

일부 코딩 기술을 보유하고 WordPress 코어 버전 3.4 이상을 사용하는 경우 사용자 정의 헤더 기능을 매우 쉽게 활성화할 수 있습니다. add_theme_support() 내장 함수를 사용하여 쉽게 추가할 수 있습니다.

테마 폴더 아래로 이동하여 functions.php 파일을 찾아 즐겨 사용하는 편집기로 엽니다. 그런 다음 다음 줄을 추가합니다.

 add_theme_support( 'custom-header' );

이제 사용자 정의 페이지와 모양 메뉴에서 헤더 이미지 옵션을 볼 수 있습니다. 그것을 사용하고 헤더용 이미지를 업로드할 수 있습니다.

인수를 전달하여 사용 가능한 옵션을 설정할 수도 있습니다. 다음은 functions.php에 코드를 추가하여 이미지 크기를 설정하는 방법의 예입니다.

 function mytheme_custom_header_setup() { $args = array( 'width' => 1000, 'height' => 250, ); add_theme_support( 'custom-header', $args ); } add_action( 'after_setup_theme', 'mytheme_custom_header_setup' );

after_setup_theme는 테마가 초기화된 직후 기능을 등록하는 데 사용됩니다.

그러나 알 수 있듯이 헤더에 이미지가 표시되지 않으며 이는 표시하기 위해 아무 작업도 하지 않았기 때문에 정상적인 현상입니다.

헤더 이미지를 표시하는 방법

헤더 이미지를 표시하려면 다음과 같이 get_header_image() WordPress 함수를 사용해야 합니다.

 <?php if ( get_header_image() ) : ?> <div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; ?>

요구 사항과 코딩 기술에 따라 여기에서 어디로든 갈 수 있습니다. 후크를 사용하여 태그나 보조 헤드 제목 또는 테마의 위젯을 추가할 수 있으며 물론 자신의 CSS를 추가하여 다듬을 수 있습니다.

WordPress 설치의 헤더 템플릿 파일에 이 사용자 정의 코드를 삽입해야 합니다. 이 파일은 모든 테마에 대해 동일하지 않습니다. 어떤 파일인지 모를 경우 템플릿 계층을 참조하거나 wp_head() 함수를 사용하여 functions.php를 통해 헤더에 코드를 추가하고 어떤 파일인지 잊어버릴 수 있습니다.

 function my_custom_function(){ if ( get_header_image() ) : ?> <div> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> </a> </div> <?php endif; }; add_action('wp_head', 'my_custom_function');

또한 테마 업데이트 시 변경 사항이 손실되지 않도록 이러한 사용자 지정을 자식 테마에 적용해야 한다는 점을 지적하는 것도 중요합니다.

물론 전체 사이트 편집기를 지원하는 Twenty Twenty Two와 같은 WordPress 블록 테마 를 사용하면 작업이 훨씬 쉬워질 수 있습니다. 이에 대한 자세한 내용은 향후 기사에서 다루겠습니다.

WordPress 플러그인을 사용하여 사용자 정의 헤더 만들기

WordPress 헤더를 사용자 정의하는 데 사용할 수 있는 다양한 인기 플러그인이 있습니다. 이 기사에서 다루기에는 사실 너무 많습니다.

즉, 헤더를 사용자 정의하는 데 사용할 수 있을 뿐만 아니라 필요할 때 웹사이트의 '오른쪽' 영역에 코드를 삽입하는 유용한 도구로 사용할 수 있으므로 체크아웃할 가치가 있는 항목이 있습니다. '머리글 및 바닥글 삽입' 플러그인을 소개합니다.

머리글 및 바닥글 삽입 플러그인은 여러 면에서 유용합니다. 머리글, 바닥글 또는 본문에 코드를 추가할 수 있을 뿐만 아니라 "설정 -> 머리글 및 바닥글 삽입"에서 모든 항목을 한 곳에서 정리할 수 있습니다.

여전히 스크립트를 삽입해야 하기 때문에 비코더에게는 권장하지 않습니다. 헤더를 사용자 정의하고 코딩을 피하려면 WordPress에서 제공하는 사용자 정의 헤더 이미지 추가 플러그인을 권장합니다.

일단 설치하고 활성화하기만 하면 "헤더"라는 제목의 페이지(표시 또는 비공개)를 만들고 그 안에 이미지를 업로드하기만 하면 됩니다.

플러그인이 하는 일은 a) 커스터마이저 "헤더" 옵션을 활성화하고 b) "헤더" 페이지에 업로드된 모든 이미지를 구문 분석하여 커스터마이저에서 제안된 헤더로 제공하는 것입니다. 정말 멋진!

결론

WordPress 헤더는 웹사이트에서 누구나 볼 수 있는 첫 번째 항목입니다. 따라서 가능한 한 멋지게 보이는지 확인하는 것이 좋습니다! 위의 내용이 코딩에 만족하는지 여부에 관계없이 이 작업을 수행하는 방법에 대한 힌트와 팁을 제공했기를 바랍니다.