WordPressの既存テーマを使えば開発時間は短縮されますが、オリジナリティには欠けますよね。CSSなどの構成を変えると、その分時間がかかります。
そんな悩みを解決してくれる「自作テーマ」。以下のようなメリットがあります。
- 自分にとって扱いやすい
- デザイン、機能を自由に決められる
既存のテーマに左右されないところが嬉しいですね。

まずは、テーマ作成に必要な「データ」と「階層」を理解するところからはじめます。その後は、正しく表示するための「専用コード」について解説していきます。
当記事は基本構造の理解と作成手順が中心となるため、投稿記事を表示したい方は専用コードを別途調べてご対応ください。
目次
用意するファイル
元データ
WordPress化する前に元となる下記データを作成します。加えて、index.htmlに表示する画像(1920×1280以上)を1枚用意してください。
- index.html
- style.css
- reset.css(ご自身に合うものを用意してください)
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="style.css"> <title>Original Theme</title> </head> <body> <div class="wrapper"> <header><!----- header -----> <div class="inner"> <h1>Original Theme</h1> <ul class="sns"> <li class="twitter"><a href="#"></a></li> <li class="facebook"><a href="#"></a></li> </ul> </div> </header><!----- header -----> <nav><!----- navigation -----> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">First</a></li> <li><a href="#">Second</a></li> <li><a href="#">Third</a></li> <li><a href="#">Contact</a></li> </ul> </nav><!----- navigation -----> <div class="contents"><!----- contents -----> <div class="inner"> <article> <section> <h2 class="ttl">Headline</h2> <p>lorem ipsum lorem ipsum</p> <img src="img/sample-001.jpg"> <h3 class="ttl">Headline</h3> <p>lorem ipsum lorem ipsum</p> <h4 class="ttl">Headline</h4> <p>lorem ipsum lorem ipsum</p> </section> <section> <h2 class="ttl">Headline</h2> <p>lorem ipsum lorem ipsum</p> </section> </article> <aside><!----- sidebar -----> <section class="side"> <li class="ttl">Profile</li> <li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li> </section> <ul class="side"> <li class="ttl">Recent Posts</li> <li><a href="#">side</a></li> <li><a href="#">side</a></li> <li><a href="#">side</a></li> <li><a href="#">side</a></li> </ul> </aside><!----- sidebar -----> </div> </div><!----- contents -----> <footer><!----- footer -----> <div class="inner"> <p>©2020 Original Theme All rights reserved</p> </div> </footer><!----- footer -----> </div> </body> </html>
style.css
@charset "utf-8"; /*-------------------- All --------------------*/ /*----- common -----*/ a{ color: #222222; text-decoration: none; } p,h1,h2,h3,h4,h5,h6,li,a{ font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; line-height: 1.5; } img{ display: block; max-width: 100%; height: auto; margin-bottom: 15px; } /*----- header -----*/ header{ padding: 30px 0; } header .inner{ width: 90%; margin: 0 auto; position: relative; } header h1{ font-size: 1.5em; } .sns{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; } .sns li:first-child{ margin-right: 10px; } .sns li.twitter a::before{ content: '\f099'; font-family: 'Font Awesome 5 Brands'; display: block; color: #cccccc; font-size: 1.5em; } .sns li.facebook a::before{ content: '\f082'; display: block; font-family: 'Font Awesome 5 Brands'; color: #cccccc; font-size: 1.5em; } /*----- navigation -----*/ nav{ background-color: #222222; } .nav{ width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; } .nav li{ width: 20%; } .nav li a{ display: block; padding: 15px 5px; background-color: #222222; text-align: center; color: #ffffff; } /*----- footer -----*/ footer{ background-color: #222222; padding: 30px 0; } footer .inner{ width: 90%; margin: 0 auto; } footer p{ color: #ffffff; text-align: center; font-size: 0.8em; } /*-------------------- Contents --------------------*/ /*----- common -----*/ .contents{ width: 100%; height: auto; min-height: 100vh; padding: 50px 0; background-color: #eeeeee; } .contents .inner{ width: 90%; margin: 0 auto; display: flex; } /*----- article -----*/ article{ width: calc(100% - 340px); overflow: hidden; } article section{ width: 100%; background-color: #ffffff; padding: 30px; margin-bottom: 20px; box-sizing: border-box; } article section p{ margin-bottom: 15px; } h2.ttl{ background-color: #eeeeee; border-left: solid 5px #222222; padding: 15px 10px; margin-bottom: 15px; font-size: 1.3em; } h3.ttl{ background-color: #eeeeee; border-bottom: solid 1px #cccccc; padding: 10px; margin-bottom: 15px; font-size: 1.2em; } h4.ttl{ border-bottom: solid 2px #cccccc; padding: 10px; margin-bottom: 15px; font-size: 1em; } /*----- aside -----*/ aside{ width: 320px; margin-left: 20px; overflow: hidden; } .side{ padding: 30px; background-color: #ffffff; margin-bottom: 30px; } .side li{ width: 100%; } .side .ttl{ border-bottom: solid 2px #cccccc; padding: 10px 0; margin-bottom: 15px; } .side a{ display: block; padding: 15px 0; background-color: #ffffff; position: relative; } .side a::after{ content: '\f054'; font-family: 'Font Awesome 5 Free'; display: inline-block; color: #cccccc; font-weight: 900; position: absolute; right: 0; }
WordPressデータ
WordPressのテーマを作るにあたり必要なデータは下記の通りです。こちらは後ほど作成します。
- header.php
- footer.php
- sidebar.php(サイドバー不要の場合は必須ではありません)
- functions.php
- index.php
WordPress化する
データを作成・設置
「wp-content」>「theme」と進み、既存のテーマと同じ階層に「original」の名称でテーマフォルダを作ります。

テーマフォルダに「用意するファイル」で挙げたWordPressデータを作成します。内容は一旦空でOKです。

つづいて元データからcssフォルダ、imgフォルダ、style.cssをコピーします。この時、imgフォルダから画像をコピーし、以下の階層に「screenshot.jpg(pngも可)」のファイル名で配置してください。

最後にindex.htmlの内容をindex.phpにペーストしてください。
テーマを有効化
ここまでの作業を確認したいので、WordPressの外観から作成した「original」のテーマを有効化しましょう。

サイトを表示するとCSSが適用されず、この時点では崩れた状態になっています。

PHPに置換
WordPressはPHPによる出力方法になり、これまでと階層が変わるため、「index.php」に貼り付けた相対リンクや画像は適用されません。ここからはWordPress専用の形式に置き換えていきます。
画像とファイル
画像 <img src=”〇〇”> とCSSファイル <~ href=”〇〇”> 内に以下のコードを貼り付けてください。順番は「出力コード/フォルダ名/ファイル名. 拡張子」となります。
<?php echo get_template_directory_uri(); ?>/フォルダ名/ファイル名.拡張子
この時点でサイト表示が解消されていれば問題ありません。

コードを分割
「index.php」のコードを分割していきます。ヘッダーからナビゲーションを「header.php」に、フッターを「footer.php」に、サイドバーを「sidebar.php」に移動してください。サイト表示は崩れますが大丈夫です。
今後、共通部分を分けることで、ページを一括で変更、修正できるようになります。既存のテーマの構成も管理しやすいよう工夫されているので、ぜひ確認してみてくださいね。
コードで出力
「index.php」のヘッダー部分に下記コードをペーストします。
<?php get_header(); ?>
「index.php」のフッター部分に下記コードをペーストします。
<?php get_footer(); ?>
「index.php」のサイドバー部分に下記コードをペーストします。
<?php get_sidebar(); ?>
サイト表示が戻っているか、念のため確認してください。
必須のコード
「header.php」の</head>の直前に下記コードをペーストします。
<?php wp_head(); ?>
「footer.php」の</body>の直前に下記コードをペーストします。
<?php wp_footer(); ?>
これらのコードが必須になる理由は、プラグインを適用したりスクリプトを読み込むときに、WordPress側が必要なコードを自動で出力するために使われるものだからです。
この記述があることで、ログイン中は画面上にツールバーが表示されるようになります。表示には個人設定のチェック有無、再ログインが必要になります。
functions.phpの使いどころ
自作テーマの基本構成は完了しました。未使用の「functions.php」については、投稿記事や外観などの機能を追加する段階で使うようになります。
例えば、メニューやウィジェット機能は、自身で出力コードを書かなければ利用することができません。既存のテーマを適用して見比べると分かりやすいですよ!
ちなみに、出力コードを覚える必要はありません。ブラウザで検索すると、同じように初心者向けの記事で紹介されています。慣れるまでは積極的に利用していきましょう。
ただし、テーマの基幹システムとして機能を集約するファイルのため、内容にミスがあるとエラーで画面が真っ白になります。予めバックアップを取ってから編集してください。
WordPressの自作テーマでサイトを作る方法をご紹介しました。一見難しいことのように感じますが、HTMLのデータをPHPの出力形式に変更するだけで、簡単に元データと同じ表示になります。
「get_header」などの出力コードは、各ファイルを呼び出すときに使う専用コードなので、この際に覚えてしまいましょう。