WordPressのオリジナルテーマを3時間で作成する手順

027

「WordPressのオリジナルテーマを自作するなんて自分には無理」と思っていませんか?

WordPressのテーマを自作するための勉強は、学校の勉強と同じようにコツがあります。

例えば英語の勉強なら、文法や単語などイチから順番に覚えていこうとすると、記憶していくだけで疲れてしまいます。「なるほど!」や「そういうことか!」という感動を味わう前にあきらめてしまった経験がありませんか?

私が初めてWordPressのオリジナルテーマを作成したときも最初は参考書やWebサイトをチェックしました。

しかし、プログラムの仕組みや構造の説明ばかりが目立ち、途中で疲れて読むのをあきらめました。これらの基礎知識はもちろん大切ですが、テーマを自作する過程で自然と理解できてくるものがほとんどです。

最初から知識を詰め込みすぎて挫折するのは非常にもったいないです。まずはWordPressを動作させて自分でブログを作れることを体感しましょう。

本記事の流れで進めて頂ければオリジナルテーマの作成は3時間あればできます

ちなみに、私はHTMLが多少分かりますが、PHPなどのプログラム知識はほとんどありません。それでもオリジナルテーマは完成しました。

「あまり詳しくないなぁ」という方でも本記事のまま記述していくだけで3時間後にはオリジナルテーマは完成しています。頑張ってください!

スポンサーリンク
レクタングル(大)

必須のファイルは2つだけ

WordPressのオリジナルテーマに必須のファイルはたった2つです。

何を表示するか」と「どんなデザインか」という役割に分かれています。

すでに勉強されている方は「他サイトや参考書では○○.phpとか△△.phpとか3つも4つも必要って書いてあったぞ」と思われるかもしれません。

実はその通りです。

ですが、冒頭でもご説明した通り「本当は必要なもの」を最初から理解しようとするとかなりのことを覚えなければいけません。

ここは騙されたと思ってこのまま読み進めてください。大丈夫です!

これから着手するファイルイメージは以下のようなものになります。後でしっかり解説しますので、まずはさらっと見ておいてください。

  • 「何を表示するか」を決めるファイル ⇒ index.php
  • 「どんなデザインか」を  〃  ⇒ style.css

基本となる部分はこれだけで、あとは自分好みにカスタマイズしていきます。

001

index.php と style.css を準備する

ではここから実際に進めていきましょう!

基本となるページ「index.php」と、そのスタイルを定義する「style.css」を作成します。

index.php

ブログのTOPページにアクセスされた際に表示されるページです。

まずは下記の要素だけ記入してください。保存時の文字コードは「UTF-8」がよいでしょう。

<html lang="ja">
<head>
<title></title>
</head>
<body>
</body>
</html>

シンプル過ぎてビックリされたかもしれませんね。HTMLを構成する最低限の要素のみとなっています。これから色々と変更を加えていきますが、今はこれでOKです。

style.css

サイト全体のスタイルを定義するCSSファイルは「style.css」という名前で保存してください。これはルールで決まっていますので「そういうものだ」というぐらいの軽い気持ちでOKです。

中身には下記の要素を記入してください。保存時の文字コードは上記と同じく「UTF-8」にしておきましょう。

/*
Theme Name: SampleTheme
Author: SampleUser
Author URI: http://●●●.com
Description: サンプルのテーマ
*/

「CSSファイルなのに宣言が入ってるぞ」と思われるかもしれませんね。

この段階では、まだ実際のスタイルは記述していません。記述した内容は管理画面でテーマを選択する際に表示される「説明のようなもの」を記述しています。

それぞれの意味は下記の通りです。4つありますが、最低限書いてほしいのは1つ目だけです。他はなくても困りません。あ、そんなこと言ったらややこしいですよね、ではせっかくですので4つとも書いてください(苦笑)どこに反映されるかはこの後ご説明します。

  • Theme Name: テーマの名称(必須です)
  • Author: テーマの作成者(任意)
  • Author URI: ブログのURL(任意)
  • Description: テーマの説明(任意)

2つのファイルを1つのフォルダにまとめる

ここまでで作成した「index.php」と「style.css」を任意のフォルダにまとめて保存しておきましょう。フォルダのファイル名は半角英数字であれば何でも構いません。私は「sample」というフォルダにまとめて入れました。

この部分のオペレーション動画を作りましたが、恐らく見ていただかなくてもご理解いただける作業かと思いますね…お心の広い方だけどうぞ!わずか15秒です。

動画キャプチャーに興味をお持ちの方は「動画キャプチャーソフト「Readygo Screen Recorder」の使い方」にレビューを書いていますので、ぜひご覧ください。

フォルダをサーバーにアップロードする

作成したフォルダごとサーバーにFTPソフトを利用してアップロードしましょう。アップロードする階層は下記の「themes」フォルダの中です。

(WordPressをインストールしたフォルダ)/wp-content/themes/

すでに「twentyfourteen」や「twentyfifteen」などの他のテーマが設置されているかもしれません。気にせず同じ階層にフォルダ(私の場合は「sample」)ごとアップロードしてください。

アップロード後の私のサーバー「themes」フォルダは下記のようになっています。

01

ブログにテーマを反映する

ここまでの作業で、あなたのブログはすでにオリジナルテーマに変更できる準備が整いました。

「え、まだ何も書いてないぞ」と思われるかもしれません。確かにこの状態でテーマ反映すると画面は真っ白になります。

でも気にせずやりますよ。心配されなくても、問題ありませんので安心してくださいね。

ここまでで作成したテーマをブログに反映してみましょう。WordPressの管理画面にログインしてください。

概観 > テーマ

を選択しましょう。

すると一覧の中に「SampleTheme」というテーマが増えているはずです。

このテーマ名は先ほど作成した「style.css」の1つ目の文字列を表示していますので、別の文字列に変更されている方はその文字列になっています。

ほら、もう応用が効いて仕組みが1つ分かりましたよね!

02

テーマ名の横にある「有効化」ボタンをクリックしましょう。テーマが反映されます。

なお、先ほど「style.css」に4つ記述した内容は上記の「テーマ詳細」をクリックした後に表示されるページに使われています。

01

こんな感じです。

個人で自作する場合はここまで細かく設定しなくてもいいかもしれませんが、空っぽなのもなんですので書いておきました。

補足ですが、上記の白とグレーの格子模様を任意のサムネイル画像にすることもできます。この部分もこだわりたい方は「WordPressのテーマにサムネイル画像を設定する」を参照してトライしてみてください。

ただ、必須の作業ではありませんので、このままでももちろん構いません。

テーマが反映されたサイトをチェックする

テーマを有効化すると、サイトが真っ白になったと思います。でも安心してくださいね。それで正解です。

まだ何を表示するか指示を入れていないだけです。真っ白になったということはこれからどんどんチューニングできるという準備完了の合図なんです。

この状態で放っておくのはさすがに不安だと思いますので、引き続き、基本的な要素をどんどん表示していきます。くどいですが、何はともあれ準備は完了です。

ブログタイトル(サイトタイトル)を表示する

ブログタイトルを表示するには「index.php」に以下の1行を追加します。追加する場所は<body>と</body>の間です。
※以降、特に注記をしていない場合は、<body>と</body>の間に追加すると解釈してくださいね

<?php bloginfo('name'); ?>

キャッチフレーズを表示する

キャッチフレーズを表示するには「index.php」に以下の1行を追加します。

<?php bloginfo('description'); ?>

記事要素を表示する

ここまでのパーツはページに1つ表示すればよかったわけですが、ブログの記事は少し性質が異なります。たくさん書かれている方は記事数が10や20、それ以上の場合もあるでしょう。それらをひとつずつ記述していては大変ですので、WordPressではループ処理という概念があります。「データがある分をすべて出す」というような処理です。「index.php」に以下のように宣言します。

ここから記事の表示に関する解説になりますので、ブログの記事数が0ですと何も表示されません。記事を1つも登録されていない方は、事前に3つほどダミーで結構ですので作成しておいてください。
※下記は宣言だけですので、記述しても何も表示されません

<?php if(have_posts()): while(have_posts()): the_post(); ?> <!-- ループ開始 -->

<!-- ここに繰り返し表示したい項目を記述します -->

<?php endwhile; endif; ?> <!-- ループ終了 -->

「うわ~!結局、意味不明なのが出て来たよ」と思われた方、あまり気にしてもらわなくて大丈夫です。HTMLでも「<html>で始まれば</html>で閉じる」というルールがありますよね。それに近いものです。おまじないだと思って理解して頂ければ大丈夫です。

上記の「ここに繰り返し表示したい項目を記述します」の部分に「記事タイトル」や「本文」、「カテゴリー」など1つの記事ごとに表示させたい項目を追加します。一般的な組み合わせは下記のような感じになります。「index.php」に追加してみてください。
※この記述で初めて要素が表示されます

<?php if(have_posts()): while(have_posts()): the_post(); ?> <!-- ループ開始 -->

<?php echo get_the_date(); ?> <!-- 投稿日時を表示 -->
<?php the_category(', '); ?> <!-- カテゴリーを表示 -->
<?php the_title(); ?> <!-- 記事タイトルを表示 -->
<?php the_content(続きを読む); ?> <!-- 記事本文を表示 -->

<?php endwhile; endif; ?> <!-- ループ終了 -->

ちなみに記事タイトルから記事へのリンクを貼りたい場合は、上記の「記事タイトル」表示の行を

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

としておくとリンクが貼れますので、好みで使ってくださいね。

ここまでのまとめ

少し長くなってきましたのでここまでの記述をまとめました。

今後のCSSでのレイアウト調整を考慮して各パーツを<div>でくくっておくと良いでしょう。

<html lang="ja">
<head>
<title></title>
</head>
<body>
<div><?php bloginfo('name'); ?></div>
<div><?php bloginfo('description'); ?></div>
<div>
<?php if(have_posts()): while(have_posts()): the_post(); ?> <!-- ループ開始 -->

<?php echo get_the_date(); ?> <!-- 投稿日時を表示 -->
<?php the_category(', '); ?> <!-- カテゴリーを表示 -->
<?php the_title(); ?> <!-- 記事タイトルを表示 -->
<?php the_content(続きを読む); ?> <!-- 記事本文を表示 -->

<?php endwhile; endif; ?> <!-- ループ終了 -->
</div>
</body>
</html>

上記の記述だけでも「なんとなく見たことある情報が表示されてきたな」と思える感じになってきたと思います。

WordPressはここまで作っておくと、エラーなく一通り動きます。

この段階では次の章で登場する「記事ページ」や「固定ページ」のテンプレートはありませんが、WordPressはとてもかしこく作られていて、テンプレートが無い場合はそれらの代わりをすべてトップページ(index.php)が行ってくれる仕組みになっているんです。

もちろん見栄えはすべてTOPページ風にはなってしまいますが、ちゃんと情報も表示してくれるんです。

まだ基本部分ではあるのですが、これだけでもブログは一通り動くんですよ。すごいですよねぇ、WordPressは。

ご自身の手でテンプレートを作り上げてみると理解も深まったのではないでしょうか?難しい知識を先に勉強するよりもまずは作ってしまうことが大事だと思いますね!

「習うより慣れろ」とはよく言ったもんです。

【保存版】WordPressが使えるレンタルサーバーを比較。初めてでも安心できるサーバーは?
「WordPressを使いたいけど、どのレンタルサーバーを選べばいいのか分からない」 初めてレンタルサーバーを契約する際、比較する項目...

トップページ以外のテンプレート準備

ではここから少しずつブログっぽく仕上げていきましょう。

先ほどご説明したようにブログには役割の異なるページがあります。ここまでで作成した「index.php」はトップページ、記事詳細ページ、カテゴリページなどブログに必要なページをすべて兼任してくれる優秀なPHPファイルですが、1種類のテンプレートで使いまわすことになるため、どのページも同じ見栄えになります。

せっかくテーマを自作しますので、それぞれのページごとに表示する要素やデザインをカスタマイズしたいですよね。

ということで、これから「記事ページ」など他のテンプレートも作成していきますよ。

003

「え~またイチからこの作業をやっていくの?」と思われた方、安心してください。

WordPressには「インクルード」という考え方があります。似たようなテンプレートを作成する際、共通で使う部分は別のファイルで管理しておいて、それを必要な時に読み込んで一体化させてしまうというものです。

「共通で使う部分」というのはページ上部のロゴやサイト名、ナビゲーション、ページ下部であればフッター要素などですね。どのページでも同じように表示されている部分と思ってもらえればOKです。

ではここまでで作った「index.php」のベース部分を使いながら他のテンプレートも作っていきます。

インクルードの準備をする(切り出し編)

インクルードは外部ファイルを自分のファイルに読み込むという処理です。

index.phpから見た場合、まだ外部のPHPファイルというのは存在しませんね。インクルードするために外部ファイルを作っていきます。

ページを分解する

前述しましたようにインクルードは「トップページ」や「記事ページ」で共通で利用するパーツと別々に記述するパーツを分けるところから始まります。

ここまでで作成した「index.php」を他のテンプレート(single.phpやpage.php)でも利用する共通部分とそうでない部分に分けて、共通部分は外部ファイルにしていきます。固有の記述部分だけ自分自身のファイルに残しておきます。

002

一般的に共通化して利用するのは「ヘッダー」「フッター」と今はまだ説明していませんが「サイドバー」ですね。ここまでで作成した「index.php」の中身を見ていきましょう。

ヘッダー部分の切り出し(header.php)

「ヘッダー」はページ上部にどのページでも共通で表示させておきたい部分を指定しましょう。これまでの「index.php」では「キャッチフレーズ」までが適当だと思います。「index.php」の1行目から以下の部分までを「切り取り」して別ファイルに貼り付けてください。保存時のファイル名は「header.php」としてください。保存先はこれまでに作成していたフォルダ(私の場合は「sample」)の中で結構です。

<html lang="ja">
<head>
<title></title>
</head>
<body>
<div><?php bloginfo('name'); ?></div>
<div><?php bloginfo('description'); ?></div>

フッター部分の切り出し(footer.php)

フッターは今の「index.php」には表示要素はありませんが、コピーライトの表記などをすることもありますので、合わせて作成しておきます。今度は「index.php」の末尾から以下の2行を「切り取り」して別ファイルに貼り付けてください。保存時のファイル名は「footer.php」としてください。保存先はこれまでに作成していたフォルダ(私の場合は「sample」)の中で結構です。

</body>
</html>

残った index.php にインクルード読み込みタグを埋め込む

上記2つの作業をすると「index.php」の記述内容はメインの部分を残してほとんどなくなりましたね。このままだと切り出したヘッダーとフッターは消えたままとなりますので、ここにインクルードの読み込みタグを設置します。現状のindex.phpはこんな感じです。

<div>
<?php if(have_posts()): while(have_posts()): the_post(); ?> <!-- ループ開始 -->

<?php echo get_the_date(); ?> <!-- 投稿日時を表示 -->
<?php the_category(', '); ?> <!-- カテゴリーを表示 -->
<?php the_title(); ?> <!-- 記事タイトルを表示 -->
<?php the_content(続きを読む); ?> <!-- 記事本文を表示 -->

<?php endwhile; endif; ?> <!-- ループ終了 -->
</div>

インクルードの準備をする(読み込み編)

では早速「index.php」に読み込みタグを設置していきましょう。

ヘッダー(header.php)を読み込む

ヘッダー部分を読み込むには「index.php」に以下の1行を追加します。ヘッダー要素を切り取った場所に追加してください。「index.php」の1行目ですね。

<?php get_header(); ?>

フッター(footer.php)を読み込む

フッター部分を読み込むには「index.php」に以下の1行を追加します。フッター要素を切り取った場所に追加してください。「index.php」の最下部ですね。

<?php get_footer(); ?>

インクルードの表示テスト

ここまで完了したら一度、インクルードが無事に動作するかをチェックしましょう。これまでサーバーには「index.php」と「style.css」の2種類だけでしたが、今回切り出した「header.php」と「footer.php」を合わせた合計4ファイルをこれらと同じ階層に上書きアップロードしてください。
※「index.php」も変更していますので、サーバーへのアップロードの際は上書きしておいてくださいね

先ほどまでの「index.php」と「style.css」の2種類だけで構成していた時と表示が何も変わっていなければ正解です。もし表示が崩れていたり、同じ要素が2つもある場合は切り出しのポイントが重複していたり貼り付けミスの場合がありますので、これまでの解説を見直して修正してみてください。

下記は私の例ですがこのような表示になっていればここまでは完璧です。
※「サイト名:サンプルサイト」「キャッチフレーズ:サンプルのキャッチフレーズ」「タイトル:test1 本文:text1」と「タイトル:test2 本文:text2」という内容です

04

これでブログに記事を書いていれば、エラーなくトップページや記事詳細ページなどが一通り表示できるようになりました。

ただ、それぞれのページごとに表示する項目や見た目をカスタマイズしたいという方のほうが多いと思います。

ですので、次の章では、ブログの記事ページや固定ページ、サイドバー、グローバルナビなどを追加してさらに作りこんでいきましょう!

まずはここまでお疲れ様でした!

スポンサーリンク
レクタングル(大)
レクタングル(大)
LINEスタンプ
LINEスタンプ販売中です

ゆれる白いトリ

キノカッパ

日常トークに使えるスタンプも販売中⇒LINE公式ストアへ