워드프레스에서 페이지마다 다른 헤더/푸터 사용하기

16

페이지마다 다른 헤더나 푸터를 사용하려는 경우 페이지마다 다른 템플릿을 만들면 됩니다(페이지 템플릿을 만드는 방법은 이 글에서 중간 부분을 참조하세요). 하지만 페이지마다 템플릿을 만드는 작업이 귀찮은 경우 간단한 조건문을 사용하여 페이지/카테고리별로 다른 헤더/푸터를 불러오도록 설정할 수 있습니다.

워드프레스에서 헤더 파일을 호출하는 코드는 <?php get_header( $name ); ?>입니다. 여기서 $name부분이 없으면 그냥 header.php 파일을 불러오고, $name 부분이 'home'이면 header-home.php를 불러옵니다. 마찬가지로 워드프레스에서 푸터 파일을 호출하는 코드는 <?php get_footer( $name ); ?>입니다. header.php와 마찬가지 규칙이 적용됩니다. 그러므로 원하는 페이지마다 다른 헤더와 푸터를 로드하려면 get_header( $name ) 부분과 get_footer( $name ) 부분의 변수를 바꾸어주고 해당 페이지에 맞게 header 파일과 footer 파일을 수정해주면 됩니다. (동일한 원리가 사이드바를 호출하는 함수인 get_sidebar( $name )에도 적용됩니다.)

페이지마다 별도의 템플릿을 만드는 대신 index.php 파일 내에서 get_header() 부분과 get_footer() 부분을 페이지별로 호출하려면, 다음과 비슷한 조건문을 사용하면 됩니다.

<?php
if ( is_front_page() ) {
get_header( 'home' ); // 전면 페이지에서는 header-home.php 호출
} elseif ( is_page( 'About' ) ) {
get_header( 'about' ); // 글 제목(post-title)이 About인 페이지의 경우 header-about.php 호출
} elseif ( is_page( 42 ) ) {
get_header( 'about' ); // ID가 42인 페이지의 경우 header-about.php 호출
} else {
get_header();  // 이외의 경우 header.php 호출
}
?>

is_page()뿐만 아니라 is_category()도 함께 사용이 가능합니다. get_footer()/get_sidebar()에도 동일한 방식으로 사용 가능합니다.

16 개 댓글

    • 보통 게시글/페이지마다 ‘글제목 – 사이트 제목’이 표시돕니다. Yoast SEO나 All in One을 설치하고, 개별 글에서 수동으로 직접 제목 부분에 원하는 사이트 제목을 입력하면 됩니다.

      아니면 다음 글을 참고로 하여 페이지마다 후크로 조정할 수도 있을 것입니다.

      https://stackoverflow.com/questions/36087390/add-filterwp-title-doesnt-replace-my-title-tag-wordpress-plugin

    • 안녕하세요?

      Yoast SEO나 All in One SEO를 사용하면 개별 페이지/글마다 다른 SEO 제목을 부여할 수 있습니다.
      개별 페이지/글 맨 아래에 보면 SEO 제목을 설정하는 옵션이 있습니다.
      수동으로 직접 제목을 설정해보시기 바랍니다.
      다음 글을 참고해보세요.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-yoast-seo-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95/

    • 게시글/페이지마다 '글제목 - 사이트 제목'이 표시되는데요.
      개별 글에서 수동으로 직접 입력하면 됩니다.

  1. 문의드립니다. 페이지마다 로고만 다르게 출력하고 싶습니다. 아바타 테마를 사용중입니다. 방법이 있을까요? 플러그인을 추천해주셔도 감사드리겠습니다.

    • 안녕하세요?
      사실 이것은 커스터마이징 작업이라서 아바다( https://www.thewordcracker.com/go/avada )에 문의해도 답변을 받지 못할 것입니다.

      다음과 같은 트릭을 사용해볼 수 있을 것입니다.

      1. 테마 옵션에서 투명한 로고를 추가합니다.
      2. 일반적인 로고를 배경으로 추가합니다.
      예시:
      .logo {
      width:191px ;
      height:116px ;
      background-image: url('url');
      }

      3. 특정 페이지의 로고를 재정의합니다.
      예시:
      .page-id-OO #header .logo {
      width: 191px; !important;
      height: 54px; !important;
      background-image: url('url');
      }

      실제 CSS 코드는 상황에 따라 달라질 수 있으므로 위와 같은 방법을 적용하면 잘 될 것입니다.

      • 답변 감사드립니다!
        그러나 초보라 ㅠㅠ

        질문 두개만 드려보겠습니다.

        1. 말씀해주신 CSS는 어디에 적용하면 될까요. ㅠㅠ
        /wp-content/themes/avada/assets/css/style.css 쪽에 적용해보니 먹질 않네요 ㅠㅠ

        2. 별도의 슬러그를 사용하고 있어서 ..
        .page-id-00에서 00은 페이지 편집쪽에 마우스를 올려보니

        http://도메인/wp-admin/post.php?post=0000&action=edit 라고 뜨는데
        저기 post=0000의 숫자를 입력하면 될까요?

      • 다음 두 글을 참고해보세요.

        https://avada.co.kr/avada/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%95%84%EB%B0%94%EB%8B%A4-%ED%85%8C%EB%A7%88%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%EC%9E%90-css-%EC%BD%94%EB%93%9C-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0/

        https://www.thewordcracker.com/basic/how-to-check-post-page-and-category-id-in-wordpress/

        그리고 CSS를 조금 알면 작업하는 데 많은 도움이 될 것입니다. 시중에서 적당한 책을 하나 구입하시거나 구글에서 생활코딩을 검색하여 무료로 제공되는 동영상 강의를 보셔도 됩니다.ㅎㅎ

      • 잘 안 되면 테마 소스 파일을 수정하는 방법도 있습니다. 아바다 테마의 header.php 파일에 logo 부분의 코드가 있다면 자식 테마를 만들고 header.php 파일에서 해당 코드 부분을 직접 바꾸어주시면 됩니다. 약간의
        php 지식과 html, 그리고 css 지식이 있으면 가능할 것입니다.

      • 답변 감사드립니다.
        body를 앞쪽에, img를 뒷쪽에 넣어주니 해결이 되었네요. :))

      • .fusion-header .fusion-logo {
        width:auto ;
        height:auto ;
        background-image: url('url');
        }

        이렇게 적용하니까 우선 적용은 되었습니다.

        다만 페이지 ID를 인식하지 못하는것 같네요 ㅠㅠ

        말씀해주신 부분이 되질 않아

        .page-id-00 #side-header .fusion-header .fusion-logo {
        width: auto ;
        height: auto ;
        background-image: url('url');
        }

        이렇게 넣어보았는데도 되질 않네요ㅠㅠ

        어느부분에 문제가 있을까요?ㅠㅠ

  2. 카테고리별로 다른 헤더를 지정하려면 다음과 같은 코드를 생각해볼 수 있습니다.

    if(is_category('카테고리a-슬러그')){
    get_header('a');
    }elseif(is_category('카테고리b-슬러그')){
    get_header('b');
    }

댓글 남기기

댓글을 입력해주세요!
이름을 입력해주세요