조건부 태그(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="...">></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;
}