워드프레스 테마 만들기 | 테마 분할하기 > 기본 분할하기

지금까지 index.php 파일 하나로 테마의 기본 구조를 만들었습니다. 다음 챕터부터는 다양한 형식의 페이지들을 디자인할 것인데, 모든 페이지에 공통적으로 들어가는 내용은 분리를 한 후 각 페이지에서 불러오는 게 좋습니다. 그래야 변경 사항이 생겼을 때 쉽게 수정 작업할 수 있고, 새 페이지를 만들 때에도 코딩의 양이 줄어듭니다.

index.php 파일을 총 4개로 나누겠습니다.

  • header.php : head와 사이트 제목
  • sidebar.php : 오른쪽 사이드바
  • footer.php : Copyright
  • index.php : 나머지

index.php에서 분리되어 나간 곳에 다음의 코드를 넣습니다.

  • <?php get_header(); ?> : header.php를 불러옵니다.
  • <?php get_sidebar(); ?> : sidebar.php를 불러옵니다.
  • <?php get_footer(); ?> : footer.php를 불러옵니다.

분리 후 각 파일의 내용은 다음과 같습니다.

header.php

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php bloginfo('name'); ?> <?php wp_title('|'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <div id="container">
      <div id="header">
        <h1>
          <a href="<?php echo home_url(); ?>">
            <?php bloginfo('name'); ?>
          </a>
        </h1>
        <p><?php bloginfo('description'); ?></p>
      </div>

sidebar.php

<div id="sidebar">
  <h2>Menu</h2>
  <?php
    wp_nav_menu( array(
      'theme_location' => 'main_menu',
      'fallback_cb' => false,
      'menu_class' => 'jb-menu',
    ));
  ?>
  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Right Sidebar') ) : ?>
  <?php endif; ?>
</div>

footer.php

      <div id="footer">
        <h3>Copyright <?php bloginfo('name'); ?> All Rights Reserved.</h3>
      </div>
    </div>
    <?php wp_footer(); ?>
  </body>
</html>

index.php

<?php get_header(); ?>
<div id="main">
  <div id="content">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <div class="jb-post-list">
        <h2>
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h2>
        <p>
          <?php echo get_the_date(); ?> <?php echo get_the_time(); ?>
          | Category : <?php the_category(', '); ?>
        </p>
        <?php
          if ( has_post_thumbnail() ) {
            the_post_thumbnail( array(100,100), array(
              'class' => 'jb-thumbnail',
            ) );
          }
        ?>
        <?php the_excerpt(); ?>
      </div>
    <?php endwhile; else: ?>
      <h2>Sorry!</h2>
    <?php endif; ?>
    <?php
      global $wp_query;
      $big = 999999999;
      echo paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format' => '?paged=%#%',
        'current' => max( 1, get_query_var('paged') ),
        'total' => $wp_query->max_num_pages,
      ) );
    ?>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
Source Code Download : making-wordpress-theme-v1-chapter-4-1.zip

Created on 2014-01-22 17:38 | Updated on 2017-04-19 16:20

Book navigation