このサイトはJavaScriptがオンになっていないと正常に表示されません

WordPress オリジナルテーマの作り方 3.0+

thumb_wp3

WordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。PHPの知識は必要ありませんが(もちろんあった方が楽ですが)、自分でデザインをするためのPhotoshopとCSSの知識は必要です。


WordPress オリジナルテーマの作り方 3.0+

WordPress オリジナルテーマ作成 完璧ガイド

  1. WordPressをローカルにインストールする
  2. WordPress オリジナルテーマの作り方 ←今ここ
  3. WordPress オリジナルテーマをアップロードする

WordPress オリジナルテーマの作り方 3.0+ 目次

  1. WordPressのコーディングに入る前に
  2. テーマ用フォルダを作成する
  3. style.css
  4. header.php
  5. sidebar.php
  6. footer.php
  7. index.php
  8. ループを理解する
  9. ループをコピペする
  10. functions.php
  11. テーマを確認してみる
  12. single.php
  13. page.php
  14. HTMLファイルを削除して…完成!

1. WordPressのコーディングに入る前に

この記事で説明されているテーマ“New World”、HTML/CSSテンプレートファイルがセットになったサンプルファイルをダウンロードしてファイルを見ながらこの記事を読むとより分かりやすいと思います!このサンプルテーマ“New World”ではカスタムウィジェット、カスタムメニュー、アイキャッチ画像機能がついています。詳しいテーマの仕様は「無料WordPressテーマ『New World』作りました」をご覧ください。

フロントエンド

作り始める前に、デフォルトでインストールされているTwenty tenのテーマを見てみましょう。ヘッダー、ウィジェット、ナビゲーション、フッターなどなど…このように配置されています。

Twenty Tenテーマ index.php

Twenty Tenテーマ index.php

デザイン

上記の構成を頭に入れてデザインしていきます。デザインするのはホーム用(index.php)と各記事用(single.php)でOK。

Wordpressオリジナルテーマデザイン

HTML + CSS

デザインが完成したら、HTMLとCSSによるスタティックページを各ページ分作成します。サンプルファイルにあるindex.html, single.htmlを確認してみてください。後でこのHTMLファイルにWordpressの機能を付け加えていきます。

HTMLとCSSでスタティックテンプレートを作成

なぜスタティックHTMLファイルを先に作るのか?

多くの場合、後のコーディングを簡単にすることができます。必要なすべてのテンプレートをHTMLで作り、ブラウザーテストをしてWordpressのコードに置き換え・追加します。そうすることでテーマを作成する時にHTMLやCSSのバグを心配する必要がなくなります。

WordPressのテーマはどのように動作するのか

Twenty Tenテーマのフォルダー (wp-content/themes/twentyten)を見ると、たくさんのPHPファイル(テンプレートファイルと呼ばれます)と一つの style.cssファイルがあるのがわかります。トップページには実はいくつかのテンプレートファイルが使用されているのです。(index.phpに はheader.php, sidebar.php, footer.phpが使用されています。)

テンプレート階層についてのより詳しい情報はこちら

どう分割されているのか

複数のファイル(header.php, sidebar.php, footer.php)をどこへ分割するのか理解しましょう。下記画像はindex.phpがどのように分割されているか、簡単に説明しています。

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

2. テーマ用フォルダを作成する

wp-content/themesフォルダーに作成したHTMLファイルのあるフォルダーをコピーし、わかりやすい名前(“newworld”など)をつけます。そのフォルダの中にデザインのスクリーンショットを撮り、screenshot.pngという名前で保存します。

Wordpressオリジナルテーマのフォルダ作成

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

3. style.css

1. で作成したオリジナルテーマのCSSファイルを開きます。CSSの冒頭に下記コードをコピペし、テーマの名前やその他の情報を変更します。

もしオリジナルテーマのCSSのファイル名がstyle.css以外の名前の場合は style.css に変更しておいてください。

/*
Theme Name: New World
Theme URI: http://www.webcreatormana.com/newworld-ja/
Description: WordPress 3.0の新機能を搭載したカラフルだけど落ち着きのあるデザインのテーマ
Version: 1.1
Author: Mana
Author URI: http://webcreatormana.com
*/

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

4. header.php

新しいPHPファイルを作成し、header.phpと名前をつけて保存。HTMLファイルのindex.htmlを開き、一番上からヘッダー部分が終わるところまでをコピーし、新しく作成したheader.phpにペーストします。

<!DOCTYPE html>
<html lang="ja">
<head>
     <meta charset="UTF-8">
     <title>New World - HTML/CSSテンプレート</title>
     <meta name="description" content="WordPress 3.0用の無料テーマです。">
     <meta name="keywords" content="WordPress 無料 テーマ, WordPress テーマ, WordPress 3.0 テーマ, WordPress テンプレート, WordPress 無料テンプレート">

<!-- External files -->
     <link rel="stylesheet" href="style.css">

<!-- Favicon, Thumbnail image -->
     <link rel="shortcut icon" href="images/favicon.ico">
</head>

<body>
     <div id="page">
          <div id="wrapper">

<!-- Header -->         
               <div id="header">
                    <h1><a href="/" class="blog_title">New World - HTML/CSSテンプレート</a></h1>
                    <p>WordPressの無料テーマ。商用利用も可能です!</p>
                    <ul id="nav">
                         <li class="current_page_item"><a href="/">ホーム</a></li>
                         <li>
                              <a href="#">このブログについて</a>
                              <ul>
                                   <li><a href="#">サブメニュー 1-A</a>
                                        <ul>
                                             <li><a href="#">サブメニュー 2-A</a></li>
                                             <li><a href="#">サブメニュー 2-B</a></li>
                                        </ul>
                                   </li>
                                   <li><a href="#">サブメニュー 1-B</a></li>
                                   <li><a href="#">サブメニュー 1-C</a></li>
                                   <li><a href="#">サブメニュー 1-D</a></li>
                                   <li><a href="#">サブメニュー 1-E</a></li>
                              </ul>
                         </li>
                         <li><a href="#">中の人について</a></li>
                         <li><a href="#">お問い合わせ</a></li>
                    </ul><!-- /#nav -->
               </div><!-- /#header -->

<title>, <link>(CSS、ファビコン用), <h1>, <p> 部分のPHPコードを下記からコピペします。また、</head> の直前に <?php wp_head(); ?> を追加。ページごとにBodyのクラスを変更するため、 <body <?php body_class(); ?>>をBody部分に追加。

<!DOCTYPE html>
<html lang="ja">
<head>
     <meta charset="UTF-8">
     <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
     <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSSフィード" href="<?php bloginfo('rss2_url'); ?>">
    
     <meta name="description" content="WordPress 3.0用の無料テーマです。">
     <meta name="keywords" content="WordPress 無料 テーマ, WordPress テーマ, WordPress 3.0 テーマ, WordPress テンプレート, WordPress 無料テンプレート">


<!-- External files -->
     <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">

<!-- Favicon, Thumbnail image -->
     <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico">
    
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
     <div id="page">
          <div id="wrapper">

<!-- Header -->         
               <div id="header">
                    <?php if(is_home()): // ホームが表示されている場合、ブログタイトルを H1 で表示 ?>
                         <h1><a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a></h1>
                    <?php else: // ホーム以外のページが表示されている場合は H1 を削除。各記事やページのタイトルに H1 を使用 ?>
                         <a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a>
                    <?php endif; ?>
                   
                    <p><?php bloginfo('description'); ?></p>

ナビゲーションメニュー(wp_nav_menu)

カスタムメニューを追加するため、<ul id="nav"> の部分を <?php wp_nav_menu( array('menu_id' => 'nav' )); ?> に置き換えます。

<?php wp_nav_menu( array('menu_id' => 'nav' )); ?>
</div><!-- /#header -->

wp_nav_menuの詳しい説明はこちら

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

5. sidebar.php

オリジナルテーマのフォルダーに新たにPHPファイルを作成し、sidebar.phpと名づけて保存。そこへindex.html内にある <div id="side"> の部分をコピーし、sidebar.phpにペーストします。今回はカスタムウィジェットを使用するので、<li class="widget-container"> の部分を <?php dynamic_sidebar( 'side-widget' ); ?> に置き換えます。

<div id="side">
    <div class="widget-area">
        <ul>
            <?php dynamic_sidebar( 'side-widget' ); ?>
        </ul>
    </div><!-- /.widget-area -->
 </div><!-- /#side -->

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

6. footer.php

新規PHPファイルを作り、footer.phpという名前で保存。index.htmlの <br class="clear"></div><!-- /#contents --> から </html> まで(下記部分)をコピーし、footer.phpにペーストします。

<br class="clear">
               </div><!-- /#contents -->
              
<!-- Footer -->              
               <div id="footer">

                    <div class="widget-area">
                         <ul>
                              <li class="widget-container">
                                   <h3>最近の投稿</h3>
                                   <ul>
                                        <li><a href="#">Styling Test</a></li>
                                        <li><a href="#">iPhone 4の特徴</a></li>
                                        <li><a href="#">アンケート</a></li>
                                        <li><a href="#">Styling Test</a></li>
                                        <li><a href="#">iPhone 4の特徴</a></li>
                                   </ul>
                              </li><!-- /.widget-container -->
                         </ul>
                    </div><!-- /#first .widget-area -->

                    <div class="widget-area">
                         <ul>
                              <li class="widget-container">
                                   <h3>最近の投稿</h3>
                                   <ul>
                                        <li><a href="#">Styling Test</a></li>
                                        <li><a href="#">iPhone 4の特徴</a></li>
                                        <li><a href="#">アンケート</a></li>
                                        <li><a href="#">Styling Test</a></li>
                                        <li><a href="#">iPhone 4の特徴</a></li>
                                   </ul>
                              </li><!-- /.widget-container -->
                         </ul>
                    </div><!-- /#second .widget-area -->

                    <div class="widget-area">
                         <ul>
                              <h3>検索</h3>
                              <li class="widget-container">
                                   <form action="#" id="searchform" method="get">
                                   <div>
                                        <input type="text" id="s" name="s" value="" size="25">
                                        <input type="submit" value="検索" id="searchsubmit">
                                   </div>
                                   </form>
                              </li><!-- /.widget-container -->
                         </ul>
                    </div><!-- /#third .widget-area -->
                   
                    <p class="copy">
                         &copy; 2010 New World. All rights reserved.
                         Theme Design by <a href="http://www.webcreatormana.com/">Mana</a>;
                         from <a href="http://www.webcreatorbox.com/">Webクリエイターボックス</a>;
                    </p>

               </div><!-- /#footer -->
          </div><!-- /#wrapper -->
     </div><!-- /#page -->

</body>
</html>

ここにもカスタムウィジェットを使用するので、<div class="widget-area"> の部分を <?php dynamic_sidebar( 'footer-widget' ); ?> に置き換えます。コピーライト部分も下記コードに置き換え、</body> の直前に <?php wp_footer(); ?> を追加。

                    <br class="clear">
               </div><!-- /#contents -->
              
<!-- Footer -->              
               <div id="footer">
              
                    <?php dynamic_sidebar( 'footer-widget' ); ?>
                   
                    <p class="copy">
                         &copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.
                         Theme Design by <a href="http://www.webcreatormana.com/">Mana</a>;
                         from <a href="http://www.webcreatorbox.com/">Webクリエイターボックス</a>;
                    </p>

               </div><!-- /#footer -->
          </div><!-- /#wrapper -->
     </div><!-- /#page -->

<?php wp_footer(); ?>
</body>
</html>

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

7. index.php

ついにトップページの作成です。index.htmlを開き、<!-- Contents --> 以下の部分だけを残しindex.phpとして保存します。<?php get_header(); ?><?php get_sidebar(); ?><?php get_footer(); ?> をレイアウトにあう用に挿入します。

<?php get_header(); ?>

<!-- Contents -->              
               <div id="contents">
                    <div id="main">
                         <div class="post">
                              <h2 class="title">
                                   <a href="#" title="ここにブログ記事のタイトルが入ります。長くなっても大丈夫。">
                                        ここにブログ記事のタイトルが入ります。長くなっても大丈夫。
                                   </a>
                              </h2>
                              <div class="blog_info">
                                   <ul>
                                        <li class="cal">2010年9月28日</li>
                                        <li class="cat"><a href="#">カテゴリーA</a>, <a href="#">カテゴリーB</a></li>
                                        <li class="tag"><a href="#">タグ1</a>, <a href="#">その他タグ</a></li>
                                   </ul>
                                   <br class="clear" />
                              </div>
                             
                              <p>
                                   記事の概要文が表示されます。Moreタグから上の部分ですね。大まかな内容を書いてユーザーの関心をひいちゃいましょう。記事の概要文が表示されます。Moreタグから上の部分ですね。大まかな内容を書いてユーザーの関心をひいちゃいましょう。記事の概要文が表示されます。Moreタグから上の部分ですね。大まかな内容を書いてユーザーの関心をひいちゃいましょう。
                              </p>
                             
                              <img class="attachment-post-thumbnail" src="images/ph_thumb.jpg" alt="サムネイル画像" width="220" height="165">
                              <p><a href="#" class="more-link">続きを読む</a></p>
                         </div><!-- /.post -->
                        
                         <!-- ...<div class="post">略 -->
                        
                         <div class="nav-below">
                              <span class="nav-previous"><a href="#">古い記事へ</a></span>
                              <span class="nav-next"><a href="#">新しい記事へ</a></span>
                         </div><!-- /.nav-below -->
                        
                    </div><!-- /#main -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

8. ループを理解する

下の画像はどのようにループが動作するのかを説明しています。ループは記事を表示させるため、また何を表示させるかをコントロールするためにあります。基本的に、ブログ内に記事があるかをチェックし、もしあればその記事を表示、なければ「記事がみつかりません」と表示します。

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

9. ループをコピペする

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> からループを開始し、スタティックテキストをWordpressテンプレートタグ(タイトル、リンク先、日時、カテゴリー、タグ、サムネイル画像、概要文、前後の記事へのリンク、検索ボックス)と置き換えます。

<!-- Contents -->              
<div id="contents">
    <div id="main">
                   
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="post">
                <h2 class="title">
                    <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
                        <?php the_title(); ?>
                    </a>
                </h2>
                <div class="blog_info">
                    <ul>
                        <li class="cal"><?php the_time('Y年m月j日') ?></li>
                        <li class="cat"><?php the_category(', ') ?></li>
                        <li class="tag"><?php the_tags('', ', '); ?></li>
                    </ul>
                    <br class="clear" />
                </div>
                             
                <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
                             
                    <?php the_content('続きを読む'); ?>
                </div><!-- /.post -->
                        
            <?php endwhile; ?>
                       
                <div class="nav-below">
                    <span class="nav-previous"><?php next_posts_link('古い記事へ') ?></span>
                    <span class="nav-next"><?php previous_posts_link('新しい記事へ') ?></span>
                </div><!-- /.nav-below -->
                    
            <?php else : ?>
                    
                <h2 class="title">記事が見つかりませんでした。</h2>
                <p>検索で見つかるかもしれません。</p><br />
                <?php get_search_form(); ?>
                    
            <?php endif; ?>
                        
        </div><!-- /#main -->

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

10. functions.php

新規PHPファイルを作り、functions.phpという名前で保存。サイドバー、フッター用ウィジェットとサムネイル画像の機能を追加するために、下記コードを記述します。

<?php
// ウィジェットエリア
// サイドバーのウィジェット
register_sidebar( array(
     'name' => __( 'Side Widget' ),
     'id' => 'side-widget',
     'before_widget' => '<li class="widget-container">',
     'after_widget' => '</li>',
     'before_title' => '<h3>',
     'after_title' => '</h3>',
) );

// フッターエリアのウィジェット
register_sidebar( array(
     'name' => __( 'Footer Widget' ),
     'id' => 'footer-widget',
     'before_widget' => '<div class="widget-area"><ul><li class="widget-container">',
     'after_widget' => '</li></ul></div>',
     'before_title' => '<h3>',
     'after_title' => '</h3>',
) );

// アイキャッチ画像
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(220, 165, true ); // 幅 220px、高さ 165px、切り抜きモード

// カスタムナビゲーションメニュー
add_theme_support('menus');

?>

ウィジェットについてはこちら、アイキャッチ画像(サムネイル画像)についてはこちら、カスタムナビゲーションメニューの詳しい説明はこちらを参考にしてみてください。

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

11. テーマを確認してみる

これでフロントページのメインとなる部分の設定が完了しました!管理ページへログインし、左側の外観 > テーマから自作のテーマの「有効化」をクリック。ブラウザーでどのように表示されているか確認してみてください。

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

12. single.php

続いて、single.phpのテンプレートを作っていきましょう。これは各記事の単体ページ用ファイルです。先程作成したindex.phpをsingle.phpとして別名保存し、使用すると簡単です。タイトル、本文、前後の記事部分を変更。その後 <?php comments_template(); ?> を追加します。下記コードのハイライト部分が変更した箇所です。

<?php get_header(); ?>

<!-- Contents -->              
               <div id="contents">
                    <div id="main">
                   
               <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                         <div class="post">
                              <h1 class="title"><?php the_title(); ?></h1>
                              <div class="blog_info">
                                   <ul>
                                        <li class="cal"><?php the_time('Y年m月j日') ?></li>
                                        <li class="cat"><?php the_category(', ') ?></li>
                                        <li class="tag"><?php the_tags('', ', '); ?></li>
                                   </ul>
                                   <br class="clear" />
                              </div>
                             
                              <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
                             
                              <?php the_content(); ?>
                         </div><!-- /.post -->
                        
                    <?php endwhile; ?>
                       
                        <div class="nav-below">
                              <span class="nav-previous"><?php previous_post_link('%link', '古い記事へ'); ?></span>
                              <span class="nav-next"><?php next_post_link('%link', '新しい記事へ'); ?></span>
                         </div><!-- /.nav-below -->

<!-- Commetns -->                        
                         <?php comments_template(); ?>
                    
                    <?php else : ?>
                    
                        <h2 class="title">記事が見つかりませんでした。</h2>
                        <p>検索で見つかるかもしれません。</p><br />
                        <?php get_search_form(); ?>
                    
                    <?php endif; ?>
                        
                    </div><!-- /#main -->
                   
<?php get_sidebar(); ?>
<?php get_footer(); ?>

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

13. page.php

12. で作成したsingle.phpをそのままpage.phpとして別名保存します。日時、コメントフォーム、前後の記事へのリンクを削除します。これでpage.phpの完成です… 簡単ですね!

<?php get_header(); ?>

<!-- Contents -->              
               <div id="contents">
                    <div id="main">
                   
               <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                         <div class="post">
                              <h1 class="title"><?php the_title(); ?></h1>
                             
                              <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
                             
                              <?php the_content(); ?>
                         </div><!-- /.post -->
                        
                    <?php endwhile; ?>
                    
                    <?php else : ?>
                    
                        <h2 class="title">記事が見つかりませんでした。</h2>
                        <p>検索で見つかるかもしれません。</p><br />
                        <?php get_search_form(); ?>
                    
                    <?php endif; ?>
                        
                    </div><!-- /#main -->
                   
<?php get_sidebar(); ?>
<?php get_footer(); ?>

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

14. HTMLファイルを削除して…完成!

オリジナルテーマのフォルダー内にあるすべてのHTMLファイルを削除します。(もう必要ないので。)これでベーシックなWordpressのテーマは完成です!Twenty Tenのテーマを見ると他にもたくさんのPHPファイルがありますが、基本的なテーマのみ必要なのであれば、これらのファイルを変更する必要はありません。例えば search.php や 404.phpがテーマのフォルダーになくても、Wordpressは自動的にindex.phpを使ってページを表示させます。テンプレート階層についてのより詳しい情報はこちら

» New Worldのデモを見る

» New Worldをダウンロードする

WordPress オリジナルテーマの作り方 3.0+ 目次へ。

WordPressには機能を追加するための多くのプラグインや、プラグインを使わなくてもカスタマイズできる技がたくさんあります!より素敵なテーマを作成するためにもぜひぜひ参考にしてみてください!

WordPress オリジナルテーマ作成 完璧ガイド

  1. WordPressをローカルにインストールする
  2. WordPress オリジナルテーマの作り方 ←今ここ
  3. WordPress オリジナルテーマをアップロードする
Advertisement

関連する記事

シェアする

  • このエントリーをはてなブックマークに追加

コメント

Web関連記事・お知らせ

もっと表示

Web制作テクニック

もっと表示

インスピレーション・デザイン

もっと表示

Twitter 人気のつぶやき

もっと表示

サイト内検索

中の人ってこんな人

このブログの中の人、Manaです。

Webデザイナー+WebデベロッパーのManaです。 日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。 カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。 現在クリエイター専門の留学サポート企業「Frog」で素敵な広報担当してます。 さらに詳しく知りたいという方は詳細ページへ。 個人的などうでもいいことはTwitter @chibimanaでつぶやいてます。

  • ランダム
  • 新着記事