ゼロからテーマを作ってみよう

どうやってWordpressテーマを作るのか
最小構成のWordpressテーマの作成
まとめ

どうやってWordpressテーマを作るのか

では、WordPress のテーマをゼロから作ってみたいと思います。
いきなりWordpressテーマを作るのではなくて、最初に index.html と style.css で普通に HTMLページを作成します。
その後 WordPress のテーマに変換します。

以下のようなHTMLページを作成します。

上にヘッダ、下にフッタがあり、中央には投稿本文と、ナビゲーション、サイドバーという基本的な構成です。
これをWordPress のテーマに変換していきたいと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>ゼロからWordPressテーマを作ろう</title>
 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.1/build/cssreset/cssreset-min.css">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body> 
 <header id="header" class="container">
  <h1><a href="">ゼロからWordPressテーマを作ろう</a></h1>
 </header><!-- /header -->
 <div id="main" class="container">
  <div id="posts">
  <div class="post">
   <h3>投稿記事</h3>
  </div><!-- /post -->
  <div class="navigation">
   <div class="prev">前へ</div>
   <div class="next">次へ</div>
  </div>
  </div><!-- /posts -->
  <div id="sidebar">
   <h3>サイドバー</h3>
  </div><!-- /sidebar -->
 </div><!-- /main -->

 <footer id="footer" class="container">
  <p>フッター</p>
 </footer><!-- /footer -->
</body>
</html>

body {
  font-size: 14px;
  font-family: Arial, Verdana;
}


a {
  text-decoration: none;
}

p {
  padding-bottom: 14px;
  margin: 0;
  line-height: 1.8;
}

h1 {
  font-weight: bold;
  font-size: 18px;
  padding: 15px 0;
}

.container {
  width: 600px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
}

/* header */
#header {
  background-color: #ddd;
}
#header h1 {
  width: 100px;
}

#menu-global_navi {
  display: flex;
  padding-top: 15px;
  height: auto;
  width: auto;
}
#menu-global_navi li {
  width: 100px;
}
/* main */

/* posts */
#posts {
  width: 60%;
}

/* post */
.post {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #aff;
}
.post-header {
  height: 50px;
  padding: 5px;
}
.post-list {
  height: 30px;
  padding: 5px;
  overflow: hidden;
}
.post-detail {
  height: 300px;
  padding: 5px;
  overflow: hidden;
}

/* page */
.page-detail {
  height: 360px;
  padding: 5px;
  overflow: hidden;
}

/* navigation */
.navigation {
  overflow: hidden;
  padding: 5px;
  font-size: 12px;
  margin: 0;
  background-color: #faf;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
}
.prev {
  width: 200px;
  padding: 20px;
}
.next {
  width: 200px;
  text-align: right;
  padding: 20px;
}

/* sidebar */
#sidebar {
  width: 40%;
  height: 430px;
  background-color: #ffa;
}

/* footer */
#footer {
  padding: 15px 0;
  background-color: #ddd;
}

最小構成のWordpressテーマの作成

テーマを配置する場所を用意します。
WordPressテーマですので wp-content/theme 以下にフォルダを作ります。テーマ名はzerokaraと言う名称で作成します。
index.html,style.cssをここに配置します。index.htmlはindex.phpに変更します。

style.css にヘッダー情報を入れます。

以下はテーマ「Twenty Thirteen」のスタイルシートヘッダです。

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

すべて設定しなくても、Theme Name: を指定すれば WordPress 管理画面で認識できるようになります。Theme Name: zerokara と指定します。