WordPressでデザインテーマを初めて制作する時の制作フローWordPressを使い始めて最初からオリジナルのテーマを一から作成できる人はそんなに多くないと思います。恐らくWordPress初心者のほとんどの人は、無料のテーマなどをインストールして使っているのではないでしょうか?それは、テーマを作成するにはPHPの知識とMySQL等のデータベースの知識が少なからず必要となるからです。また、それらの知識が多少あっても、テーマを作るにはどういった手順で作ったらいいのかが分かりずらい部分も多いと思います。今回は、そんな方々の為に自分の経験から制作フローだけでもご紹介できればと思っております。但し、PHPをかじった事もない方、データベースをいじった事がない方にはちょっと厳しいかもしれませんので、まずはそちらを少し勉強してからトライしてもらった方がいいかもしれません。

デザインテーマの制作フロー

  1. 開発環境を整える
  2. テーマの仕組みを理解する
  3. デザインを作成し、html & CSS でコーディング
  4. コーディング後のhtmlファイルを分解する
  5. WordPressのテンプレートタグ等に置き換える
  6. ループを理解し、ファイルにループを書き込む
  7. ウィジェット機能を有効にする
  8. CSSファイルのルール
  9. ローカル環境で動作テストをする
  10. ファイルをサーバーにアップロード
  11. サーバー環境で動作確認~終了~

1. 開発環境を整える

WordPress は PHP とデータベースで動いております。ですので、動作確認には必ずサーバー環境が必要になります。サーバー環境を利用するには、おおかまに分けて主に2通りの方法があります。

一つ目は、安いレンタルサーバーを借りる方法、二つ目は、簡単に言うとPC上にサーバー環境を作ってしまう方法。

レンタルサーバーとローカルサーバー

最終的にサイトを公開する段階になればレンタルサーバーは必須になりますが、開発していく段階でレンタルサーバーにファイルをアップロードして表示を確認したりしていると手間が多くなり現実的ではありません。ですので、私は一つ目の方法をお勧め致します。

pc(ローカル)上にサーバー環境を作っちゃう方法として、WindowsならXAMPP、MacならMAMPをインストールする事で構築できます。

XAMPPとMAMP

これらのインストールで、Apache・MySQL・PHPの環境を作れちゃうので、WordPress等の開発には欠かせません。インストール方法等は、WindowsのXAMPPに関しては、自分のPCにテスト用サーバー環境を構築する!(Windows編)を参照下さい。

2. テーマの仕組みを理解する

2-1. ファイルの種類と概要について

WordPressのデザインテーマは、たくさんのファイルから作成されています。まずは、おおまかなその仕組みを理解しないと作成できないので、ここで簡単に説明致します。基本的なファイルの種類を下記に列挙してみます。

WordPressのデザインファイル構成

基本的なファイルの概要は以下の通りです。

  • header.php・・・ヘッダーのテンプレート
  • index.php・・・メインテンプレート
  • sidebar.php・・・サドバーのテンプレート
  • footer.php・・・フッターのテンプレート
  • style.css・・・テーマのCSSファイル
  • functions.php・・・テーマの為の関数テンプレート

2-2. ホームページの表示の仕組みについて

下記の図には最低限必要なファイルのみを表示しました。厳密に言うと、その他のテンプレートなども絡み合ってそれぞれのファイルの表示の役割が細分化されているのですが、ここでは初心者をターゲットとしてますので、必要最低限のもののみにしております。今後の説明も上記のファイルのみについて説明していく事とします。

WordPressでのサイトの表示のしくみ

上記のファイルは、トップページの場合index.phpファイルからインクルードタグというタグを書き込む事で各テンプレートを呼び出しています。例えば、トップページindex.phpのおおざっぱなソースコードは以下の通りです。

<?php get_header(); ?>

<div id="main">
  <div id="content">
  
    //ここにWordPressのループを書き込む

  </div><!-- #content --> 
</div><!-- #main --> 

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

上記のような感じです。
さて、上記のソースの中ほどにWordPressのループを書き込む欄がありますが、次は、これについて説明します。

2-3. WordPressのループについて

WordPressのループとは、例えば、記事の一覧を繰り返し同じフォーマットで表示したい時に必要になります。ここでは、トップページの投稿の一覧を表示する部分にループを書きます。ループの基本的な記述は以下の通りです。


<?php if ( have_posts() ) : ?>
  
  <?php while ( have_posts() ) : the_posts(): ?>
   //ここに各投稿の基本となるソースを書く
  <?php endwhile : ?>
   //投稿の一覧を表示させた後に表示させるソースを書く
  <?php else : ?>
   //ここに記事がない時に表示させるソースを書く
<?php endif : ?>

上記がWordPressのループの基本です。別の書き方もありますがここでは省略します。

3. デザインを作成し、html & CSS でコーディング

さて、まずはデザインを作成し、html と CSS で普通にコーディングしてみます。今回はこのサイトのコードを省略したものを実際に使用して説明致します。ちなみに、このサイトのコードは html5 で書かれております。まず、トップページのソースコードは以下の通りです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Webデザインモア(Web Design More)</title>
  <link rel="stylesheet" href="https://webdesignmore.com/wp-content/themes/webdesignmore-v2/style.css" />  
</head>
<body>
<div id="container">
  <header id="header">
    <h1><a href="#">Webデザインモア(Web Design More)</a></h1>  
	 <nav>
       <ul id="g_navi">
        <li><a id="gn_01" href="#">Home</a></li>
        <li><a id="gn_02" href="#">About</a></li>
        <li><a id="gn_03" href="#">Contact</a></li>
       </ul><!--#g_navi-->	 
	 </nav>
  </header>  
  
  <div id="main">
    <div id="content">	
			      
      <article class="post clearfix" id="post-902">
	  
       <h1><a href="#">投稿のタイトル</a></h1>
        <div class="post-content">		    
         投稿の内容
		<a href="#" class="more-link">続きを読む</a>
        </div><!-- /post-content -->          
          
      </article><!--.post -->
		
				
          
    </div><!--#content --> 
  </div><!--#main -->
  
  <div id="sidebar">
    <section id="tag-cloud">
      <h1>タグクラウド</h1>
      <p class="side_h">Tag Cloud</p>
      <p class="tag">
        <a href="#">タグ1</a>
        <a href="#">タグ2</a>
        <a href="#">タグ3</a>
      </p>
    </section><!--#tag-cloud-->

    <section id="category">
      <h1>カテゴリー</h1>
      <p class="side_h">Category</p>
      <ul class="clearfix">
        <li><a href="#">カテゴリー1</a></li>
        <li><a href="#">カテゴリー2</a></li>
        <li><a href="#">カテゴリー3</a></li>
      </ul>
    </section><!--#category-->

    <section id="twitter">
      <h1>ツイッター</h1>
      <p class="side_h">Twitter</p>
      <ul id="twitter_update_list">
        <li><a href="#">つぶやき1</a></li>
        <li><a href="#">つぶやき2</a></li>
        <li><a href="#">つぶやき3</a></li>  
      </ul>
    </section><!--#twitter--> 


	<section id="recent">
	  <h1>最近の投稿</h1>
      <p class="side_h">Recent Posts</p>
      <ul>
		<li><a href="#">最近の投稿1</a></li>
		<li><a href="#">最近の投稿2</a></li>
		<li><a href="#">最近の投稿3</a></li>
      </ul>
	</section><!--#recent-->

    <aside id="side_facebook">
	  <!-- フェイスブックウィジェット -->
    </aside><!--#side_facebook--> 
		
  </div><!--#sidebar -->	  
	  
  <footer id="footer">
	<section>
	  <h1>フッター</h1>
	  <p id="maintaine">フッターの内容</p>	
	</section>		
    <p id="copyright"><small>&copy; 2011 - 2012 Web Design More. All Rights Reserved.</small></p>
  </footer>
	
</div><!--#container -->	

</body>
</html>

4. コーディング後のhtmlファイルを分解する

まずは、上記のソースをheader.php、index.php、sidebar.php、footer.phpの4つにに分解します。

4-1. header.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Webデザインモア(Web Design More)</title>
  <link rel="stylesheet" href="https://webdesignmore.com/wp-content/themes/webdesignmore-v2/style.css" />  
</head>
<body>
<div id="container">
  <header id="header">
    <h1><a href="#">Webデザインモア(Web Design More)</a></h1>  
	 <nav>
       <ul id="g_navi">
        <li><a id="gn_01" href="#">Home</a></li>
        <li><a id="gn_02" href="#">About</a></li>
        <li><a id="gn_03" href="#">Contact</a></li>
       </ul><!--#g_navi-->	 
	 </nav>
  </header>  
  
  <div id="main">
    <div id="content">	

4-2. index.php

      <article class="post clearfix" id="post-902">
	  
       <h1><a href="#">投稿のタイトル</a></h1>
        <div class="post-content">		    
         投稿の内容
		<a href="#" class="more-link">続きを読む</a>
        </div><!-- /post-content -->          
          
      </article><!--.post -->
		
				
          
    </div><!--#content --> 
  </div><!--#main -->

4-3. sidebar.php

  <div id="sidebar">
    <section id="tag-cloud">
      <h1>タグクラウド</h1>
      <p class="side_h">Tag Cloud</p>
      <p class="tag">
        <a href="#">タグ1</a>
        <a href="#">タグ2</a>
        <a href="#">タグ3</a>
      </p>
    </section><!--#tag-cloud-->

    <section id="category">
      <h1>カテゴリー</h1>
      <p class="side_h">Category</p>
      <ul class="clearfix">
        <li><a href="#">カテゴリー1</a></li>
        <li><a href="#">カテゴリー2</a></li>
        <li><a href="#">カテゴリー3</a></li>
      </ul>
    </section><!--#category-->

    <section id="twitter">
      <h1>ツイッター</h1>
      <p class="side_h">Twitter</p>
      <ul id="twitter_update_list">
        <li><a href="#">つぶやき1</a></li>
        <li><a href="#">つぶやき2</a></li>
        <li><a href="#">つぶやき3</a></li>  
      </ul>
    </section><!--#twitter--> 


	<section id="recent">
	  <h1>最近の投稿</h1>
      <p class="side_h">Recent Posts</p>
      <ul>
		<li><a href="#">最近の投稿1</a></li>
		<li><a href="#">最近の投稿2</a></li>
		<li><a href="#">最近の投稿3</a></li>
      </ul>
	</section><!--#recent-->

    <aside id="side_facebook">
	  <!-- フェイスブックウィジェット -->
    </aside><!--#side_facebook--> 
		
  </div><!--#sidebar -->

4-4. footer.php

  <footer id="footer">
	<section>
	  <h1>フッター</h1>
	  <p id="maintaine">フッターの内容</p>	
	</section>		
    <p id="copyright"><small>&copy; 2011 - 2012 Web Design More. All Rights Reserved.</small></p>
  </footer>
	
</div><!--#container -->	

</body>
</html>

5. WordPressのテンプレートタグ等に置き換える

さて、次にそれぞれのソースをテンプレートタグやインクルードタグに置き換えます。まずは、header.php を例に見てみます。

5-1. header.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>
<body id="<?php echo get_page_uri($post->ID);?>" <?php body_class(); ?>>
<div id="container">
  <header id="header">
    <h1><a href="<?php echo get_option('home'); ?>">Webデザインモア(Web Design More)</a></h1>  
	 <nav>
       <ul id="g_navi">
        <li><a id="gn_01" href="<?php echo get_option('home'); ?>">Home</a></li>
        <li><a id="gn_02" href="<?php echo get_option('home'); ?>/about/">About</a></li>
        <li><a id="gn_03" href="<?php echo get_option('home'); ?>/contact/">Contact</a></li>
       </ul><!--#g_navi-->	 
	 </nav>
  </header>  
  
  <div id="main">
    <div id="content">	

上記のポイントは、</head> の直前に <?php wp_head(); ?> を忘れずに入れる事。これは、さまざまなプラグイン等を入れた時に、ヘッド要素内に挿入しなければならないソースをここに呼び込む為のものですので、これがないとページの表示が正常にされない事があります。

5-2. sidebar.php

次に、sidebar.phpを見てみます。ここは、サイドバーのテンプレートです。

  <div id="sidebar">
    <section id="tag-cloud">
      <h1>タグクラウド</h1>
      <p class="side_h">Tag Cloud</p>
      <p class="tag">
        <?php wp_tag_cloud('smallest=12&largest=12'); ?>
      </p>
    </section><!--#tag-cloud-->

    <section id="category">
      <h1>カテゴリー</h1>
      <p class="side_h">Category</p>
      <ul class="clearfix">
     <?php wp_list_categories('show_count=1&title_li='); ?>
      </ul>
    </section><!--#category-->

<?php dynamic_sidebar( 'recent-post' ); ?>

    <aside id="side_facebook">
	  <!-- フェイスブックウィジェット -->
    </aside><!--#side_facebook--> 
		
  </div><!--#sidebar -->

さて、18行目の記述はWordPressのウィジェット機能を使って表示させます。これについては、後述致します。

5-3. footer.php

次に、footer.php です。ここは、フッター部分のテンプレートです。

  <footer id="footer">
	<section>
	  <h1>フッター</h1>
	  <p id="maintaine">フッターの内容</p>	
	</section>		
    <p id="copyright"><small>&copy; 2011 - 2012 Web Design More. All Rights Reserved.</small></p>
  </footer>
	
</div><!--#container -->
	
<?php wp_footer(); ?>
</body>
</html>

上記のポイントは、</body> の直前に <?php get_footer(); ?> を忘れずに入れる事。これは絶対です。これは、さまざまなプラグイン等を入れた時に、フッターに挿入しなければならないソースをここに呼び込む為のものですので、これがないと正常に表示されない事があります。

5-4. index.php

最後に、index.php を見ていきます。ここは、トップページなどを表示する際の核となるテンプレートになり、このテンプレートの中に header.php、sidebar.php、footer.php 等を呼び込むインクルードタグも含めていきます。

<?php get_header(); ?>

      <article class="post" id="post-<?php the_ID(); ?>">
	  
       <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
        <div class="post-content">		    
          <?php the_content('続きを読む'); ?>
        </div><!-- /post-content -->          
          
      </article><!--.post -->
		
				
          
    </div><!--#content --> 
  </div><!--#main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

さて、上記のソースの中に、 <?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
という記述があります。これらがインクルードタグです。

これらは、それぞれのタグの書かれた場所に
header.php、sidebar.php、footer.phpを呼び出しています。
これらが全て繋がって一つのページを表示しています。おおまかな、仕組みについてなんとなく分かってきたでしょうか?

6. ループを理解し、ファイルにループを書き込む

さて、2-3. WordPressのループについてにてWordPressループについて触れましたが、これをindex.php内に書き込んでいきたいと思います。

ループのソースは以下の通りです。


<?php if ( have_posts() ) : ?>
  
  <?php while ( have_posts() ) : the_posts(): ?>
   //ここに各投稿の基本となるソースを書く
  <?php endwhile ; ?>
   //投稿の一覧を表示させた後に表示させるソースを書く
  <?php else : ?>
   //ここに記事がない時に表示させるソースを書く
<?php endif ; ?>

これを、index.phpに書き込むとソースコードは以下のようになります。

<?php get_header(); ?>
	
	<?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
		
      <article class="post" id="post-<?php the_ID(); ?>">
	  
       <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
        <div class="post-content">		    
          <?php the_content('続きを読む'); ?>
        </div><!-- /post-content -->          
          
      </article><!--.post -->
	  
	  <?php endwhile ; ?>		
				
	  <?php	else {		?>
		<article class="post clearfix">
          <h1>記事がみつかりません</h1>
          <p>残念ながら、記事がみつかりませんでした</p>

        </article><!-- /post -->
		
  		<?php endif ; ?>      		
          
    </div><!--#content --> 
  </div><!--#main -->
  
<?php get_sidebar(); ?>
<?php get_footer(); ?>

こんな感じでしょうか。

そしたら、とりあえず index.php のソースコードを丸ごとコピーして single.php を作成しておきましょう。

single.php は、コメントテンプレートを読み込むタグを入れたりしますが、このサイトはコメント欄はfacebookのソーシャルプラグインを入れているので、WordPressのコメント機能を使用していませんので、省略させて頂きます。

7. ウィジェット機能を有効にする

さて、前述しましたが、サイドバーの最近の投稿を表示させる欄は、WordPressのサイドバーのウィジェット機能を使っております。ウィジェット機能を有効にするには、function.phpに機能を有効にする関数を書き込まなければなりません。


//サイドバーウィジェットの有効化
if ( function_exists('register_sidebar') ){

register_sidebar( array(
	'name' => __( 'サイドウィジェット1' ),
	'id' => 'recent-post',
	'before_widget' => "<section id=\"recent\">\r\n",
	'after_widget' => "</section><!--#recent-->\r\n",
	'before_title' => "<h1>",
	'after_title' => "</h1><p class=\"side_h\">Recent Posts</p>\r\n",
) );
}

8. CSSファイルのルール

CSSファイルには、ちょっとルールがあります。テンプレートファイル自身のネーミングのルールだとか、テンプレートファイルに書かなければならない「おまじない」みたいなものがあります。実はこれを書かないと管理画面に正しく表示されません。

8-1. ネーミングのルール

CSSの名前は、必ず style.css にする。

8-2. CSSファイルに書くおまじない

以下のようにコメントアウトして、CSSファイルの冒頭にお決まりのフォーマットで書きます。実は、ここに書いた情報が管理画面に表示されます。下記はこのサイトのテーマに書いてあるものをそのまま書いてますので、ご自分のものに書き換えて下さいね。

@charset "UTF-8";
/*
Theme Name: WebDesignMore ver.2  //テーマ名
Theme URI: https://webdesignmore.com/  //テーマのURL
Description: WP theme for Web Design More  //テーマの説明
Version: 1.0 //バージョン
Author: Osamu Komatsu //作者名
Author URI: https://webdesignmore.com/ //作者のサイトのURL
*/

9. 動作テストをする

さて、それでは実際に管理画面からダミーの投稿を入れてローカル環境で動作確認をしてみましょう。上手く表示されない部分は適宜修正し、きちんと表示できるようになったら、本番環境にテーマをアップロードしましょう。

10. ファイルをサーバーにアップロード

さて、テーマファイルをサーバーにアップロードしましょう。

11. サーバー環境で動作確認~終了~

テーマファイルをサーバーにアップロードしたら、管理画面 > 投稿 > 新規追加 から投稿を追加して動作確認をして終了です。ローカル環境とは若干挙動が異なる事もありますので、そのあたりは適宜修正しましょう。

今回の内容は本が一冊かけるくらいの内容を、おおまかな流れだけをつかんで頂く事を目的に書きましたので、かなり省略して書いております。その為、分かりにくい部分もあるかもしれません。修正点等何かあればご意見頂ければ幸いです。