헤더와 푸터 작성하기

헤더와 푸터 작성하기

템플릿을 편집하면서 웹사이트를 제작한다. 먼저 웹사이트의 톱페이지를 작성하고, 헤더와 푸터를 표시한다.

home.php

<?php get_header(); ?>
<!– 콘텐츠 –>
<div id=”content”>
<p class=”title”>최근 글(RECENT POSTS)</p><?php if(have_posts()): while(have_posts()):
the_post(); ?>
<?php get_template_part(‘content’); ?>
<?php endwhile; endif; ?><?php get_template_part(‘pagenation’); ?>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

header.php

<!DOCTYPE html>
<html>
<head>

인코딩의 종류와 제목 지정하기
<meta charset=”<?php bloginfo (‘charset’); ?>” />
<title><?php bloginfo(‘name’); ?><?php wp_title(); ?></title>
스타일시트 적용하기
<link rel=”stylesheet” href=”<?php bloginfo (‘stylesheet_url’); ?>” type=”text/css” />

</head>
<body>

헤더와 푸터 그룹화하기
<!– 컨테이너 –>
<div id=”container”>
사이트 이름과 사이트 설명 표시하기
<!– 헤더 –>
<div id=”header”>
<h1><a href=”<?php echo home_url(); ?>”><?php bloginfo(‘name’); ?></a></h1>
<p id=”desc”><?php bloginfo(‘description’); ?></p>
RSS 피트 링크 표시하기
<div id=”subinfo”>
<a href=”<?php bloginfo(‘rss2_url’); ?>”><img src=”<?php bloginfo(‘template_url’); ?>
/feed.png” alt=”RSS FEED” width=”28″ height=”28″ /></a>
</div>

<div id=”nav”>
<?php wp_nav_menu(array(
‘theme_location’ => ‘navigation’
)); ?>
</div><?php if(get_header_image()): ?>
<div id=”image”><img src=”<?php header_image(); ?>” alt=”*” width=”<?php echo HEADER_IMAGE_WIDTH; ?>”
height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” /></div>
<?php endif; ?>
</div>

footer.php

저작권 표시하기
<!– 푸터 –>
<div id=”footer”>
<p>Copyright &copy; <?php bloginfo(‘name’); ?>, All rights reserved.</p>
</div>
헤더와 푸터 그룹화 태그 닫기
</div>

</body>
</html>

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

“헤더와 푸터 작성하기”에 대한 한개의 댓글

답글 남기기