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

2010年11月15日
Wordpress

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

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

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

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

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>

     <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="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を開き、 以下の部分だけを残し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()) : ?><?php while (have_posts()) : the_post(); ?> からループを開始し、スタティックテキストをWordpressテンプレートタグ（タイトル、リンク先、日時、カテゴリー、タグ、サムネイル画像、概要文、前後の記事へのリンク、検索ボックス）と置き換えます。

<!-- Contents -->
<div id="contents">
    <div id="main">

    <?php if (have_posts()) : ?>
        <?php 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月d日') ?></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月d日') ?></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 オリジナルテーマ作成完璧ガイド

Pingback: WordPress オリジナルテーマの作り方 3.0 - leaf
Pingback: PHPの分からない初心者向けフリーWordPressテーマ”mypace custom”を配布 | マイペースクリエイターの個人的な日記
Pingback: Daily Digest for November 15th | Burikama.net
Pingback: [今日のブックマーク] 2010年11月11日 | メモ的。
Pingback: WordPress、テーマ。＝＝＞＞　Wordpress オリジナルテーマの… « 学問ノート
Pingback: » Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス My_Room-bookmarks
Pingback: Topics 20101117 | Real Topics
http://www.webarton.com aki

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

はじめまして。

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

宜しくお願いします。
Pingback: OYAYUBI DESIGN ： wordpressテーマを制作するのに参考にしたサイトと書籍
Pingback: Wordpress オリジナルテーマの作り方 3.0+ | 工藤設計のブログ
Pingback: 卒業制作日誌 » Blog Archive » WordPressのテーマ完成
Pingback: cocolon :: Just another WordPress site » Blog Archive » WordPressテンプレート作成中です。
Pingback: papativa.jpリニューアルデザイン | イラストレーターシバチャンのブログ「キョウモイマイチ」
Pingback: 新しくブログ開始です。 | MONOCHROME
http://4pparis.com/boutique_on_ligne/ Macaron

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

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

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

Manaさん、すごい良いセンス！
このサイト応援しています。
WordPressの記事いつも参考にさせてもらってます。感謝です。
Pingback: karasuneko Blog » [更新情報] karasuneko Blog リニューアル
Pingback: happymonday » Blog Archive » WordPressカスタマイズ記念！ブログ始めます。
Pingback: TYRELANDWEBlog » Blog Archive » NEW BLOG!!
Pingback: 4rahamaのwebsite » Blog Archive » wordpressで作ってみた。
Pingback: QueseracerAi　blog » Blog Archive » ブログ開設
http://users.mswave.com/~r_moriya/ rAi

はじめまして、manaさん。
この記事のおかげで初心者のあたしにも簡単にWP導入出来ました！有り難うございました(^▽^*)♪
Pingback: » WordPressのオリジナルテーマを作るときの手順まとめ | binoske.com
Pingback: Wordpress オリジナルテーマの作り方 3.0+ « anzuboo
Pingback: maili » Q向上を、改めて心に誓ったday
Pingback: WordPress オリジナルテーマの作り方 WordPress | Luke Itoh Official Weblog
http://www.poscashop.com/ upharu

素晴らしいですね！
丁寧な記事でとても参考になりました。
これからも参考にさせていただきます。
ありがとうございました。
Pingback: オリジナルテーマ : debriefing
Pingback: « 東京の印刷会社で働く33歳blog
Pingback: takeoo.com » Blog Archive » サイトっぽくさせれるかどうか
Pingback: wordpressのブログテーマを作ってみた時に利用した技術とかサイトとか。 | デジタル料理人
Pingback: テストだよー | North Shore Products
Pingback: リンドウ制作日記 » Blog Archive » テーマを変更しました（New World）
Pingback: WordPressのオリジナルテーマを作る | WordPressでオリジナルのテーマを作るメモ | GraphicDriver
http://www.sannohkk.co.jp/ 友松

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

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

ありがとうございます。^^
http://intlseminar.com/ 森山　裕彬

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

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

よろしくお願いします。
Pingback: CreaMo!
Pingback: muragoya.com » Blog Archive
Pingback: 「Wordpress3.0+」でオリジナルテーマを作る方法。 | DESING AFFORDANCE
Pingback: [連載]WordPressでWebサービスを作る方法（4:テーマの作り方） | Stocker.jp / diary
Pingback: 【技】WordPRESS　もろもろまとめ。 : vktec.com
Pingback: usagism » Blog Archive » 新しくブログ開始です。
Pingback: 心はいつもAirPucci(空元気でもいいから)
http://www.pattaya-taxi9.com/ taxi to pattaya

ありがとう
Pingback: word テンプレート無料のような | ワードプレスの説明書・ほんわかＢＥＳＴ
Pingback: word press テーマの里 | ワードプレスの説明書・ほんわかＢＥＳＴ
Pingback: WordPressの自作テーマを作りました | fctale
Pingback: WordPressでブログのカスタマイズに挑戦ぞ。 | WEB備忘録-初心者の奮闘記
Pingback: Wanderflow » Blog Archive » wordpressテーマを作ってみた
http://kumamoto310.blog64.fc2.com/ 佐藤　健次

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

最近ワードプレスはじめました！
この記事をみてテーマ作れました。解説ほんとにありがとう！
Pingback: CMS：WordPressのカスタムテーマ作成（１） | Rana Europe Tours
Pingback: CMS：WordPressのカスタムテーマ作成（２） | Rana Europe Tours
Pingback: bibouloku » Blog Archive » オリジナルテーマの作り方
Pingback: 初めて導入したワードプレスプラグイン | 2代Meモ
Pingback: Wordpress_003 既存サイトをテンプレート化 * How to use Masayuki Goto
Pingback: 「Wordpress3.0+」でオリジナルテーマを作る方法。 | Design Affordance
Pingback: MORIHASHI AKIRA » とりあえず最初はココを見た。
mihiro

wpは初めてでしたが、大変参考になり、助かりましたありがとうございました。
Pingback: Web Study Note » Blog Archive » テーマを変更しました。
Pingback: 【WP】超初心者必見！MTユーザーがつまづきがちなポイント｜スタッフブログ｜株式会社エムハンド
Pingback: WordPressでブログ作成しました。 – Country Netlife plus
Pingback: 学習中です！ | 摩亜爺親爺
Pingback: かくれんぼ戦略 » Blog Archive » かくれんぼ戦略は、WordPressに移行しました！｜とりさん好き放題ブログ、WordPress版。
Pingback: タイトルは未定 » WordPressのテーマ作成に挑戦
Pingback: WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ | Design Spice
Pingback: ケソケソドットコム » Blog Archive » テーマをカスタムする！
Pingback: Contributeを使ってwordpressを更新する | Design Spice
Pingback: moff&moff » これからwordpressを始めるという人に役に立ったらいいな的まとめ
Pingback: 11月といえば自分の好きなブログを告白する月らしいです | creativememomemo
Pingback: MEC-Web Design Info » wordpressの知識
Pingback: [WP初心者のための]Wordpressテーマの仕組みを理解するために行ったアナログなこと | Olein
Pingback: WordPressでオリジナルテーマを作る前に見ておきたいサイト | indes design
http://www.facebook.com/profile.php?id=100002489574326 Ko Miwa

とても参考になりました！
早速実践してみようと思います＾＾
http://www.facebook.com/yanagawamiyo Miyo Yanagawa

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

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

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

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

それではこれからも楽しみにしています！

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 オリジナルテーマ作成完璧ガイド

Advertisement

コメント

Web関連記事・お知らせ

Web制作テクニック

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

Twitter 人気のつぶやき

サイト内検索

本書きました

Twitter

Facebookページ

中の人ってこんな人

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

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

フロントエンド

デザイン

HTML + CSS

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

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

どう分割されているのか

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

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

Advertisement

シェアする

関連する記事

コメント

Web関連記事・お知らせ

Web制作テクニック

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

Twitter 人気のつぶやき

サイト内検索

本書きました

Twitter

Facebookページ

中の人ってこんな人

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

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