Twitterでブログ更新情報を配信中

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

WordPressのテーマを使うと開発時間が短縮されますが、オリジナリティを出すにはその分時間がかかるものです。「自作のテーマ」では自分に扱いやすい、デザインや機能も自由に決められるメリットがあります。既存のテーマに左右されないところが嬉しいですね。

まずはテーマ作成に必要なデータと階層を理解するところからはじめ、専用コードで正しく表示されるまでを解説していきます。

オリジナルテーマの完成例

当記事は基本構造の理解と作成手順が中心となるため、管理画面上の投稿記事を表示したい方は専用コードを調べた上でご対応ください。

用意するファイル

元データ

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のインストール、設置はこちらの記事をご確認ください。

WordPressのインストールとログイン方法。管理者パスワードを忘れたときは

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