워드프레스 테마 만들기 | 사이드바 만들고 위젯 추가하기

사이드바는 위젯이 들어갈 공간입니다. 사이드바를 만들고 위젯을 추가해보겠습니다.

사이드바 만들기

사이드바는 register_sidebar() 함수로 만듭니다.

  • name : 위젯 이름
  • before_widget : 위젯 앞에 넣을 코드
  • after_widget : 위젯 뒤에 넣을 코드
  • before_title : 위젯 제목 앞에 넣을 코드
  • after_title : 위젯 제목 뒤에 넣을 코드

functions.php에 다음 코드를 추가합니다. Sidebar 1이라는 이름을 가진 사이드바를 등록하는 코드입니다.

// 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에 있는

<h2>Sidebar</h2>

을 다음 코드로 교체합니다.

<?php
  if ( is_active_sidebar( 'Sidebar 1' ) ) {
    dynamic_sidebar( 'Sidebar 1' );
  }
?>

Sidebar 1이 활성화되어 있으면 출력하라는 뜻입니다.

위젯 추가하기

이제 [외모]로 가면 [위젯]이 활성화되어 있고, Sidebar 1이 있습니다.

위젯을 추가하고 사이트로 가면 그 위젯이 출력된 것을 확인할 수 있습니다.

참고

지금까지 만든 테마 파일

/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

<!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>
  <div class="jb-content">
    <?php if ( is_single() ) : ?>
      <?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>
            <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; ?>
      <?php endif; ?>
    <?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; ?>
    <?php elseif ( 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>
  <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>

/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;
}

Created on 2017-11-22 12:09 | Updated on 2017-11-22 12:09

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

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