GeneratePress 테마 헤더 엘리먼트 (페이지 히어로) 만들기

Last Updated: 2024년 12월 15일 2개 댓글

GeneratePress 테마에서는 헤더 엘리먼트를 만들어 헤더 레이아웃을 커스터마이징할 수 있습니다. 엘리멘터 프로의 헤더 템플릿과 비슷하지만 사용 편의성 측면에서는 엘리메터의 테마 빌더가 더 쉬운 편입니다.

개발자에게 친숙한 방식이지만 GeneratePress 테마의 Element를 잘 활용하면 사이트 속도를 빠르게 유지하면서 원하는 대로 커스터마이징할 수 있습니다.

GeneratePress 테마 헤더 엘리먼트 (페이지 히어로) 만들기

이 블로그의 포스트 템플릿을 조금 변경해보았습니다.

Happist님 사이트에도 GeneratePress 테마가 사용되고 있는데, 포스트 헤더는 다음과 같이 되어 있습니다. 내비게이션 부분이 투명으로 되어 있고 페이지 히어로가 헤더 전체에 표시되도록 했습니다.

GeneratePress 테마의 유료 버전을 사용하는 경우 Header 엘리먼트를 사용하여 헤더를 원하는 대로 커스터마이징할 수 있습니다.

GeneratePress 테마에서 특정 페이지나 포스트의 헤더 레이아웃을 바꾸고 싶은 경우 참고해 보세요.

1 Header 엘리먼트를 사용하려면 먼저 Elements 모듈을 활성화해야 합니다. 워드프레스 관리자 페이지 » 모양 » GeneratePress » Modules 섹션으로 이동하여 Elements 모듈을 활성화합니다.

모듈이 활성화되면 Deactivate 버튼이 표시되고, 비활성화 상태인 경우에는 Activate 버튼이 표시됩니다.

참고로 워드프레스 버전에 따라 "모양"은 "디자인", "외모" 등의 단어로 번역되었을 수 있습니다.

2 모양 » Elements로 이동하여 Add New Element (새 요소 추가) 버튼을 클릭합니다.

Choose Element Type 팝업이 표시되면 Header를 선택하고 Create 버튼을 클릭합니다.

이 팝업에서는 다음과 같은 엘리먼트를 선택할 수 있습니다.

  • 블록
  • 후크 (훅)
  • 레이아웃
  • 헤더

3 헤더 엘리먼트가 생성됩니다.

위의 그림은 제 블로그에 적용된 포스트 헤더 엘리먼트를 보여줍니다.

헤더 요소의 이름을 지정(①)하고 텍스트 상자에 헤더에 표시될 콘텐츠를 입력합니다. 이 부분에 입력하는 콘텐츠가 페이지 제목 표시바 혹은 페이지 히어로에 표시됩니다.

다음과 같은 템플릿 태그가 지원됩니다.

  1. {{post_title}} : 현재 게시글/분류의 제목
  2. {{post_date}} : 현재 게시글의 발행 날짜
  3. {{post_author}} : 현재 게시글의 작성자 (글쓴이)
  4. {{post_terms.taxonomy}} : 선택한 분류(카테고리, 포스트 태그, 상품 카테고리)에 연결된 용어
  5. {{custom_field.name}} : 커스텀 포스트 메타. name 부분을 커스텀 필드의 이름으로 바꿉니다.

이처럼 글 제목, 작성자, 발행 날짜, 카테고리/태그, 사용자 정의 필드 등의 정보를 표시할 수 있습니다.

저는 Yoast SEO의 브레드크럼과 글 업데이트 날짜, 댓글 개수 등의 콘텐츠도 표시되도록 했습니다. 브레드크럼의 경우 숏코드를 입력할 수 있습니다.

글 수정 날짜와 댓글 개수는 숏코드를 만들어서 추가했습니다.

콘텐츠 입력 필드에는 다음과 같은 요소를 입력할 수 있습니다.

  1. 텍스트
  2. HTML 코드
  3. 템플릿 태그
  4. 숏코드 (쇼트코드)

PHP 코드는 입력할 수 없습니다. 자바스크립트(JavaScript)는 후크(Hook) 엘리먼트를 사용하여 푸터 섹션(wp_footer)에 추가할 수 있습니다.

아래의 Page Hero 탭에서 스타일을 지정할 수 있고, Page Hero 탭에서 지정할 수 없는 스타일은 CSS를 사용하여 스타일을 원하는 대로 커스텀할 수 있습니다.

4 Page Hero 탭을 클릭(③)하고 페이지 히어로 스타일을 지정합니다.

페이지 히어로에 대하여 나무위키 문서에서는 다음과 같이 설명하고 있습니다.

웹사이트에서 화면을 가득 채우는 큰 배너 이미지로, 일반적으로 앞이나 가운데에 눈에 확 들어오도록 배치되기 때문에 방문자의 이목을 집중시킨다.

GeneratePress 테마의 헤더 엘리먼트에서 '페이지 히어로'는 페이지/포스트 제목 표시줄을 의미하는 것 같습니다. 여기에 특성 이미지가 표시되도록 할 수도 있습니다.

블루호스트에서 페이지 히어로에 특성 이미지가 표시되도록 하니 약간의 딜레이가 느껴져서 표시하지 않았지만, 클라우드웨이즈로 서버를 바꾼 후에 특성 이미지를 표시하도록 지정해도 속도가 느려지는 현상은 없는 것 같습니다.

참고로 가성비 좋으면서 우리나라에도 속도가 빠른 해외호스팅을 원하는 경우 블루호스트와 비슷한 레벨의 해외 공유호스팅 서비스인 패스트코멧이나 케미클라우드가 괜찮은 선택일 수 있습니다. 특히 ChemiCloud는 서울 서버를 지난 달 말에 추가하여 우리나라에서도 속도가 빠르게 나옵니다.

페이지 히어로에서 페이지 타이틀 표시바에 특성 이미지(썸네일)를 표시하도록 설정할 수 있고 오버레이 컬러도 지정할 수 있습니다.

5 Site Header 탭을 클릭하여 적절히 설정합니다. 저는 다음과 같이 설정되어 있네요.

6 Display Rules (표시 규칙) 탭에서 이 헤더 요소가 표시될 위치를 지정합니다. 모든 포스트(글)에 표시되도록 하고 싶은 경우 아래와 같이 설정할 수 있습니다.

Exclude (제외) 섹션에서 예외 규칙을 지정할 수 있습니다.

마치며

이상으로 GeneratePress 테마의 헤더 엘리먼트에 대하여 살펴보았습니다. 헤더 레이아웃을 커스텀하고 싶은 경우 참고하여 원하는 대로 만들어보시기 바랍니다.

본래 헤더 템플릿을 만들려면 테마의 header.php 파일을 수정해야 하지만, 이 기능을 사용하면 테마 파일을 수정할 필요 없이 헤더 템플릿을 만들 수 있습니다.

아바다 테마, Divi 테마, 뉴스페이퍼와 같은 일부 테마에서도 헤더 템플릿을 알림판에서 만들 수 있습니다.

참고


2 개 댓글

Leave a Comment

  1. generatepress 테마로 이런 기능이 가능하군요. 혹시 이 사이트와 동일하게 워드프레스 사이트를 만들려면 무엇을 배워나 하나요? 대행도 가능하나요?

    응답
카카오톡 상담 카톡 서비스 상담