CMS FACTORY

워드프레스 테마 만들기 | 글 목록 만들기

조건부 태그(Conditional Tags)

첫화면일 때, 글일 때, 페이지일 때, 카테고리를 클릭했을 때, 태그를 클릭했을 때, 검색을 했을 때 등, 특정 조건을 만족할 때 출력하는 내용을 다르게 정할 수 있습니다.

이때 사용하는 것이 조건부 태그입니다. 조건부 태그는 워드프레스 내장 함수로, 다양한 상황에 대하여 정의하고 있습니다.

예를 들어 is_page()는 페이지인지 확인하는 조건부 태그입니다.

if ( is_page() ) { 
  A
}

라고 하면, 페이지인지 검사하여 만약 페이지라면 A를 실행시킵니다.

상당히 많은 조건부 태그가 있는데, 우리가 사용할 것은 다음 다섯 가지입니다.

is_single()
is_page()
is_category()
is_tag()
is_404()

구조는 다음처럼 만들겠습니다.

<?php if ( is_single() ) : ?>
  A
<?php elseif ( is_page() ) : ?>
  B
<?php elseif ( is_category() ) : ?>
  C
<?php elseif ( is_tag() ) : ?>
  D
<?php elseif ( is_404() ) : ?>
  E
<?php else : ?>
  F
<?php endif; ?>
  G

글이라면 A, 페이지라면 B, 카테고리라면 C, 태그라면 D, 존재하지 않는 페이지라면 E, 어떤 것에도 해당하지 않는다면 F를 출력하라는 뜻입니다. G에는 페이지네이션을 넣을 겁니다.

위 코드를 index.php의

<h2>Content</h2>

대신 넣어주세요.

어떤 조건도 만족하지 않을 때 나올 내용 만들기

제일 먼저 만들 거는 어떤 조건도 만족하지 않을 때 나올 내용입니다. F 자리에 다음 코드를 넣으세요.

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php endwhile; ?>
<?php endif; ?>

출력할 게 있다면, 링크가 달린 제목을 출력하라는 뜻입니다. 이제 첫페이지로 가면 다음처럼 나옵니다.

출력되는 글의 개수는 설정에서 정합니다.

[설정 - 읽기]에 있는 [페이지당 보여줄 글의 수]에서 4라고 되어 있으면 4개의 글 제목이 나오는데...

5개의 제목이 나오는 이유는 Template: Sticky가 고정된 글이기 때문입니다.

고정을 해제하면...

설정한 개수 4개가 정확히 나옵니다.

제목 이외에도 작성자, 날짜, 카테고리, 태그, 글 내용, 글 내용의 요약글 등 여러 정보를 같이 출력할 수 있습니다. 예를 들어 카테고리를 출력하고 싶다면

<p>Category : <?php the_category(', '); ?></p>

를 추가합니다.

다음 강좌에서 글을 출력하는 코드를 만들텐데, 거기에 출력할 수 있는 것들은 글 목록에도 출력할 수 있다고 보시면 됩니다.

카테고리에 속한 글 목록 만들기

C 자리에 다음 코드를 넣습니다.

<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; ?>

선택한 카테고리 이름과, 그 카테고리에 속한 글의 제목을 출력합니다.

태그에 속한 글 목록 만들기

태그도 카테고리와 같은 방식으로 만듭니다. D 자리에 다음 코드를 넣으세요.

<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; ?>

404 페이지 만들기

E 자리에 다음 코드를 넣습니다.

<p>Page Not Found</p>

존재하지 않는 페이지로 접속하면 Page Not Found가 출력됩니다.

페이지네이션 만들기

페이지네이션은 paginate_links() 함수로 만들겠습니다. G 자리에 다음 코드를 넣습니다.

<?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'   => __('>'),
  ) );
?>

이제 조건에 맞는 글 개수가 설정한 개수보다 많다면, 페이지네이션이 출력됩니다.

코드는 다음처럼 만들어집니다.

<ul class="page-numbers">
  <li><span aria-current="page" class="page-numbers current">1</span></li>
  <li><a class="page-numbers" href="...">2</a></li>
  <li><a class="page-numbers" href="...">3</a></li>
  <li><span class="page-numbers dots">…</span></li>
  <li><a class="page-numbers" href="...">10</a></li>
  <li><a class="next page-numbers" href="...">&gt;</a></li>
</ul>

가로로 나오도록 만들겠습니다.

ul.page-numbers {
  margin: 30px 0px;
  padding: 0px;
  list-style-type: none;
}
ul.page-numbers li {
  display: inline-block;
}

참고

Reference
Conditional Tags, have_posts(), the_post(), the_permalink(), the_title(), the_category(), single_cat_title(), single_tag_title(), paginate_links()

지금까지 만든 테마 파일

/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' );

/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() ) : ?>
      A
    <?php elseif ( is_page() ) : ?>
      B
    <?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">
    <h2>Sidebar</h2>
  </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;
}

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

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

CMS FACTORY

워드프레스 테마 만들기 | 글 목록 만들기

조건부 태그(Conditional Tags)

어떤 조건도 만족하지 않을 때 나올 내용 만들기

카테고리에 속한 글 목록 만들기

태그에 속한 글 목록 만들기

404 페이지 만들기

페이지네이션 만들기

참고

지금까지 만든 테마 파일

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

Book

워드프레스 인기 테마

Recent Tutorials

Copyright © CMS FACTORY All Rights Reserved.

워드프레스 테마 만들기 | 글 목록 만들기

조건부 태그(Conditional Tags)

어떤 조건도 만족하지 않을 때 나올 내용 만들기

카테고리에 속한 글 목록 만들기

태그에 속한 글 목록 만들기

404 페이지 만들기

페이지네이션 만들기

참고

지금까지 만든 테마 파일

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

Related Articles

Book

워드프레스 인기 테마

Recent Tutorials

Copyright © CMS FACTORY All Rights Reserved.