워드프레스 테마 만들기 | 테마 분할하기 - header, footer, page, single

테마 분할하기

단순한 모양과 기능의 테마라면 functions.php, index.php, style.css만으로도 만들 수 있습니다. 하지만 페이지별로 구성과 디자인을 다르게 하거나, 다양한 기능을 추가하기 위해서는 여러 개의 파일로 테마를 만드는 것이 편합니다.

이번 강좌에서는 공통으로 사용되는 부분을 만들고 가져다 쓰는 방법을 알아보고, 페이지와 글을 출력하는 파일을 따로 만들어보도록 하겠습니다.

header.php , footer.php

모든 페이지의 위에 들어가는 코드는 header.php에, 모든 페이지의 아래에 들어가는 부분은 footer.php에 넣겠습니다. 관리를 편하게 하기 위해 inc 폴더 안에 모아두겠습니다.

inc 폴더를 만들고 그 안에 header.php 파일을 만듭니다. 그리고 index.php에서 다음 코드를 잘라내서 header.php에 붙입니다.

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
<div class="jb-container">
  <div class="jb-header">
    <header>
      <h1 class="jb-site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
      <?php
        wp_nav_menu( array(
          'theme_location'  => 'main_menu',
          'depth'           => 2,
          'fallback_cb'     => false,
          'menu_id'         => 'jb-main-menu',
          'menu_class'      => 'jb-menu',
        ) );
      ?>
    </header>
  </div>

그리고, 위 코드가 있던 자리에는 다음 코드를 추가합니다.

<?php get_template_part( 'inc/header' ); ?>

inc 폴더 안에 footer.php 파일을 만들고, index.php에서 다음 코드를 잘라내서 붙입니다.

  <div class="jb-sidebar">
    <?php
      if ( is_active_sidebar( 'Sidebar 1' ) ) {
        dynamic_sidebar( 'Sidebar 1' );
      }
    ?>
  </div>
  <div class="jb-footer">
    <footer>
      <p>Copyright © <?php bloginfo( 'name' ); ?> All Rights Reserved.</p>
    </footer>
  </div>
</div>
    <?php wp_footer(); ?>
  </body>
</html>

그리고, 위 코드가 있던 자리에는 다음 코드를 추가합니다.

<?php get_template_part( 'inc/footer' ); ?>

이제 페이지의 상단 코드는 header.php에서, 페이지의 하단 코드는 footer.php에서 가져다 씁니다.

page.php

page.php 파일을 만듭니다. page.php 파일이 있으면 페이지를 출력할 때 index.php를 사용하지 않고 page.php를 사용합니다. 따라서 page.php에 아무 내용이 없다면 다음처럼 빈화면이 나옵니다.

page.php에 다음 코드를 추가합니다.

<?php get_template_part( 'inc/header' ); ?>
<div class="jb-content">
  <?php while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <ul>
      <li>Author : <?php the_author(); ?></li>
      <li>Date : <?php echo get_the_date(); ?> <?php echo get_the_time(); ?></li>
    </ul>
    <?php the_content(); ?>
    <?php
      if ( comments_open() || get_comments_number() ) :
        comments_template();
      endif;
    ?>
  <?php endwhile; ?>
</div>
<?php get_template_part( 'inc/footer' ); ?>

그리고 index.php에서 더 이상 필요하지 않은 다음 코드를 삭제합니다.

<?php elseif ( is_page() ) : ?>
  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <ul>
        <li>Author : <?php the_author(); ?></li>
        <li>Date : <?php echo get_the_date(); ?> <?php echo get_the_time(); ?></li>
      </ul>
      <?php the_content(); ?>
      <?php
        if ( comments_open() || get_comments_number() ) :
          comments_template();
        endif;
      ?>
    <?php endwhile; ?>
  <?php endif; ?>

이제 페이지에 접속하면 정상적으로 출력될 것입니다.

single.php

single.php를 만듭니다. single.php가 있으면 글(post)을 출력할 때 index.php를 사용하지 않고 single.php를 사용합니다.

코드는 아래의 [지금까지 만든 테마 파일]을 참고하세요.

참고

 

지금까지 만든 테마 파일

/functions.php

<?php
// Setup
  function cmsfactory_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'automatic-feed-links' );
    register_nav_menus( array(
      'main_menu' => 'Main Menu',
      'footer_menu' => 'Footer Menu',
    ) );
  }
  add_action( 'after_setup_theme', 'cmsfactory_setup' );
// Styles & Scripts
  function cmsfactory_scripts() {
    wp_enqueue_style( 'cmsfactory', get_theme_file_uri( '/style.css' ) );
  }
  add_action( 'wp_enqueue_scripts', 'cmsfactory_scripts' );
// Widgets
  function cmsfactory_widgets_init() {
    register_sidebar( array(
      'name'          => __( 'Sidebar 1' ),
      'before_widget' => '<div class="jb-sidebar-1">',
      'after_widget'  => '</div>',
      'before_title'  => '<h2>',
      'after_title'   => '</h2>'
    ) );
  }
  add_action( 'widgets_init', 'cmsfactory_widgets_init' );

/index.php

<?php get_template_part( 'inc/header' ); ?>
  <div class="jb-content">
    <?php if ( is_category() ) : ?>
      <h2>Category : <?php single_cat_title(); ?></h2>
      <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <?php endwhile; ?>
      <?php endif; ?>
    <?php elseif ( is_tag() ) : ?>
      <h2>Tag : <?php single_tag_title(); ?></h2>
      <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <?php endwhile; ?>
      <?php endif; ?>
    <?php elseif ( is_404() ) : ?>
      <p>Page Not Found</p>
    <?php else : ?>
      <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
          <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
          <p>Category : <?php the_category(', '); ?></p>
        <?php endwhile; ?>
      <?php endif; ?>
    <?php endif; ?>
    <?php
      global $wp_query;
      $big = 999999999;
      echo paginate_links( array(
        'type'        => 'list',
        '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,
        'prev_text'   => __('<'),
        'next_text'   => __('>'),
      ) );
    ?>
  </div>
<?php get_template_part( 'inc/footer' ); ?>

/page.php

<?php get_template_part( 'inc/header' ); ?>
<div class="jb-content">
  <?php while ( have_posts() ) : the_post(); ?>
    <h2>This is Page : <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <ul>
      <li>Author : <?php the_author(); ?></li>
      <li>Date : <?php echo get_the_date(); ?> <?php echo get_the_time(); ?></li>
    </ul>
    <?php the_content(); ?>
    <?php
      if ( comments_open() || get_comments_number() ) :
        comments_template();
      endif;
    ?>
  <?php endwhile; ?>
</div>
<?php get_template_part( 'inc/footer' ); ?>

/single.php

<?php get_template_part( 'inc/header' ); ?>
<div class="jb-content">
  <?php while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <ul>
      <li>Author : <?php the_author(); ?></li>
      <li>Date : <?php echo get_the_date(); ?> <?php echo get_the_time(); ?></li>
      <li>Category : <?php the_category( ', ' ); ?></li>
      <?php if( has_tag() ) : ?>
        <li>Tag : <?php the_tags( '', ' ', '' ); ?></li>
      <?php endif; ?>
    </ul>
    <?php the_content(); ?>
    <?php
      if ( comments_open() || get_comments_number() ) :
        comments_template();
      endif;
    ?>
  <?php endwhile; ?>
</div>
<?php get_template_part( 'inc/footer' ); ?>

/style.css

/*
  Theme Name: CMS FACTORY
  Author: JB
  Version: 1.0
*/
/* Layout */
* {
  box-sizing: border-box;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}
a {
  text-decoration: none;
  color: #2196f3
}
.jb-container {
  width: 960px;
  margin: auto;
}
.jb-header {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-content {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-sidebar {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
.jb-footer {
  margin: 30px;
  padding: 0px 30px;
  border: 1px solid #cccccc;
}
#jb-main-menu li {
  display: inline-block;
}
ul.page-numbers {
  margin: 30px 0px;
  padding: 0px;
  list-style-type: none;
}
ul.page-numbers li {
  display: inline-block;
}

/inc/footer.php

  <div class="jb-sidebar">
    <?php
      if ( is_active_sidebar( 'Sidebar 1' ) ) {
        dynamic_sidebar( 'Sidebar 1' );
      }
    ?>
  </div>
  <div class="jb-footer">
    <footer>
      <p>Copyright © <?php bloginfo( 'name' ); ?> All Rights Reserved.</p>
    </footer>
  </div>
</div>
    <?php wp_footer(); ?>
  </body>
</html>

/inc/header.php

<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
<div class="jb-container">
  <div class="jb-header">
    <header>
      <h1 class="jb-site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
      <?php
        wp_nav_menu( array(
          'theme_location'  => 'main_menu',
          'depth'           => 2,
          'fallback_cb'     => false,
          'menu_id'         => 'jb-main-menu',
          'menu_class'      => 'jb-menu',
        ) );
      ?>
    </header>
  </div>

Created on 2018-04-19 17:27 | Updated on 2018-11-10 19:01

워드프레스 프리미엄 테마 사이트

  • Elegant Themes
    80여 개의 테마를 한꺼번에 $89에 판매하는 경제적인 테마 사이트 / 1년 업데이트 / 무제한 사이트
  • ThemeForest
    10000여 개의 테마가 거래되는 세계 최대 워드프레스 테마 오픈 마켓 / 계속 업데이트 / 1개 애플리케이션

Book

워드프레스 인기 테마