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

2014年8月22日
Wordpress

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

↑私が10年以上利用している会計ソフト！

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

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

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

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

フロントエンド

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

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> から </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="https://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="https://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を開き、 以下の部分だけを残し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 オリジナルテーマ作成完璧ガイド

“WordPress オリジナルテーマの作り方 3.0+” への114件のフィードバック

WordPress オリジナルテーマの作り方 3.0 - leaf より:

2010年11月15日 12:58 pm

[…] http://www.webcreatorbox.com/tech/wordpress3-original-theme/ […]
PHPの分からない初心者向けフリーWordPressテーマ”mypace custom”を配布 | マイペースクリエイターの個人的な日記より:

2010年11月15日 1:04 pm

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
Daily Digest for November 15th | Burikama.net より:

2010年11月15日 6:23 pm

[…] Posted WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス. […]
[今日のブックマーク] 2010年11月11日 | メモ的。より:

2010年11月15日 7:05 pm

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス自作テーマ。いつかやりたいと思って手を出してないので、熟読しました。 […]
WordPress、テーマ。＝＝＞＞　Wordpress オリジナルテーマの… « 学問ノートより:

2010年11月15日 8:53 pm

[…] ＞＞　Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス http://www.webcreatorbox.com/tech/wordpress3-original-theme/ ＞＞　WordPressのオリジナルテンプレートを自作するのに役立つページ。 | […]
» Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス My_Room-bookmarks より:

2010年11月15日 9:32 pm

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
Topics 20101117 | Real Topics より:

2010年11月17日 2:03 pm

[…] WordPress オリジナルテーマの作り方 3.0+ […]
aki より:

2010年11月18日 10:16 am

すごーい！いつも丁寧な記事ありがとうございます★
altrnat より:

2010年11月25日 3:58 am

はじめまして。

普通にコメントさせていただこうと思ったら、長くなったので、下のフォームよりメールさせていただきました。

宜しくお願いします。
OYAYUBI DESIGN ： wordpressテーマを制作するのに参考にしたサイトと書籍より:

2010年11月29日 9:22 pm

[…] WebクリエイターボックスWordPress オリジナルテーマの作り方 3.0+ Webクリエイターボックス Twitter はてなブックマーク […]
Wordpress オリジナルテーマの作り方 3.0+ | 工藤設計のブログより:

2010年12月6日 1:48 am

[…] WordPress オリジナルテーマの作り方 3.0+ […]
卒業制作日誌 » Blog Archive » WordPressのテーマ完成より:

2010年12月24日 3:38 am

[…] 全体の手順 WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
cocolon :: Just another WordPress site » Blog Archive » WordPressテンプレート作成中です。より:

2011年1月5日 8:19 pm

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
papativa.jpリニューアルデザイン | イラストレーターシバチャンのブログ「キョウモイマイチ」より:

2011年1月8日 2:57 pm

[…] WordPressをローカルにインストールする WordPress オリジナルテーマの作り方 3.0+ WordPress オリジナルテーマをアップロードするカテゴリー: ワークス […]
新しくブログ開始です。 | MONOCHROME より:

2011年1月9日 7:21 pm

[…] WordPress オリジナルテーマの作り方 3.0+ […]
Macaron より:

2011年1月12日 10:48 am

はじめまして。パリからです。
ＷＰを他国語にするのに苦労してさまよっていたこちらに辿りつきました。
とても丁寧な説明でかわいいサイトですね。思わずコメントさせていただきました。知識もなく初めてしまったので、個人的にはいまひとつＷＰをうまく使えていませんが、まあ、ボチボチと．．．
読んでいるとぐちゃぐちゃに絡んだ糸が少しづつ解けていくみたいな気になります。
これからも楽しみにしています。
kubo より:

2011年1月14日 8:00 pm

会社のサイト作りで参考になりました、ありがとうございます。
nekiro より:

2011年1月15日 3:47 pm

パクリブログ騒動から、この記事にたどり着きました。WPのタグが独特で勉強するのが面倒くさいと思っていたら、とってもわかりやすい記事で勉強になりました。
また、勉強に来たいと思っています。
個人的なことですが、友人がブリズベンの大水で救助されたそうです。そちらは大丈夫ですか？
◆　P2　◆ ＞＞　WordPress P2 – Google 検索 http:… « the giskor infobank より:

2011年1月27日 11:13 am

[…] ＞＞　Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス http://www.webcreatorbox.com/tech/wordpress3-original-theme/ ＞＞　WordPressのオリジナルテンプレートを自作するのに役立つページ。 | […]
web蜂より:

2011年2月6日 7:11 pm

Manaさん、すごい良いセンス！
このサイト応援しています。
WordPressの記事いつも参考にさせてもらってます。感謝です。
karasuneko Blog » [更新情報] karasuneko Blog リニューアルより:

2011年2月7日 9:34 am

[…] ちなみにWPのオリジナルテーマの作り方は、Webクリエイタボックスのこちらの記事「Wordpress オリジナルテーマの作り方 3.0+」を参考にさせて頂きました！ありがとうございます。 […]
happymonday » Blog Archive » WordPressカスタマイズ記念！ブログ始めます。より:

2011年2月7日 11:36 pm

[…] 作成するのにあたって、とっても参考になったのが、こちらの記事です↓ WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス本を読んでもちんぷんかんぷんだったのですが、 […]
TYRELANDWEBlog » Blog Archive » NEW BLOG!! より:

2011年2月12日 8:42 am

[…] 以下お世話になった参考サイト様です（とてもわかりやすい！） webクリエイターボックス —————- 本家HP！！ TYRELANDWEB.com […]
4rahamaのwebsite » Blog Archive » wordpressで作ってみた。より:

2011年2月19日 4:00 pm

[…] ほんで、たまたま覗かせてもらっていたwebサイトwebcreaterboxさんの記事でwordpressオリジナルテーマの作り方というものを見ました。 […]
QueseracerAi　blog » Blog Archive » ブログ開設より:

2011年3月1日 7:18 pm

[…] […]
rAi より:

2011年3月3日 1:32 pm

はじめまして、manaさん。
この記事のおかげで初心者のあたしにも簡単にWP導入出来ました！有り難うございました(^▽^*)♪
» WordPressのオリジナルテーマを作るときの手順まとめ | binoske.com より:

2011年3月4日 12:44 am

[…] WordPress オリジナルテーマの作り方 3.0+ Webクリエイターボックスさんの各ページのはたらきと、ページごとのコーディングについて。 […]
Wordpress オリジナルテーマの作り方 3.0+ « anzuboo より:

2011年3月15日 12:57 am

[…] http://www.webcreatorbox.com/tech/wordpress3-original-theme/ コメントする LikeBe the first to like this . […]
maili » Q向上を、改めて心に誓ったday より:

2011年3月28日 6:43 pm

[…] Webクリエイターボックスさんの記事を参考にして、ブログの外観も変更完了。 […]
WordPress オリジナルテーマの作り方 WordPress | Luke Itoh Official Weblog より:

2011年3月31日 9:51 pm

[…] 現在のWordPressのバージョンは3.1で、2.92からTwenty tenと言うテーマが標準追加になりました。　このTwenty tenはhtml 5であるためCSSコーディングをはじめたばかりの方や、これからコーディングをしようとしてる方には　ちょっと仕切りが高いかな？と思います。筆者はもうひとつのテンプレートであるデフォルト(default)を基にしたカスタマイズを説明して行きたいと思います。尚　Twenty tenを基にしたカスタマイズは、WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックスにて確認が出来ます。 […]
upharu より:

2011年4月9日 10:51 am

素晴らしいですね！
丁寧な記事でとても参考になりました。
これからも参考にさせていただきます。
ありがとうございました。
オリジナルテーマ : debriefing より:

2011年4月10日 6:48 pm

[…] 今はhtmlのもをテンプレートとして使えるようにphpに作り変えてく最中です。phpはあまり触ったことがにいので「Webクリエイターボックス」の　Wordpress オリジナルテーマの作り方 3.0+ という記事を参考にしながら試行錯誤しながらやっています。 […]
« 東京の印刷会社で働く33歳blog より:

2011年4月13日 9:58 pm

[…] http://www.webcreatorbox.com/tech/wordpress3-original-theme/ […]
takeoo.com » Blog Archive » サイトっぽくさせれるかどうかより:

2011年4月19日 10:16 pm

[…] 今回はテンプレートも借りずにはじめっから作ったので、その気にさせてもらえたサイトさん WordPress オリジナルテーマの作り方 3.0+ […]
wordpressのブログテーマを作ってみた時に利用した技術とかサイトとか。 | デジタル料理人より:

2011年4月25日 1:18 am

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
テストだよー | North Shore Products より:

2011年4月27日 1:07 pm

[…] ついにトップページの作成です。index.htmlを開き、<!– Contents –> 以下の部分だけを残しindex.phpとして保存します。<?php get_header(); ?>、<?php get_sidebar(); ?>、<?php get_footer(); ?> をレイアウトにあう用に挿入します。 view source […]
リンドウ制作日記 » Blog Archive » テーマを変更しました（New World）より:

2011年5月2日 6:01 pm

[…] さらにこの記事を教科書にして、WordPressのテーマを作ってみようと思います。 WordPress オリジナルテーマの作り方 3.0+　（Webクリエイターボックス） […]
WordPressのオリジナルテーマを作る | WordPressでオリジナルのテーマを作るメモ | GraphicDriver より:

2011年5月27日 6:25 pm

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
友松より:

2011年5月30日 10:24 am

大変分かり易いＷＰ情報をありがとうございます。手順にしたがって作ってみようと思います。HTMLの知識はあるのですが、CSSについてはなんとなく敬遠していました。

こんど弊社の花事業のホームページを作ることになり、WPを使おうというところまできましたが、カスタマイズが必要なことがわかり困っていました。

ありがとうございます。^^
森山　裕彬より:

2011年5月31日 3:09 am

最近、知り合いのWEBデザイナーに紹介されて、Manaさんのサイトを見るようになりました。

いつもためになる記事をありがとうございます。
Manaさんの記事を参考に、ワードプレステンプレートを作ってみます。

よろしくお願いします。
CreaMo! より:

2011年6月1日 3:36 am

WordPress3.0のHTML5な新テーマを構築&活用する…

現在、複数のサイト作成を手がけていて、勉強ついでにHTML5での構築をしています。 HTML5自体はもの凄い難しいわけではありません。 JavaScriptも広い意味でHTML5に含まれているので、簡単だとも言えませんが。前回の記事のように、HTML5という宣言をして、divを置き換えて縲怩ﾆやればHTML5のページにはなります。 HTML5化されたテーマファイルを元に作成する HTML5で書くのはいいですが、WordPressを使用するのなら綺麗なコードで仕上がっているテーマフレームワークを元にオ…
muragoya.com » Blog Archive より:

2011年6月14日 9:06 pm

[…] WordPress オリジナルテーマの作り方 3.0+ 古い記事へ […]
「Wordpress3.0+」でオリジナルテーマを作る方法。 | DESING AFFORDANCE より:

2011年6月20日 7:24 pm

[…] いつもお世話になっている、「WEBクリエイターボックス」さんの方で面白い記事を見つけました。 […]
[連載]WordPressでWebサービスを作る方法（4:テーマの作り方） | Stocker.jp / diary より:

2011年6月21日 10:59 am

[…] これを全部作らなければいけないかというと、そんなことは全然ありません。 WordPressのテーマは、最低限 index.php と style.css という2つのファイルがあればできます。テーマの作り方をここで解説しても良いのですが、WordPress 3.x のテーマの作り方は既にWebクリエイターボックスさんの記事で詳しく解説されていてこれ以上分かりやすく書くのは難しいので、こちらを一読されることをおすすめします。 WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
【技】WordPRESS　もろもろまとめ。 : vktec.com より:

2011年6月26日 7:11 pm

[…] WordPress オリジナルテーマの作り方 3.0+ まず、このサイトを見てwpの仕組みとはなんぞやを学びました。 […]
usagism » Blog Archive » 新しくブログ開始です。より:

2011年7月11日 3:34 pm

[…] WordPress オリジナルテーマの作り方 3.0+ […]
心はいつもAirPucci(空元気でもいいから) より:

2011年7月14日 7:22 pm

WordPressのテンプレートを自分で作ってみました…

ブログ更新は久々になりました。この2週間、ずっとこのブログ用にWordPressテンプレート作成に取り組んでいました。面白かったです。自分でwebサイトを立ち上げたのは、たしか20世紀の終わり、1997年ごろでしたか。 htmlコードを書いて日記を書くものだったと思います。その後無料のブログサービスが始まり、2003年にexciteブログでブログを書き始めました。意外な人気ブログになって、もう少し内容を深めいたいと思い、xoops(当時はcubeではないxoops1.x)でコミュニティサイト…
taxi to pattaya より:

2011年7月18日 5:12 am

ありがとう
word テンプレート無料のような | ワードプレスの説明書・ほんわかＢＥＳＴより:

2011年7月20日 8:13 am

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボッ…wordpressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいwordpressのカスタム…はてなブックマークより […]
word press テーマの里 | ワードプレスの説明書・ほんわかＢＥＳＴより:

2011年7月20日 8:14 am

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボッ…wordpressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいwordpressのカスタムデザイン…はてなブックマークより […]
WordPressの自作テーマを作りました | fctale より:

2011年7月25日 9:03 am

[…] WordPress オリジナルテーマの作り方 3.0+ […]
WordPressでブログのカスタマイズに挑戦ぞ。 | WEB備忘録-初心者の奮闘記より:

2011年8月1日 12:11 pm

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
Wanderflow » Blog Archive » wordpressテーマを作ってみたより:

2011年8月1日 11:12 pm

[…] でも、テーマを作るのは予想以上に簡単にできました。参考にしたのはこちらのサイト WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
佐藤　健次より:

2011年8月6日 10:30 am

今まではブログのカスタマイズをちょこちょこする程度のHTMLとCSSの知識しかない初心者ですが、この記事を参考にしたら、自作オリジナルテーマのローカルでの作成まで出来ました！！あとは、PHPを勉強して完全なテーマまで作りこんで、一日も早く公開できるように頑張ります！とっても分かりやすく本当に助かりました！！
WordPressのテーマ制作・参考サイト | WEB備忘録-初心者の奮闘記より:

2011年8月15日 12:30 am

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
blogのデザインを変更しました | a-leap（えーりーぷ）より:

2011年8月18日 6:03 pm

[…] →WordPress オリジナルテーマの作り方 3.0＋ […]
CMS：WordPressのカスタムテーマ作成（１） | ばあば・ままより:

2011年8月23日 10:40 am

[…] WordPress オリジナルテーマの作り方 3.0+ […]
:-) より:

2011年8月23日 11:12 am

最近ワードプレスはじめました！
この記事をみてテーマ作れました。解説ほんとにありがとう！
CMS：WordPressのカスタムテーマ作成（１） | Rana Europe Tours より:

2011年8月30日 9:57 am

[…] WordPress オリジナルテーマの作り方 3.0+ […]
CMS：WordPressのカスタムテーマ作成（２） | Rana Europe Tours より:

2011年8月30日 10:05 am

[…] WordPress オリジナルテーマの作り方 3.0+ […]
bibouloku » Blog Archive » オリジナルテーマの作り方より:

2011年9月5日 3:52 pm

[…] WordPress オリジナルテーマの作り方 3.0+ http://www.webcreatorbox.com/tech/wordpress3-original-theme/ […]
初めて導入したワードプレスプラグイン | 2代Meモより:

2011年9月17日 4:03 pm

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
Wordpress_003 既存サイトをテンプレート化 * How to use Masayuki Goto より:

2011年9月22日 11:29 pm

[…] 参考記事：WordPressオリジナルテーマの作り方３．０＋ […]
「Wordpress3.0+」でオリジナルテーマを作る方法。 | Design Affordance より:

2011年9月28日 3:58 am

[…] いつもお世話になっている、「WEBクリエイターボックス」さんの方で面白い記事を見つけました。 […]
MORIHASHI AKIRA » とりあえず最初はココを見た。より:

2011年9月28日 1:55 pm

[…] http://www.webcreatorbox.com/tech/wordpress3-original-theme/ Comments (0) […]
mihiro より:

2011年10月8日 9:21 pm

wpは初めてでしたが、大変参考になり、助かりましたありがとうございました。
Web Study Note » Blog Archive » テーマを変更しました。より:

2011年10月10日 12:07 am

[…] WordPress オリジナルテーマの作り方 3.0+ﾂ黴を参考にしながら、Web Study Note用のWordPressテーマを作成しました。 […]
【WP】超初心者必見！MTユーザーがつまづきがちなポイント｜スタッフブログ｜株式会社エムハンドより:

2011年10月11日 12:55 pm

[…] ファイル構成など詳しくはWordPress オリジナルテーマの作り方 3.0+で記載されています。 […]
WordPressでブログ作成しました。 – Country Netlife plus より:

2011年10月14日 3:12 pm

[…] で、参考にしようと思ったのが、 WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
学習中です！ | 摩亜爺親爺より:

2011年10月29日 3:11 pm

[…] 参考にさせていただいているのは、こちらのサイト、ウェブクリエーターボックスさん、有難うございます。 […]
かくれんぼ戦略 » Blog Archive » かくれんぼ戦略は、WordPressに移行しました！｜とりさん好き放題ブログ、WordPress版。より:

2011年11月6日 10:54 pm

[…] 参照→ 「WordPress オリジナルテーマの作り方 3.0+」 […]
タイトルは未定 » WordPressのテーマ作成に挑戦より:

2011年11月9日 10:43 pm

[…] タイトルは未定日々の生活をクリエイティブに。 HomeGithubTwitterProfile WordPressのテーマ作成に挑戦 11.09.2011, Inspiration, by miyapong. タイトルの通りWordPressのテーマ作成に挑戦中。今使っているテーマが作成中のものになります。まだhtmlとcssを使っただけの殺風景（シンプル）なデザインになっています。勉強のためにhtml5をベースに作成しています。基本的な作成方法は@chibimanaさんが運営されているブログ「Webクリエイターボックス」のこちらの記事を参考にしました。ベースとなるテーマの形ができたら、あとはコツコツカスタマイズしていくのみですね。とりあえず個人的に作っているだけなので、githubで管理していくことにしています。シンプルだけどおしゃれなデザインに仕上げたいですね！ Tags: webdesign | wordpress 古い記事へコメントをどうぞ返信をキャンセル名前 (必須) メールアドレス (非公開) (必須) ウェブサイト […]
WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ | Design Spice より:

2011年11月17日 12:16 pm

[…] WordPress テーマ作成の具体的な方法は多くのサイトで紹介されるのでそちらを参照してください。 WordPressのオリジナルテーマ作成フロー・基本マニュアル – かちびと. net WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
ケソケソドットコム » Blog Archive » テーマをカスタムする！より:

2011年11月18日 12:41 pm

[…] WEBクリエイターボックスさんのカスタムテーマとテーマの作り方をパクって参考に作っていこうかな。 […]
Contributeを使ってwordpressを更新する | Design Spice より:

2011年11月19日 6:27 pm

[…] WordPress テーマ作成の具体的な方法は多くのサイトで紹介されるのでそちらを参照してください。 WordPressのオリジナルテーマ作成フロー・基本マニュアル – かちびと. net WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
moff&moff » これからwordpressを始めるという人に役に立ったらいいな的まとめより:

2011年11月20日 3:14 pm

[…] h2ospace_php 03/12/10 08:41AM. 技術そして、こっちの記事を熟読する。 WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
11月といえば自分の好きなブログを告白する月らしいです | creativememomemo より:

2011年11月23日 5:45 am

[…] WordPress オリジナルテーマの作り方 3.0+ […]
MEC-Web Design Info » wordpressの知識より:

2011年11月25日 4:27 pm

[…] こちらのページを参考にしてください。カテゴリー: ワードプレスタグ: コメント (0) トラックバック (0) コメントをどうぞトラックバックURL […]
[WP初心者のための]Wordpressテーマの仕組みを理解するために行ったアナログなこと | Olein より:

2011年11月30日 10:44 am

[…] とにかく書きなぐる出力が手元に入ったら、後は読みふけります。そして、書き込みます。DIV要素を囲って、気になるCSSのID名やCLASS名もマーキングします。そして、別のメモに大まかな構造（Header、Main、Wrapなど書き方は様々ですが）を書いていきます。以下にボクが参考にしたサイト様を紹介させてもらいます。一見の価値がある豊富な情報をお持ちのサイトさんばっかりですよ！ CSS ::: WebデザインレシピCSSのカスタマイズや基本が満載です！ WordPress オリジナルテーマの作り方 3.0+ | WebクリエイターボックスWordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者に …この記事に支えられました！などなど、探してみるととても有益な情報を掲載してくれているサイト様がたくさんあるはずです。自分の読み易い、見やすいと感じるサイトさんを見つけてみると良いと思いますよ♪ […]
WordPressでオリジナルテーマを作る前に見ておきたいサイト | indes design より:

2011年12月7日 11:42 pm

[…] これまた力作で、とても勉強になります。 WordPress オリジナルテーマの作り方 3.0+ Webクリエイターボックス […]
Ko Miwa より:

2011年12月8日 3:58 pm

とても参考になりました！
早速実践してみようと思います＾＾
Miyo Yanagawa より:

2011年12月12日 1:55 pm

とても参考になりました。
入門編としてすばらしい！
WordPressでテーマやWebサイトを制作をする際に知っておくと便利そうなTipsまとめ（初心者向け情報多め） - WebCake より:

2011年12月26日 3:31 pm

[…] WordPress オリジナルテーマの作り方 3.0+ […]
くまより:

2011年12月30日 11:19 pm

とても参考になりました！！

おかげでなんとか作ることできました。
目指せ爆速WEB屋！過去2年間かけて知ったリソースを駆使して作るサイトの制作手順！ | バンクーバーのWEB屋より:

2012年1月5日 3:36 pm

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
初！WordPressカスタマイズ | usakoWeb より:

2012年1月20日 11:27 am

[…] sカスタマイズ！！昨日、4時間かけてやっとindex.phpのカスタマイズに成功！！ ”Webクリエーターボックス”のManaさん、ありがとう～(´▽｀)ｱﾘｶﾞﾄ! WordPressとは、なんかこう…いろい […]
Yuko Inoue より:

2012年1月21日 10:47 pm

はじめまして。いつも参考にさせていただいてます。今回もとても丁寧な記事、ありがとうございます！初めてテーマを作成したのですが、エラーがでてしまって。。。
の部分を
へ直してみたところ、エラーが解消されましたので、念のためお伝えします。

それではこれからも楽しみにしています！
ブログのテーマを自作のものに変更しました!! | 2daimemo より:

2012年1月28日 2:12 pm

[…] [ブログ記事]Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
WordPressでブログを制作した感想と今後の課題 | ぽんぽこアーカイブスより:

2012年2月4日 8:05 pm

[…] 特に、Webクリエイターボックスさんの「WordPress オリジナルテーマの作り方 3.0+」と言う記事は役立ちました。 […]
Webクリエイターボックスより:

2012年2月9日 8:34 am

使えないとはどうゆう状況なのか、もう少し具体的に説明して頂ければアドバイスできると思います。WPテンプレートはWindows、Mac関係ないです。
ブログのテーマを変更しました | Web Training より:

2012年2月13日 12:40 am

[…] ブログのテンプレ（テーマ）を自分で作りました。今回テンプレを作成するにあたり参考にさせていただいたのはコチラ WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
第3回WordBench大阪 | Cntlog より:

2012年4月2日 9:00 am

[…] [初期制作向け] WordPress オリジナルテーマの作り方 3.0+ WordPressを使ってWeb制作をする為の手順リスト・【改正版】+α [連載]WordPressでWebサービスを作る方法（1:PHPとは） […]
WPテーマを自作しました！ | チュー介のtech techブログより:

2012年4月18日 12:41 am

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス WordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタム … […]
Wordpressでブログを作るまでまとめ | calle mini より:

2012年4月22日 11:31 pm

[…] WordPress オリジナルテーマの作り方 3.0+ […]
WordPressのデザインを変更する際に知っておくと良さそうな事 | 自由なWeb屋より:

2012年4月24日 11:12 am

[…] WordPress オリジナルテーマの作り方 3.0+ […]
WordPress　index.phpのパーツ化 | 基金訓練・職業訓練講師のブログより:

2012年5月8日 10:27 pm

[…] WebクリエーターボックスWordPress オリジナルテーマの作り方 3.0+ […]
wordpressでオリジナルデザインのブログを作る手順を、分かりやすくまとめてみました。 | Handy Web Design より:

2012年5月20日 1:05 am

[…] WordPress オリジナルテーマの作り方 3.0+ […]
hiroshi saitoh より:

2012年5月22日 12:01 pm

はじめまして。わかり易すくありがとうございます。

ファビコンが残ってしまいます。
消し方をご教授願います。
hiroshi saitoh より:

2012年5月22日 12:01 pm

はじめまして。わかり易すくありがとうございます。

ファビコンが残ってしまいます。
消し方をご教授願います。
IEとGoogel　Chrome　FierFoxブラウザの違い | WordPressとシンプルな暮らしより:

2012年6月17日 7:13 am

[…] 現在は勉強中の中ですが、クリエイターボックスのWordPress オリジナルテーマの作り方 3.0+で勉強させて頂いております。分かり易くて感謝です。 […]
Webクリエイター必見！Web制作に役立つ5つの個人ブログサイト | Hello Web Creator より:

2012年6月20日 1:41 am

[…] 私が今最も尊敬しているクリエイターさんのブログです。デザインや知識ももちろんですが、とにかく文章がわかりやすいです。ちなみに、当ブログはWordPressというCMSを使って運営しているのですが、こちらのブログの「WordPress オリジナルテーマの作り方 3.0」というエントリを参考に作成いたしました。 […]
Bloggerクラシックテンプレートの作り方 | Love&pointcard より:

2012年7月6日 6:58 am

[…] WordPressではWebクリエイターボックスさんの記事や Stocker.jpさんの記事などがあってとてもわかり易いのですが、Bloggerについての日本語情報はほとんどありませんでした。Bloggerのテンプレートは少ないながら高品質なんですけれども。ちなみに唯一のテンプレート作成のチュートリアルは公式のヘルプなのですが非常にみにくいので（多分CSSがかわってリセットされちゃったんでしょうね…）この記事で書き起こしてみました。参考になれば幸いです。 via クラシックテンプレート作成のチュートリアル – Blogger ヘルプ […]
Wordpressテーマ作成に役立つ記事＆学んだことまとめ（テーマ作成編） | Design Color より:

2012年9月2日 11:40 pm

[…] WordPress オリジナルテーマの作り方 3.0+ | WebクリエイターボックスWordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。 …環境構築から公開まで網羅されたテーマ作成完全版！ […]
参考リンク | 電脳ノートより:

2012年12月22日 6:43 am

[…] WordPress オリジナルテーマの作り方 3.0+ […]
ブログをつくろう！　part.1 | Ceptree より:

2013年2月6日 6:03 am

[…] WordPress オリジナルテーマの作り方 3.0+ […]
WordPress初心者がオリジナルテーマ作成にあたり参考になった素晴らしいサイト達 | Aloft web note より:

2013年2月24日 10:48 pm

[…] WordPress オリジナルテーマの作り方 3.0+ – Webクリエイターボックス […]
情報収集@テーマ作成（1日目） | 変わるかな？より:

2013年5月12日 10:43 pm

[…] WordPressのオリジナルテーマ作成フロー・基本マニュアルはじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード） WordPress オリジナルテーマの作り方 3.0+ […]
WordPressは簡単!!オリジナルテーマ制作必読の7つの記事 | SiteMiru より:

2013年5月24日 5:18 pm

[…] WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]
初めて1日目 | RELEGATED TO THE ATTIC BLOG より:

2013年6月14日 1:00 pm

[…] とりあえずデフォルトのテンプレートの気にくわないところだけ直したけど・・１からオリジナルテーマ作る？※ 参考URLhttp://www.webcreatorbox.com/tech/wordpress3-original-theme/ […]
Word Pressデザイン調整 and 進捗状況 | RELEGATED TO THE ATTIC BLOG より:

2013年6月19日 1:26 pm

[…] １からオリジナルテーマ作る？ ※ 参考URL　http://www.webcreatorbox.com/tech/wordpress3-original-theme/ […]
知ることと信じることとより:

2013年6月25日 7:28 pm

[…] Webクリエイターボックスや、『WordPressレッスンブック』をもとにテンプレ作成中。 […]
素人だけどwordpressのオリジナルテーマを作ったよ | ハカセの研究室より:

2013年7月3日 11:30 am

[…] WordPress オリジナルテーマの作り方 3.0+｜Webクリエイターボックス […]
独習メモより:

2013年7月19日 10:11 pm

[…] http://www.webcreatorbox.com/tech/wordpress3-original-theme/ […]
仕事終わり深夜と土日献上してブログのテーマを作ってみた。 | @Room201 より:

2013年8月1日 2:10 am

[…] WordPress オリジナルテーマの作り方 3.0+ http://www.webcreatorbox.com/tech/wordpress3-original-theme/ […]

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。ぜひご登録ください！もちろん無料です！ :)

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

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

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

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

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

フロントエンド

デザイン

HTML + CSS

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

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

どう分割されているのか

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

3. style.css

4. header.php

ナビゲーションメニュー（wp_nav_menu）

5. sidebar.php

6. footer.php

7. index.php

8. ループを理解する

9. ループをコピペする

10. functions.php

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

12. single.php

13. page.php

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

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

コメント

“WordPress オリジナルテーマの作り方 3.0+” への114件のフィードバック

書いた本

クーポン

中の人ってこんな人

関連する記事

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

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

フロントエンド

デザイン

HTML + CSS

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

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

どう分割されているのか

ナビゲーションメニュー（wp_nav_menu）

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

シェアする

コメント

“WordPress オリジナルテーマの作り方 3.0+” への114件のフィードバック

ニュースレター

書いた本

クーポン

ニュースレター

中の人ってこんな人

関連する記事

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

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