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

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


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

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="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を開き、<!-- 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 オリジナルテーマをアップロードする

シェアする

コメント

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

  1. […] Posted WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス. […]

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

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

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

  5. […] WordPress オリジナルテーマの作り方 3.0+ […]

  6. aki より:

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

  7. altrnat より:

    はじめまして。

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

    宜しくお願いします。

  8. […] WebクリエイターボックスWordPress オリジナルテーマの作り方 3.0+ Webクリエイターボックス Twitter はてなブックマーク […]

  9. […] WordPress オリジナルテーマの作り方 3.0+ […]

  10. […] 全体の手順 WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]

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

  12. […] WordPressをローカルにインストールする WordPress オリジナルテーマの作り方 3.0+ WordPress オリジナルテーマをアップロードする カテゴリー: ワークス […]

  13. […] WordPress オリジナルテーマの作り方 3.0+ […]

  14. Macaron より:

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

  15. kubo より:

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

  16. nekiro より:

    パクリブログ騒動から、この記事にたどり着きました。WPのタグが独特で勉強するのが面倒くさいと思っていたら、とってもわかりやすい記事で勉強になりました。
    また、勉強に来たいと思っています。
    個人的なことですが、友人がブリズベンの大水で救助されたそうです。そちらは大丈夫ですか?

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

  18. web蜂 より:

    Manaさん、すごい良いセンス!
    このサイト応援しています。
    WordPressの記事いつも参考にさせてもらってます。感謝です。

  19. […] ちなみにWPのオリジナルテーマの作り方は、Webクリエイタボックスのこちらの記事「Wordpress オリジナルテーマの作り方 3.0+」を参考にさせて頂きました!ありがとうございます。 […]

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

  21. […] 以下お世話になった参考サイト様です(とてもわかりやすい!) webクリエイターボックス —————- 本家HP!! TYRELANDWEB.com […]

  22. […] ほんで、たまたま覗かせてもらっていたwebサイトwebcreaterboxさんの記事でwordpressオリジナルテーマの作り方というものを見ました。 […]

  23. rAi より:

    はじめまして、manaさん。
    この記事のおかげで初心者のあたしにも簡単にWP導入出来ました!有り難うございました(^▽^*)♪

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

  25. […] Webクリエイターボックスさんの記事を参考にして、ブログの外観も変更完了。 […]

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

  27. upharu より:

    素晴らしいですね!
    丁寧な記事でとても参考になりました。
    これからも参考にさせていただきます。
    ありがとうございました。

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

  29. […] 今回はテンプレートも借りずにはじめっから作ったので、その気にさせてもらえたサイトさん WordPress オリジナルテーマの作り方 3.0+ […]

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

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

  32. […] さらにこの記事を教科書にして、WordPressのテーマを作ってみようと思います。 WordPress オリジナルテーマの作り方 3.0+ (Webクリエイターボックス) […]

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

  34. 友松 より:

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

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

    ありがとうございます。^^

  35. 森山 裕彬 より:

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

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

    よろしくお願いします。

  36. CreaMo! より:

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

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

  37. […] WordPress オリジナルテーマの作り方 3.0+ 古い記事へ […]

  38. […] いつもお世話になっている、「WEBクリエイターボックス」さんの方で面白い記事を見つけました。 […]

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

  40. […] WordPress オリジナルテーマの作り方 3.0+ まず、このサイトを見てwpの仕組みとはなんぞやを学びました。 […]

  41. […] WordPress オリジナルテーマの作り方 3.0+ […]

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

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

  43. taxi to pattaya より:

    ありがとう

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

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

  46. […] WordPress オリジナルテーマの作り方 3.0+ […]

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

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

  49. 佐藤 健次 より:

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

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

  51. […] →WordPress オリジナルテーマの作り方 3.0+ […]

  52. […] WordPress オリジナルテーマの作り方 3.0+ […]

  53. :-) より:

    最近ワードプレスはじめました!
    この記事をみてテーマ作れました。解説ほんとにありがとう!

  54. […] WordPress オリジナルテーマの作り方 3.0+ […]

  55. […] WordPress オリジナルテーマの作り方 3.0+ […]

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

  57. […] 参考記事:WordPressオリジナルテーマの作り方3.0+ […]

  58. […] いつもお世話になっている、「WEBクリエイターボックス」さんの方で面白い記事を見つけました。 […]

  59. mihiro より:

    wpは初めてでしたが、大変参考になり、助かりましたありがとうございました。

  60. […] WordPress オリジナルテーマの作り方 3.0+ツ黴€を参考にしながら、Web Study Note用のWordPressテーマを作成しました。 […]

  61. […] ファイル構成など詳しくはWordPress オリジナルテーマの作り方 3.0+で記載されています。 […]

  62. […] で、参考にしようと思ったのが、 WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]

  63. […] 参考にさせていただいているのは、こちらのサイト、 ウェブクリエーターボックスさん、有難うございます。 […]

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

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

  66. […] WEBクリエイターボックスさんのカスタムテーマとテーマの作り方をパクって参考に作っていこうかな。 […]

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

  68. […] h2ospace_php 03/12/10 08:41AM. 技術 そして、こっちの記事を熟読する。 WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]

  69. […] こちらのページを参考にしてください。 カテゴリー: ワードプレス タグ: コメント (0) トラックバック (0) コメントをどうぞ トラックバックURL […]

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

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

  72. Ko Miwa より:

    とても参考になりました!
    早速実践してみようと思います^^

  73. Miyo Yanagawa より:

    とても参考になりました。
    入門編としてすばらしい!

  74. くま より:

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

    おかげでなんとか作ることできました。

  75. […] sカスタマイズ!! 昨日、4時間かけてやっとindex.phpのカスタマイズに成功!! ”Webクリエーターボックス”のManaさん、ありがとう~(´▽`)アリガト! WordPressとは、なんかこう…いろい […]

  76. Yuko Inoue より:

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

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

  77. […] [ブログ記事]Wordpress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス […]

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

  79. 使えないとはどうゆう状況なのか、もう少し具体的に説明して頂ければアドバイスできると思います。WPテンプレートはWindows、Mac関係ないです。

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

  81. […] [初期制作向け] WordPress オリジナルテーマの作り方 3.0+ WordPressを使ってWeb制作をする為の手順リスト・【改正版】+α [連載]WordPressでWebサービスを作る方法(1:PHPとは) […]

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

  83. […] WordPress オリジナルテーマの作り方 3.0+ […]

  84. […] WebクリエーターボックスWordPress オリジナルテーマの作り方 3.0+ […]

  85. hiroshi saitoh より:

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

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

  86. hiroshi saitoh より:

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

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

  87. […] 現在は勉強中の中ですが、クリエイターボックスのWordPress オリジナルテーマの作り方 3.0+で勉強させて頂いております。分かり易くて感謝です。 […]

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

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

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

  91. […] WordPress オリジナルテーマの作り方 3.0+ […]

  92. […] WordPress オリジナルテーマの作り方 3.0+ […]

  93. […] WordPress オリジナルテーマの作り方 3.0+ – Webクリエイターボックス […]

  94. […] WordPressのオリジナルテーマ作成フロー・基本マニュアル はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード) WordPress オリジナルテーマの作り方 3.0+ […]

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

  96. […] とりあえずデフォルトのテンプレートの気にくわないところだけ直したけど・・ 1からオリジナルテーマ作る?※ 参考URLhttp://www.webcreatorbox.com/tech/wordpress3-original-theme/ […]

  97. […] 1からオリジナルテーマ作る? ※ 参考URL http://www.webcreatorbox.com/tech/wordpress3-original-theme/ […]

  98. […] Webクリエイターボックスや、『WordPressレッスンブック』をもとにテンプレ作成中。 […]

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

ニュースレター

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