워드프레스 테마 만들기 | 글 형식(Post Format) 만들기

Category

글 형식

워드프레스에는 글 형식 기능이 있습니다. 영어로는 Post Format이라고 합니다. 글 형식을 이용하면 글 형식 별로 다른 구성과 디자인이 가능합니다.

워드프레스에서 지원하는 글 형식은 다음과 같습니다.

  • aside
    Typically styled without a title. Similar to a Facebook note update.
  • gallery
    A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
  • link
    A link to another site. Themes may wish to use the first <a href=””> tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
  • image
    A single image. The first <img /> tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.
  • quote
    A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
  • status
    A short status update, similar to a Twitter status update.
  • video
    A single video or video playlist. The first <video /> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
  • audio
    An audio file or playlist. Could be used for Podcasting.
  • chat
    A chat transcript.

테마에서 글 형식을 지원하면 글 쓰는 화면에 지원하는 글 형식이 나옵니다. 예를 들어 Twenty Seventeen이 지원하는 글 형식은 다음과 같습니다.

글 형식 지원하기

글 형식을 지원하기 위해서는 functions.php에 코드를 추가해야 합니다. 만약 image와 quote를 지원하고 싶다면

add_theme_support( 'post-formats', array( 'image', 'quote' ) );

를 추가합니다. 제대로 코드를 넣었다면 다음처럼 글 형식을 선택할 수 있습니다.

글 형식에 사용할 템플릿 만들기

single.php와 같은 코드를 가진 post.php 파일을 만듭니다. 그리고 single.php의 내용은 다음으로 교체합니다.

<?php
  $format = get_post_format();
  get_template_part( 'post', $format );
?>

글 작성할 때 정한 글 형식을 get_post_format()으로 가져옵니다. 이미지를 선택했다면 image를, 인용을 선택했다면 quote를 반환하고, 그 값을 format 변수에 담습니다. 표준이라면 반환하는 값이 없습니다.

get_template_part()를 이용해서

  • 표준이라면 post.php를
  • 이미지라면 post-image.php를
  • 인용이라면 post-quote.php를

불러와서 출력합니다. 만약 이미지인데 post-image.php가 없다면 post.php를 불러옵니다.

post-quote.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>
    <p>Post Format : Quote</p>
    <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' ); ?>

이제 글 형식을 인용으로 정하면 글 제목 밑에 'Post Format : Quote'가 출력됩니다.

참고

지금까지 만든 테마 파일

/functions.php

<?php
// Setup
  function cmsfactory_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'post-formats', array( 'image', 'quote' ) );
    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><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' ); ?>

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

/post-quote.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>
    <p>Post Format : Quote</p>
    <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' ); ?>

/single.php

<?php
  $format = get_post_format();
  get_template_part( 'post', $format );
?>

/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-20 13:37 | Updated on 2018-05-14 10:50