푸터(Footer)는 홈페이지나 웹사이트 하단부에 위치하면서 저작권 정보 및 연락처 등이 표기되는 공간입니다. 과거에는 단지 앞에서 적은 것 정도만 출력하는 경우가 많았지만 요즘은 이 외에 여러 컨텐츠를 넣고 있는 추세이고 이런 콘텐츠가 노출되는 푸터를 메가푸터(Mega Footer)라고 합니다. 아래는 Avada 테마의 메가푸터 입니다.
대부분의 유료 테마를 보면 푸터 부분에 글 모음(월별), 최근 댓글, 갤러리 썸네일, 로그인 링크 등이 들어가 있는 것을 쉽게 찾을 수 있죠.
_S 테마는 기본적인 저작권 정보(카피라이트)만 들어가 있습니다. 그것도 고치려면 footer.php 를 수정해야 하죠. 이 기본적인 푸터를 메가푸터로 업그레이드 해 보겠습니다. 방법은 푸터 영역에 사이드바 처럼 위젯을 넣을 공간을 만들어 주고 그곳에 위젯을 추가하면 됩니다.
우선 functions.php 에 다음의 코드를 추가합니다.
⁄* 푸터 위젯 영역 추가 함수 *⁄
if ( function_exists('register_sidebar') ) {
register_sidebar();
register_sidebars(3, array('name'=>'Footer %d') );
}
다음은 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; }
모양이 좀 많이 별루지만... 메가푸터 맞습니다;;; 스타일 수정을 더 하면 멋지게 나오겠죠.
부족한 글이나마 도움이 되었다면 "좋아요" 부탁드립니다.
'워드프레스 > 중급 홈페이지 제작' 카테고리의 다른 글
| WP홈페이지 제작 - 사이드바 정리와 이미지베너 추가 (0) | 2014.05.08 |
|---|---|
| WP홈페이지 제작 - 페이지번호 추가 (2) | 2014.05.06 |
| WP홈페이지 제작 - 구글지도 넣기 (0) | 2014.05.06 |
| WP홈페이지 제작 - 회사소개 내용 입력 (0) | 2014.05.06 |
| WP홈페이지 제작 - 코멘트(댓글) 부분 수정 (0) | 2014.05.03 |
환타73
디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.
