WP홈페이지 제작 - 메가푸터 제작

푸터(Footer)는 홈페이지나 웹사이트 하단부에 위치하면서 저작권 정보 및 연락처 등이 표기되는 공간입니다. 과거에는 단지 앞에서 적은 것 정도만 출력하는 경우가 많았지만 요즘은 이 외에 여러 컨텐츠를 넣고 있는 추세이고 이런 콘텐츠가 노출되는 푸터를 메가푸터(Mega Footer)라고 합니다. 아래는 Avada 테마의 메가푸터 입니다.

 

 

 

대부분의 유료 테마를 보면 푸터 부분에 글 모음(월별), 최근 댓글, 갤러리 썸네일, 로그인 링크 등이 들어가 있는 것을 쉽게 찾을 수 있죠.

_S 테마는 기본적인 저작권 정보(카피라이트)만 들어가 있습니다. 그것도 고치려면 footer.php 를 수정해야 하죠. 이 기본적인 푸터를 메가푸터로 업그레이드 해 보겠습니다. 방법은 푸터 영역에 사이드바 처럼 위젯을 넣을 공간을 만들어 주고 그곳에 위젯을 추가하면 됩니다.

 

우선 functions.php 에 다음의 코드를 추가합니다.

⁄* 푸터 위젯 영역 추가 함수 *⁄
if ( function_exists('register_sidebar') ) { 
	register_sidebar();
	register_sidebars(3, array('name'=>'Footer %d')	); 
}

 

 

 

푸터 부분에 사이드바 처럼 위젯을 넣을 수 있게 하는 함수입니다. 위의 코드 중 "숫자 3"이 나오는데 공간을 몇 개나 만들 것인가 정하는 부분입니다. 보통 메가푸터는 3~4 개의 단으로 구성되는 경우가 많습니다.

 

 

다음은 footer.php를 열고, 위젯을 넣을 공간을 HTML 태그로 만듭니다.

<footer id="colophon" class="site-footer" role="contentinfo"> 아래 줄에 다음의 코드를 입력합니다.

<div id="megafooter" class="row"><!-- 메가푸터:위젯 -->
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 1') ) : ?>
		<?php endif; ?>
	<⁄div>
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 2') ) : ?>
		<?php endif; ?>
	<⁄div>
	<div class="span4">
		<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer 3') ) : ?>
		<?php endif; ?>
	<⁄div>
<⁄div><!-- .row:메가푸터:위젯끝 -->

<DIV> 요소를 사용하여 위젯이 들어갈 공간을 만들었습니다.

 

 

 

 

관리자 메뉴의 "외모 - 위젯"으로 이동하면 Footer1, 2, 3 이라는 이름의 위젯 영역이 생성된 것을 볼 수 있습니다.

 

 

 

좌측의 "사용할 수 있는 위젯"에서 각 푸터 영역으로 위젯들을 드래그&드롭하고 각각 [저장하기]를 클릭한 다음 홈 화면을 확인해봅니다.

 

 

스케쥴, 최근 댓글, 홈페이지 이용안내 라고 하는 3개의 내용이 푸터에 추가된 것을 확인할 수 있습니다.

 

 

이제 스타일을 수정해서 조금 다듬어야 합니다. custom.css 를 열고 아래의 코드를 추가합니다.

상단의 더블라인을 가지고 배경이 밝은 회색으로 채워진 푸터가 만들어진 것을 확인할 수 있습니다.

⁄*------------------------------------------------------------
 푸터 수정
 *------------------------------------------------------------
 *⁄
⁄* 푸터 전체 모양 *⁄
.site-footer {
  margin-top: 4em;
  border-top: 3px double #aaa;
  background-color: #efefef;
}

⁄*푸터 위젯 제목 및 리스트 크기 *⁄
#megafooter li { list-style: none; }
.widgettitle { font-size: 1.6em; border-bottom: 1px solid #aaa; }

 

 

모양이 좀 많이 별루지만... 메가푸터 맞습니다;;; 스타일 수정을 더 하면 멋지게 나오겠죠.

 

부족한 글이나마 도움이 되었다면 "좋아요" 부탁드립니다.