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