워드프레스 테마 푸터 빈 공간 삭제|아스트라

아스트라 테마 푸터 빈공간

아스트라 테마를 사용하는 경우 페이지에 충분한 높이의 콘텐츠가 채워지지 않았을 때 푸터 부분 아래에 빈공간이 생기는 것을 확인할 수 있습니다. 페이지에 내용이 없더라도 푸터 부분 하단의 빈공간이 생기지 않고, 가장 아래에 붙어있게 만드는 php 코드 추가로 테마를 편집할 수 있습니다.

테마 편집기로 이동

01. 테마 편집기로 이동

푸터를 가장 하단에 위치하기 위한 php 코드를 작성하기 위해 [테마 디자인] ▶ [테마 편집기]로 이동합니다.

sticky footer php 코드 작성

02. sticky footer php 코드 작성

funcions.php 파일을 클릭하고, 빈 공간에 아래 코드를 입력합니다. /*..*/ 부분은 해당 코드가 어떤 기능을 하는지 설명하는 요약을 주석처리한 것이므로 필요 시 삭제하셔도 무방합니다.

/*******sticky-footer********/
add_action( 'wp_footer', 'astra_footer_align_bottom' );
function astra_footer_align_bottom () {
	?>
	<script type="text/javascript">
		document.addEventListener(
			"DOMContentLoaded",
			function() {
				fullHeight();
			},
			false
			);
		function fullHeight() {
			var headerHeight = document.querySelector("header").clientHeight;
			var footerHeight = document.querySelector("footer").clientHeight;
			var headerFooter = headerHeight + footerHeight;
			var content = document.querySelector("#content");
			content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
		}
	</script>
	<?php
}

차일드테마 PHP 파일 저장

03. 차일드테마 PHP 파일 저장

편집한 차이들테마의 PHP 파일을 저장 후 웹사이트로 이동하여 콘텐츠가 없어 푸터 하단에 빈공간이 생기던 페이지로 이동합니다. 변경된 사항이 정확하게 적용되었는지 확인합니다.

댓글 남기기

이메일은 공개되지 않습니다.