뉴스서비스 WordPress Theme만들기

안녕하세요. 오늘은 뉴스서비스를 제공하는 사이트의 WordPress Theme을 만들어 볼건데요. Theme을 만드는게 처음이시라면 초간단 WordPress Theme만들기 강좌를 둘러보신 후 학습하시면 더 쉽게 따라오실 수 있으실거에요.

우선 /wp-content/themes폴더 안에 news라는 폴더를 만들어 주세요. 그리고 그 안에 아래와 같이 파일을 만들거에요.

/news/
  ├── style.css
  ├── index.php
  ├── functions.php
  ├── header.php
  ├── footer.php
  ├── sidebar.php        ← 카테고리 메뉴
  ├── single.php         ← 뉴스 상세
  ├── archive.php        ← 카테고리별 뉴스
  └── screenshot.png     ← 테마 미리보기 이미지

style.css를 생성해서 그 안에 기본 스타일을 넣을게요

/*
Theme Name: NewsTheme
Theme URI: https://yourdomain.com
Author: You
Description: A simple WordPress theme for news/blog style websites.
Version: 1.0
*/
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.post {
  background: white;
  padding: 20px;
  margin: 20px 0;
}

그 다음 header.php를 생성해서 HTML을 시작하는 부분을 선언해주세요. 이 파일에는 모든 페이지에 공통으로 들어가는 시작부분을 정의합니다. head태그 안에는 wp_head()만 넣으면 워드프레스가 알아서 필요한 코드를 넣어줍니다. 그리고 페이지 최상단에 사이트이름에 홈링크를 걸어서 언제든지 홈으로 돌아올수 있게 할게요.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <?php wp_head(); ?>
</head>
<body>
  <div class="container">
    <header>
      <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    </header>

그 다음으로 모든 페이지의 마지막에 들어갈 footer.php도 정의해볼게요. 워드프레스가 생성된 년도와 사이트이름을 카피라이트로 넣어줍니다.

    <footer>
      <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
    </footer>
  </div>
  <?php wp_footer(); ?>
</body>
</html>

그리고 카테고리목록을 보여줄 sidebar.php도 생성합니다. 여기서는 wp_list_categories함수를 호출해서 카테고리를 나열하고 카테고리를 클릭하면 카테고리별 뉴스 페이지로 이동하도록 합니다.

<sidebar>
    <div>
    <?php
        wp_list_categories(array(
           'orderby' => 'name',
           'title_li' => ''
        ));
    ?>
    </div>
</sidebar>

그리고 테마의 기본이 되는 첫페이지, index.php에서 위에 정의한 헤더와 푸터, 그리고 사이드바를 불러오도록할게요.

<?php get_header(); ?>
<?php get_sidebar(); ?>
<main>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post">
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <p><?php the_excerpt(); ?></p>
    </div>
  <?php endwhile; else : ?>
    <p>뉴스가 없습니다.</p>
  <?php endif; ?>
</main>
<?php get_footer(); ?>

이제 functions.php를 정의합니다. 아래 코드에서 after_setup_theme라는 액션은 테마를 불러온 후에 실행할 함수명을 지정하는 건데요. add_action('after_setup_theme', 'newstheme_setup');라고 하면 테마를 불러온 후에 newstheme_setup함수를 실행해달라고 하는건데요. 바로 위에 함수 newstheme_setup를 보시면 add_theme_support('title-tag');가 있는데요. 이건 게시글의 제목을 HTML의 Title태그에 넣으라는 뜻입니다.

<?php
function newstheme_setup() {
  add_theme_support('title-tag');
}
add_action('after_setup_theme', 'newstheme_setup');

function newstheme_scripts() {
  wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'newstheme_scripts');

single.php는 뉴스제목을 클릭하고 들어와서 상세뉴스를 보는 페이지입니다.

<?php get_header(); ?>
<article class="post">
  <h2><?php the_title(); ?></h2>
  <p><?php the_date(); ?> | <?php the_author(); ?></p>
  <?php the_content(); ?>
</article>
<?php get_footer(); ?>

archive.php는 카테고리별 뉴스목록을 보여주는 페이지인데요. 사이드바에서 카테고리를 클릭하면 이 페이지를 열게 됩니다.

<?php get_header(); ?>
<h2><?php single_cat_title(); ?></h2>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="post">
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
    <p><?php the_excerpt(); ?></p>
  </div>
<?php endwhile; endif; ?>
<?php get_footer(); ?>

저장이 다 되었으면 뉴스와 카테고리를 몇가지 넣어보도록 하겠습니다. 그리고나서 사이트를 확인해보면 아래와 같이 나오는데요. 최상단에 홈으로 갈수 있는 링크와 그 밑에 사이드바에는 카테고리별 뉴스를 볼수 있게 카테고리목록이 나오고 그 밑으로 뉴스가 하나씩나옵니다.

카테고리를 클릭하면 archive.php에 선언한 대로 카테고리별 뉴스목록을 보여줍니다.

참고로 홈페이지를 캡쳐해서 테마폴더에 screenshot.png로 저장하면 테마 목록에서 썸네일로 사용됩니다.

오늘의 강좌를 활용해서 더 복잡하고 유연한 워드프레스 테마를 만들어보는건 여러분의 몫인것 같습니다. 많은 테마 디자인 기대하겠습니다. 시청해주셔서 감사합니다.