2018.08.25

2019.12.18

POST TITLEWordPressのオリジナルテーマ（自作）を作るために最低限必要なファイルは？

こんにちは、Vierです。

現在、WordPressを使ったWEBサイトの需要は、日に日に高まってきています。

WordPressは、2018年4月時点でCMS（コンテンツ管理システム：Content Management System）のシェアが30%を超えており、ダントツで1位です。

WordPressを利用したWEBサイトを（もしくはブログサイト）作るには、サーバー契約や、ドメイン取得など若干の費用と、ちょっとした知識が必要なのですが、自分でオリジナルのWEBサイト（ブログサイト）を作りたいなーと思った人向けに、

「まず何からやれば良いの？」

からお伝えしていきたいと思います。

メモ

ここでは、html、css、ファイルのアップロードの方法などの方法については説明は省いていきます。

オリジナルテーマに最低限必要なファイル

では早速、WordPressのオリジナルテーマに最低限必要なファイルを見ていきましょう。

ここでは、ブログサイトを例として、トップページと各カテゴリーページ、日付アーカイブページ、プロフィールやお問い合わせページが表示されることを仮定します。

ファイル名	説明
header.php	ヘッダーアリアを表示させるためのテンプレートファイル
footer.php	フッターエリアを表示させるためのテンプレートファイル
index.php	コンテンツ部分（主にトップページ）を表示させるためのテンプレートファイル
sidebar.php	サイドバーを表示させるためのテンプレートファイル
page.php	固定ページ（プロフィールやお問い合わせ）を表示させるためのテンプレートファイル
archive.php	カテゴリーや日付アーカイブのページ等を表示させるためのテンプレートファイル
functions.php	WordPressの設定をするためのファイル
style.css	テーマ情報とWEBサイト全体のスタイルを設定するためのCSSファイル

ざっとこれらのフィルがあれば、オリジナルテーマを適応することができます。

ポイント

ほかにもいろんなテンプレートファイルがありますが、まずは「オリジナルテーマを作るには最低限必要なテンプレートファイルがあるんだ！」ということを知ってもらえたらOKです。

WordPressのテンプレートファイルとは？

ここまで、テンプレートファイルという言葉が頻繁に出てきています。

テンプレートファイルについて少しだけ説明しておきます。

テンプレートファイルは、あなたの WordPress サイトの構成要素です。サイト上のどのウェブページを生成するときにも、パズルのピースのように組み合わさります。ヘッダ・テンプレートファイルやフッタ・テンプレートファイルのようなテンプレートは、あらゆるウェブページのために繰り返し使われます。特定の条件でのみ使われるテンプレートもあります。
テンプレート入門

上記は、WordPressを扱うほとんどの人が見てるであろうWordPress Codex 日本語版（WordPressのWikipediaみたいなやつ）のテンプレート入門というページから引用しましたが、ちょっと僕なりの言葉にすると

「WordPress特有のヘッダーとかフッターとかを表示させるファイル名が決まっているので、それに合わせて適切なファイルを用意してあげよう！」

って感じです。

ヘッダー部分は、header.phpのファイルにコードを入れて表示させよう、サイドバーはsidebar.phpにファイルを入れて表示させよう、って具合に。

WordPress Codex 日本版のテンプレート階層のページにたくさんのテンプレートが載っていますので、一度覗いてみるのもありです。

最低限必要な各テンプレートファイルについて

では、それぞれのテンプレートファイルの説明とコード例をみていきましょう！

例となる静的htmlファイル

下記のコードを例にしていきます。

index.html<!DOCTYPE html>
<html lang="jp">
<head>
	<meta charset="UTF-8">
	<title>vierブログ</title>
	
	<link rel="stylesheet" href="syle.css">
</head>
<body>
	
	<header>
		<h1>vierブログ</h1>
	</header>
	
	<main>
		
		<div class="main-content">
			
			<h2>ブログ一覧</h2>
			
			<section>
				<h3>ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</h3>
				<time>2018.8.20</time>
				<a href="hoge">ブログを読む</a>
			</section>
			
			<section>
				<h3>ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</h3>
				<time>2018.8.19</time>
				<a href="hoge">ブログを読む</a>
			</section>
			
			<section>
				<h3>ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</h3>
				<time>2018.8.18</time>
				<a href="hoge">ブログを読む</a>
			</section>
			
		</div>
		<!-- /main-content -->
		
		<div class="sidebar">
			<p>カテゴリー</p>
			<ul>
				<li><a href="hoge">ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</a></li>
				<li><a href="hoge">ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</a></li>
				<li><a href="hoge">ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</a></li>
			</ul>
		</div>
		<!-- /sidebar -->
		
	</main>
	
	<footer>
		<small>&copy; 2018 vierブログ.</small>
	</footer>
	
	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script src="main.js"></script>
</body>
</html>

他にもいろんなタグやコードが必要場合がありますが、余分なコードを省いた超シンプルなindex.htmlファイルです。このサンプルコードを使って、コードを振り分けていきます。

今回は、「sample-theme」というフォルダを作り、そのフォルダー内にこれから説明していくphpファイルを保存していってください。

header.php

header.phpは、WEBサイト（ブログサイト）のヘッダー部分を読み込み、表示させるためのテンプレートファイルです。htmlファイルのヘッダー部分の終わりまでのコードを、herder.phpに入れます。

header.php<!DOCTYPE html>
<html lang="jp">
<head>
	<meta charset="UTF-8">
	<title>vierブログ</title>
	
	<?php wp_head(); ?> <!-- ←追加する -->
</head>
<body>
	
	<header>
		<h1>vierブログ</h1>
	</header>

静的なhtmlのみで各ページを作っている場合は、全ページにヘッダー部分のコードが入っていて「ロゴ画像を変更したい」なんてことがあれば、全ページのhtmlファイルを開いてロゴ画像を変更しなければなりません。これはとても大変な作業になってしましますが、WordPressが基本的に、どのページでもこのheader.phpを読み込んで表示させるので、ロゴ画像を変更するときもheader.phpだけ変更すればよいということです。

必ず <?php wp_head(); ?> を入れること

WordPressのオリジナルテーマの作成で、コードを各テンプレートファイルに振り分けるときに、必ず、</haed>の直前に、<?php wp_head(); ?>を差し込んで下さい。

メモ

<?php wp_head(); ?>は、WordPressのWEBサイトで必要なコード類について、<head>内で読み込む必要がものなどをまとめて読み込んでくれます。また、プラグインを追加したときなどもこのタグによって読み込まれます。100%必要なタグなので、忘れずに入れましょう。

footer.php

次は、footer.phpです。

WEBサイト（ブログサイト）のフッター部分を読み込み、表示させるためのテンプレートファイルです。htmlファイルのフッター部分から終わりまでのコードを、footer.phpに入れます。

footer.php	<footer>
		<small>&copy; 2018 vierブログ.</small>
	</footer>
	
	<script　src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script src="main.js"></script>

	<?php wp_footer(); ?> <!-- ←追加する -->
</body>
</html>

footer.phpもheader.phpと考え方は同じで、同様に、footer.phpでは、<?php wp_footer(); ?>を</body>の直前に差し込んで下さい。

メモ

<?php wp_footer(); ?>は、WordPressのWEBサイトで必要なコード類について、</body>の直前で読み込む必要がものなどをまとめて読み込んでくれます。また、プラグインを追加したときなどもこのタグによって読み込まれます。100%必要なタグなので、忘れずに入れましょう。

sidebar.php

次は、サイドバーです。ブログサイトだとほとんどと言っていいほど、サイドバーがありますね！

サイドバーの役割は、カテゴリーページや日付アーカイブページ、新着記事の最初の5件などがよく表示されていますね。

見てくれている人が色んな方法で自分の読みたい記事にたどり着けるようによく配置されます。

sidebar.phpは、サイドバーに表示されるコードを入れます。ではコードを見てみましょう。

sidebar.php		<div class="sidebar">
			<p>カテゴリー</p>
			<ul>
				<li><a href="hoge">ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</a></li>
				<li><a href="hoge">ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</a></li>
				<li><a href="hoge">ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</a></li>
			</ul>
		</div>
		<!-- /sidebar -->

index.php

ここまで、ヘッダー部分とフッター部分のテンプレートファイルに振り分けました。次にindex.phpです。

index.php<?php get_header(); ?> <!-- ← ヘッダーを読み込む -->

	<main>	
		<div class="main-content">
			
			<h2>ブログ一覧</h2>
			
			<section>
				<h3>ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</h3>
				<time>2018.8.20</time>
				<a href="hoge">ブログを読む</a>
			</section>
			
			<section>
				<h3>ぶろぐたいとるぶろぐたいとるぶろぐたいとるぶろぐたいとる</h3>
				<time>2018.8.19</time>
				<a href="hoge">ブログを読む</a>
			</section>
						
		</div>
		<!-- /main-content -->
		
<?php get_sidebar(); ?>　<!-- ← サイドバーを読み込む -->
		
	</main>

<?php get_footer(); ?>　<!-- ← フッターを読み込む -->

ヘッダーとフッター、サイドバーを振り分けた後の残りのコードをindex.phpに差し込みます。

そして、ヘッダー・フッター・サイドバーを読み込むコードを、各位置に差し込んで読み込みます。

今回差し込んだ、<?php get_header(); ?>とかのコードは、インクルードタグと呼ばれており、同じフォルダ内にある決められたファイル読み込んでくれます。詳細は、インクルードタグを覗いてみてください。

style.css

このstyle.cssも必ず、「sample-theme」内に入れてください。

このcssファイルの頭に、WordPressのテーマと認識してもらうためのコードを書くことで、管理画面の「外観＞テーマ」のページで、選択ができるようになります。

では、style.cssの中身を見ていきます。

sidebar.php/*
Theme Name: vier blog theme（必須）
Theme URL: テーマのサイトのURI
Description: vierのオリジナルのブログテーマです。
Author: vier
Version: テーマのバージョン
Tags: テーマタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/

上記が、テーマの情報になります。この中で必須なのは、1行目の「Theme Name」で、テーマの名前は必ず入れるようにしてください。

functions.php

functions.phpもテーマフォルダ（「sample-theme」）の中に入れておいてください。functionというのは、直訳すると「機能」になりますが、このファイルにコードを書くことで、様々なカスタマイズができるようになります。

functions.phpについては、また別の機会でご紹介したいと思います。

sample-themeフォルダ内の確認

ここで、「sample-theme」内のファイルを確認してみます。

index.php◻sample-theme
｜header.php
｜footer.php
｜sidebar.php
｜index.php
｜functions.php
｜style.css

上記の6つのファイルがテーマフォルダ内にあると思います。

まだこれでは、ブログサイトとして機能していないのですが、「WordPressってこんな感じの容量でオリジナルテーマを作っていくんだ！」ということがわかってもらえれば良いかなーと思います。

まとめ

正直、WordPressのオリジナルテーマ作成って、たくさん作業があって、phpのことがあまりわからないと、結構苦戦するかもしれません。

かくいう僕も、phpのことがわかっていないのにもかかわらず、「オリジナルのテーマ作りたいっ！」ってだけで、手を出しました。

htmlとcss
JavaScriptやjQueryちょっと
WordPressオリジナルテーマ作成！！

という無茶苦茶な順番で学んできたので、オリジナルテーマの作成にはかなり苦戦したんです。

そもそもプログラミングの概念がわかっていなかったから、なぜそのコードがそのように動くのかさっぱりなことがたくさんありました。

でも、現在は静的サイト（htmlとcssのみ）はだんだん減ってきており、ブログやSNSでの情報発信が主流になってきて、ブロガーもたくさんいます。

オリジナルのブログテーマで他と差をつけたい！

自分のブログをブランディングしてファンを作っていきたい

という方は、ぜひ勉強してみてください。