사이트의 특정 페이지나 전체 사이트에서 헤더나 푸터를 제거하고 싶은 경우가 있습니다. 워드프레스에서 아스트라 (Astra) 테마를 사용하는 경우 몇 가지 방법으로 헤더와 푸터 등의 요소를 제거하거나 숨길 수 있습니다.
참고로 아스트라 테마는 현재 100만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 워드프레스 테마 중 하나입니다. Astra는 속도가 빠른 테마로 평가되고 있으며 엘리멘터와 함께 사용하여 쇼핑몰 사이트를 구축하는 데 많이 사용됩니다.
워드프레스 아스트라 테마 헤더 제거하기
개별 페이지에서 헤더/푸터 비활성화하기
개별 페이지나 포스트(게시글)에서 헤더나 푸터 등의 요소를 비활성화할 수 있습니다.
페이지 편집 화면에서 오른쪽 상단의 아스트라 아이콘(①)을 클릭한 다음, 오른쪽 Astra 설정 패널에서 Disable Elements 섹션(②)을 클릭합니다.
Disable Elements (엘리먼트 비활성화) 섹션에서 다음 옵션을 선택할 수 있습니다.
- 헤더 비활성화
- 바닥글 비활성화
- 배너 영역 비활성화
헤더 비활성화를 선택하면 헤더 영역이 제거되고, 바닥글 비활성화를 선택하면 푸터 영역이 제거됩니다.
전체 사이트에서 헤더 제거하기
필터를 사용하여 헤더 제거하기
전체 사이트에서 헤더를 제거하려는 경우 차일드 테마(없는 경우 차일드 테마를 만들도록 합니다)의 함수 파일에 다음과 같은 코드를 추가할 수 있습니다.
/* Remove the Astra Header From Entire Site */
add_action( 'wp', 'remove_astra_header_callback');
function remove_astra_header_callback(){
remove_action( 'astra_header', 'astra_header_markup' );
}FTP/SFTP에 접속하여 자식 테마 폴더(예: /wp-content/themes/astra-child/) 아래의 함수 파일(functions.php)에 상기 코드를 추가하여 테스트해 보세요.
헤더 빌더에서 헤더 비활성화하기
다른 방법으로 아스트라 테마의 헤더 빌더에서 헤더 요소를 비활성화하는 것도 생각해볼 수 있습니다.
모양 (워드프레스 버전에 따라 "디자인" 또는 "외모") » 사용자 정의하기 » 헤더 빌더를 클릭합니다.
아래와 같은 그림이 표시되면 헤더 요소들을 비활성화할 영역(예: Primary Header) 왼쪽의 톱니바퀴 모양의 아이콘을 클릭합니다. (아스트라 테마의 헤더 빌더에는 "주 헤더", "머리글 위", "머리글 아래" 등 3개의 헤더 영역이 있습니다.)
General 탭의 가시성 섹션에서 데스크톱, 태블릿, 모바일 기기에 대하여 모두 비활성화합니다.
위의 그림과 같이 표시되면 모든 기기에서 비활성화된 것입니다. 다시 각 기기 아이콘을 클릭하면 색깔이 바뀌면서 활성화됩니다.
공개 버튼을 클릭하고 사이트를 살펴보면 사이트의 모든 페이지에서 헤더가 비활성화된 것을 확인할 수 있습니다. (헤더가 여전히 표시된다면 캐시 플러그인의 캐시를 삭제하고 브라우저 캐시도 삭제한 후에 다시 살펴보시기 바랍니다.)
푸터 영역을 모든 사이트에서 제거하려는 경우에도 비슷한 방법으로 가능합니다. 모양 » 사용자 정의하기 » 푸터 빌더로 이동하여 푸터를 데스크톱, 태블릿, 모바일 기기에 대하여 비활성화하면 모든 사이트에서 푸터가 표시되지 않습니다.
CSS를 사용하여 헤더 숨기기
CSS를 사용하여 헤더를 숨기는 것도 가능합니다. 이 경우 실제 헤더는 로드되지만, 브라우저에서 사용자들에게 표시되지 않습니다.
일부 페이지에서만 헤더를 숨기고자 할 때 유용할 수 있습니다. 또한, 특정 요소만 숨기고자 할 때에도 CSS가 유용합니다. 기본적인 CSS를 이해하면 어렵지 않게 특정 요소를 숨길 수 있습니다. 예시:
.site-header {
display: none;
}하지만 사이트의 모든 페이지에서 헤더를 숨기려는 경우에는 상기에 제시된 방법으로 시도하는 것이 바람직할 것 같습니다. CSS는 실제로 제거하는 것은 아니고 눈에 보이지 않게 숨길 뿐입니다.
마치며
이상으로 Astra 테마에서 특정 페이지 또는 전체 사이트에서 헤더를 제거하는 방법에 대하여 살펴보았습니다.
GeneratePress 등 다른 테마에서도 비슷한 방법으로 시도할 수 있으며, 방법은 테마에 따라 조금씩 다릅니다.
댓글 남기기