【 更新 】おすすめ記事はこちら

【WordPress】自作テーマでオリジナルサイトを作る!テンプレ付き

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」の名称でテーマフォルダを作ります。

originalのテーマフォルダを作成

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

テーマフォルダにphpファイルを作成

つづいて元データから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」などの出力コードは、各ファイルを呼び出すときに使う専用コードなので、この際に覚えてしまいましょう。