푸터에 3단 메뉴 표시하기

사이드바에 메뉴를 추가하면 할수록 점점 세로로 길어져서 구독하기 힘들어진다. 이런 경우 일반적으로 사이드바를 2단으로 하거나 푸터 부분에 메뉴를 표시한다. 여기에서는 푸터 부분에 3단으로 메뉴를 표시하도록 설정한다.

  • 위젯 영역 추가하기
    푸터 부분의 메뉴도 위젯을 이용해서 표시할 수 있게 위젯 영역을 추가한다. 3단의 각 단을 위젯 영역으로 하기 위해 function.php에 register_sidebar()의 지정을 3개 추가한다.

function.php

<?php

(생략)

//위젯
register_sidebar();

register_sidebar();
register_sidebar();
register_sidebar();

//워드프레스 버전 정보의 출력을 정지
remove_action(‘wp_head’,’wp_generator’);

(생략)

?>

[외모]-[위젯]에서 위젯의 설정화면을 열면 ‘사이드바2’~’사이드바4’라고 3개의 위젯 영역이 추가된다.
각 위젯 영역에 표시하고 싶은 메뉴를 추가한다.

footer.php

footer.php를 열고 푸터 부분에 ‘사이드바2’~’사이드바4’를 출력하도록 지정하면 위젯 영역이 표시된다.

<!– 푸터 –>
<div id=”footer”>

<div id=”footermenu”>
<ul>
<?php dynamic_sidebar(2); ?>
</ul><ul>
<?php dynamic_sidebar(3); ?>
</ul><ul>
<?php dynamic_sidebar(4); ?>
</ul>
</div>

<p>Copyright &copy; <?php bloginfo(‘name’); ?>, All rights reserved.</p>
</div>

</div>

<?php wp_footer(); ?>
</body>
</html>

  • 3단 푸터의 디자인 지정하기
    style.css에 스타일시트의 설정을 추가해서 ‘사이드바2’~’사이드바4’를 3단으로 표시한다. 배경은 어둡게 해서 콘텐츠 부분 및 사이드바와 구별되게 디자인한다.

출처: 바꾸면서 배우는 워드프레스 디자인

“푸터에 3단 메뉴 표시하기”에 대한 한개의 댓글

답글 남기기