안녕하세요. 오늘은 뉴스서비스를 제공하는 사이트의 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>© <?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로 저장하면 테마 목록에서 썸네일로 사용됩니다.
오늘의 강좌를 활용해서 더 복잡하고 유연한 워드프레스 테마를 만들어보는건 여러분의 몫인것 같습니다. 많은 테마 디자인 기대하겠습니다. 시청해주셔서 감사합니다.