1단계. 나눌 것은 나누고

먼저 할 일은 기본 테마, 그러니까 큐브릭 테마를 복사하는 것입니다. 워드프레스에서 사용하는 테마들은 워드프레스가 설치된 경로 아래, wp-content/themes 에 들어 있습니다. 여기서 default 테마를 MonkeyMagic이라는 이름으로 복사합니다.

-테마 정리하기

자, 이제 이 테마를 우리 식대로 요리하기 위한 준비가 필요합니다. 모든 테마에는 테마의 이름, 저작자, 그리고 버전이나 요약 등 여러 잡다한 정보들이 포함되어 있습니다. 이런 정보들은 워드프레스에 관리자로 접속했을 때 presentation 섹션에서 확인할 수 있으며, 이런 정보가 없는 테마는 사용할 수 없습니다. 이 기본 정보는 style.css 파일에 정의되어 있습니다. 큐브릭 테마에 이미 존재하는 내용과 헷갈리는 것은 곤란하므로, 좋은 방법은 style.css를 삭제하고 새로 만드는 것이 되겠습니다.

Theme Name: MonkeyMagic
Theme URI:
Description: Theme dissection example
Version: 1.0
Author: John Godley
Author URI:

이 내용을 MonkeyMagic 테마 디렉토리에 복사하세요. 자, 이건 시작에 불과하죠?

-큐브릭 테마 삭제

그 다음으로…… 우리는 header.php에서 큐브릭 테마에서 사용되는 특별한 스타일들을 삭제하는 것이 좋겠습니다. 겁내지 마세요, 별 일 아니니까요. 다음 내용에서 빨강색으로 표시된 부분들만 날려버리면 충분합니다.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ““>
<html xmlns=”“>
<head profile=”“>
   <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
   <title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
   <meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats –>
   <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
   <link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
   <link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
   <link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />
   <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
   <style type=”text/css” media=”screen”>
       /* BEGIN IMAGE CSS */
           /*  To accomodate differing install paths of WordPress, images are referred only here,
               and not in the wp-layout.css file. If you prefer to use only CSS for colors and what
               not, then go right ahead and delete the following lines, and the image files. */
       body        { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickbgcolor.jpg”); }    <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single()) && (! is_page())) { ?>
           #page       { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickbg.jpg”) repeat-y top; border: none; } <?php } else { // No sidebar ?>
           #page       { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickbgwide.jpg”) repeat-y top; border: none; } <?php } ?>
           #header     { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickheader.jpg”) no-repeat bottom center; }
           #footer     { background: url(“<?php bloginfo(‘stylesheet_directory’); ?>/images/kubrickfooter.jpg”) no-repeat bottom; border: none;}
           /*  Because the template is slightly different, size-wise, with images, this needs to be set here
               If you don’t want to use the template’s images, you can also delete the following two lines. */
           #header     { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
           #headerimg  { margin: 7px 9px 0; height: 192px; width: 740px; }
       /* END IMAGE CSS */
       /*  To ease the insertion of a personal header image, I have done it in such a way,
           that you simply drop in an image called ‘personalheader.jpg’ into your /images/
           directory. Dimensions should be at least 760px x 200px. Anything above that will
           get cropped off of the image. */
       #headerimg  { background: url(‘<?php bloginfo(‘stylesheet_directory’); ?>/images/personalheader.jpg’) no-repeat top;}
   <?php wp_get_archives(‘type=monthly&format=link’); ?>
   <?php wp_head(); ?>
<div id=”page”>
<div id=”header”>
   <div id=”headerimg”>
       <h1><a href=”<?php echo get_settings(‘home’); ?>”><?php bloginfo(‘name’); ?></a></h1>
       <div class=”description”><?php bloginfo(‘description’); ?></div>
<hr />