こんにちはKotaです。
この記事ではWordPressのテーマ自作したいけど、必要なファイル構成が分からない！なぜファイルが分割されているの？といった疑問に対し、初心者に向けて解説していきたいと思います。
また本ブログでは、WordPressのテーマを自分で作れるよう、一通りの解説をしていく予定です。40代でも出来ます！一緒にやっていきましょう。
また、本ブログでは「サックリ」伝えて「ゆっくり」説明していきますので、お急ぎの方はサックリだけでも見ていって下さいね。
目次
対象者
- WordPressのテーマを自作したい人(オリジナルテーマを作りたい人)
- WordPressのテンプレートファイル(ページテンプレート)について知りたい人
- 最低限の知識を身につけている人
- とにかくWordPressやそのテーマ作りに興味がある人
事前に最低限必要なスキル
- HTML,CSS,Bootstrap,PHP(基礎的な事がわかればok)
- WordPressの使い方がそれなりにわかる
1.基本のファイル構成（本文）サックリ
さて、今回はWordPressのテーマを自作するときに必要なファイルについてのお話です。
まずは必要なことをサックリお伝えしますね。
基本的に必要なのは下記のファイルです。
（必要に応じてさらにファイルを追加していくのですが）
基本のファイル構成
基本のファイル構成
- header.php
- index.php
- sidebar.php
- footer.php
- style.css
- fanctions.php
それと以下も必要です
もう二つの必要なファイル
- single.php
- page.php
ポイント
- 「php」ファイルとして作成する事
各ファイルの内容
それぞれのファイルがどんな内容なのか？を↓にまとめました。
| ファイル名 | 内容 |
|---|---|
| header.php | head部分とheader部分のコード |
| index.php | 記事概要のコード(メイン部分) |
| sidebar.php | サイドバー部分のコード |
| footer.php | footer部分（コピーライトなど）のコード |
| fanctions.php | 様々なファンクションのコード |
| style.css | そのままですが、CSSコード |
| single.php | 記事を表示させるコード |
| page.php | 固定記事を表示させるコード |
なぜファイルが分割されているのか
なぜファイルを分ける必要があるのか？
- 共通部分を他のページで使いまわせるので便利
- 修正する際、一つのファイルだけで済むので便利
- 一つのファイル内のコードが少ないとわかりやすい
- （分けなくても作れます）
各ファイルの配置イメージ
このファイルを実際に配置してみるとこんな感じです。
- index.php
- (又はsingle.php)
- (又はpage.php)
index.phpの部分は表示させる用途に応じてsingle.phpやpage.phpに置き換わります。
以上です。
2.基本のファイル構成（補足）ゆっくり
さて、以下は雑談混じりでもう少し説明をしていきます。 のでここからは読み飛ばしてOK。気になった人だけ読み続けてもらえれえばと思います。
対象者について
冒頭に書いておきましたが、WordPressのテーマを自作したい人、そして初心者の人、に向けて書いております。また、自分が40代から本格的に学習を始めた事もあり、同世代の方々にもぜひ見て欲しいと思います。40代からでも遅くはありません。もちろん、他の年代の方、ただ様子を見たくて眺めていきたいんだ。という方も見てもらえたら嬉しいです。
事前に最低限必要なスキルについて
ちなみに私の場合ですが、
HTML,CSS,Bootstrap,jQuery,PHP,MySQLを一通り学習してから取り組みました。ですが、WordPressのテーマの自作を始めるにあたっては、対象者の欄に書いた「事前に最低限必要なスキル」があれば良いと思います。
HTML,CSS
HTML,CSSでページが作れる事が大前提です。
もちろんWordPressの既存のテーマを使ってブログを始めたい！という方はわからなくても出来ると思います。（使えた方が良いですが）ですが、自分でテーマを作りたいという人でしたら、必須なのでそこの学習から始めましょう。
Bootstrap
Bootstrapは私の手順では使用しているので必要ですが、使わずに作成する事も可能です。
ではどこに使っているのか？というと、
レイアウトにGridを使用しました。
あとはモバイル用のメニューであるハンバーガーメニューの表示・非表示にcollapseを使用しています。
PHP
PHPは基本的な事が分かっていればとりあえずは進められます。
それってどの程度の事なの？というと、
変数・配列・連想配列・文字、数字の扱い・演算子・ループ・条件分岐・ファンクション（関数）・（クラス）といったような事がある程度分かっていればよいかと思います。
しっかり暗記しておく必要はありません。
知らないファンクションとか色々でてくるけど、その都度使い方を調べればok。徐々に覚えていきましょう。
最初から全てを完全に覚え、使えるようになってから次を始める。というやり方は、とても時間がかかってしまいおすすめ出来ません。
40代ともなると、様々な経験をされてきたかと思います。その中の多くは実際にやりながら覚えてきた。のではないでしょうか？のでその感覚はすでに体感してきていると思います。また、使わないスキルを学習しても、忘れていってしまいませんか？
私の場合は↓の様に学習しています。
- 基礎をある程度学習
- ↓
- 実際に使っていく
- ↓
- 分からない
- ↓
- 学習して解決する
- ↓
- フィードバックさせる
基礎学習はほどほどにして、実際に使いながら覚えていく形です。
とはいっても、私の場合かなり時間をかけてしまっているのが現状なので、もっとスピードを上げてサイクルを回し、進めていきたいと思っています。（こんな事言ってますが、本当に私はペースが遅いんです。困^^;）
SQL
SQLは使えなくていいの？そうですねSQLが使えた方がいいとは思います。が、データベースってどんなもの？という知識を持っていればとりあえずは大丈夫です。
WordPressにはテンプレートタグというものが用意されていて、それを使う事でデータベースとのやり取りを行なっていきます。ので、まずはテーマを自分で作ってみる。の段階ではSQL文は使う必要がありません。
テンプレートタグを介さずにPHPで直接SQLを操作したい、その段階で学習しても良いと思います。
WordPress
私の場合はいきなりWordPressのテーマを作り始めてしまったのですが、WordPressでブログを始めて、ある程度使ってからの方が良さそうです。WordPressってどんなもの？というのがわかるので、そのためにどんなテーマを作りたいか、作ればいいのか。というのが分かり易いかなと感じました。
また、WordPressの学習をするにあたり重要なサイトをご紹介しておきます。
WordPress Codex 日本語版
こちらはWordPressの公式オンラインマニュアルです。テンプレートタグの具体的な使用法などを確認する時に便利です。が、端から読む必要はないと思います。
また、このサイトへ入るのには、調べたいキーワードでググれば候補に出てくると思うのでそこからひらけば、必要な情報にたどり着けると思います。
WordPressのファイル構成について
どうしてこんなにファイルが必要なの？面倒じゃない？
そうですよね。
WordPressの本当に最小の構成ファイルは「index.php」と「style.css」があればいいそうです。
じゃあ何で何個もファイルを作るの？
それは、その方が便利だからです。理由はですね・・・
WordPressでは基本的に3つのページが想定されていて、
- 一つ・・・記事概要が並べられているページ
- 二つ・・・記事の内容を表示するページ
- 三つ・・・固定ページ
があります。これらのページを作るとき、共通部分を切り出しておく事によってそれが楽になるんです。
header.phpとfooter.phpは3つのページで共通で使えるようにしておきます。ので各ページ毎にその部分を書く必要はありません。
sidebar.phpもそのまま使ってもいいですし、不要だと思えば入れなければいい。着け外しが簡単に出来ます。
ですので、index.phpとsingle.phpとpage.phpに対し、header.phpとfooter.phpを付けて、必要ならsidebar.phpをつければページが出来上がります。
視覚化してみるとこんな感じです。
記事概要を表示するページ・・・サイドバー付けておこうかな。
- 記事概要1
- 記事概要2
- 記事概要3
記事の内容を表示するページ・・・ここもサイドバー付きとしようか。
記事内容
固定ページを表示・・・ここにはサイドバーは付けないでおこう。
固定ページ
という具合に、サイドバー無しで表示する時には、sidebar.phpを外せば良いのでこんな感じになります。もちろんsingle.phpでも同様に出来るし、index.phpからサイドバーを外すこともできます。
また、修正するときを考えるとどうでしょうか？
例えばトップのロゴ辺りに変更を加えたい！
となった時に、header.phpを修正すればどのページも同じ様に修正が反映されるんですね。
でもこれが3つのページそれぞれで完結したページだったらどうでしょうか？3つのファイルを開いて、それぞれに変更を加えなければなりません。そう考えると1ページを分割したファイルで作るメリットが見えてくるのではないでしょうか？
また、上記のfanctions.phpとstyle.php以外のファイルは「テンプレートファイル(ページテンプレート)」と呼びます。のでgoogleで検索する時には「wordpress テンプレートファイル」のキーワードを入れるとググり易いと思います。実際には、ここで紹介した他にも沢山のテンプレートファイルがありますので、更に深めていきたい方は調べてみて下さいね。
WordPress Codex日本語版のサイトに「テンプレート入門」のページがありますのでリンクを貼っておきます。
テンプレート入門（WordPress Codex日本語版）
また、同サイトにある「テンプレート階層」に関する外観図がありますので、こちらもどうぞ。
テンプレート階層外観図（WordPress Codex日本語版）
と言ってもこれを見ただけではわかりません。一応見ておいて、必要になったら確認しにいきましょう。この図をサッと見たら、その下の文章を読んだ方がわかりやすいと思います。ざっくりと把握だけしておけばokです。
各ファイルの内容について
各ファイルにどこまでを書くのか？厳密に決まってはいなさそうです。ので、ここでは私の場合を載せておきます。
header.php
<!DOCUMENT html>から始まって、<body>に入り、<header>までとします。
そして<header>の中にはサイトのタイトルやナビメニューなどが含まれます。
index.php
index.phpは作成したサイトの最初に表示されるページとなります。ので、ここでは各記事の概要を並べて、訪問者に対して紹介をしていきます。
<header>の後から<footer>の手前までを書きます。
<aside>で囲む、サイドバーとなるコードは含みません。
また、header.phpとsidebar.phpとfooter.phpを読み込むためのテンプレートタグを書いておきます。それによりindex.phpを読み込んだ時に、各ファイルからコードを得て一つのページが出来上がるようになっているのです。
sidebar.php
<aside>で囲まれた部分。ページのサイドバーの部分をこのファイルに書いておく。名前こそサイドバーだが、実際には好きな場所に配置できる。
footer.php
<footer>以降で、最後まで。つまり</html>までを書く。
コピーライトはここに含まれる。私はこの部分にもウィジットを入れている。
style.css
もちろんcssを書くファイルです。
WordPressだからどうこう、ということは無いけど、見た目を整える部分なのでとても重要な部分です。今こうやって最初のブログ記事を書きながらcssも作っているが、どうやったら見やすくなるか？を重視して書いています。（どうですか？見易いですか？）
ただし一つだけWordPress用に重視した方がいいかな？と思う部分は記事を表示させる部分のcssです。いくつも記事を書いていくので、できるだけ共通で使用できて、尚且つ使いやすくしておくのが大事かな。と思います。
fanctions.php
WordPressならではのファイルでしょう。
標準の設定に対し変更するために、ここにファンクションを書く事で可能となります。
また、このfanctions.phpは他のテンプレートファイルからの呼び出しが出来ます。ので、ここに使用したいファンクションを書いておいて、他のテンプレートファイルから呼び出し実行する。といった用途にも使用できます。
WordPressが初期化する時に呼び出され、必要な処理は実行されます。また、ファンクションの実行のタイミングもセットする事ができるので、何かのアクションに対してこのファンクションを実行してね。という事もできます。
ここをいじる時は、まずバックアップ(コピーしておけばok)。また、こまめに動作確認する事をお勧めします。エラーが発生するとページがうまく動作しなくなってしまうので。
single.php
記事の内容を表示するためのファイルです。
のでここに書くのはindex.phpの範囲と同様です。そのため,index.phpをコピーしておいて修正をする。という手順が多いようです。
page.php
固定ページを表示するためのファイルです。
ここに書く範囲もindex.phpやsingle.phpと同様。似たような作りなので、single.phpをコピーして作成する手順が多いです。
残念ながら「WordPress Codex日本語版」のサイトには各ファイルのわかりやすい説明は見当たりません。とはいえ、多くの方が解説してくれているのでgoogleで検索してみて下さい。（本サイトでも徐々に解説していきますが）そんな無責任な！！って思うかもしれませんが、何だかんだ言って、WordPressやプログラミングなど学習するのにもっとも重要なサイトはgoogleです(笑)マジですよ。という事で載せておきますね。
Google
という訳でそれぞれのファイルを作っていくのですが、その工程はまた別に書いていきたいと思います。
本ブログのこの記事や他の記事にて、ここ分からんぞ！とか、ここ違くない？などあったらお問い合わせください(^o^)
このWordPressTip’sのコーナーでは以前Twitterにて投稿したもの、YouTubeにUPした動画の詳細として書いていきます。私なりのテーマ作成の流れを一通り書いていきますので、TwitterやYouTubeも見て下さいね。
ではまたお会いしましょう。
40代からの転職フリーランスKotaでした。
良かったら↓↓↓もみていってね！
YouTube
私のYouTubeチャンネルでは「ざっくりなWordPressテーマ自作の流れ」をUPしてありますので、順番に見てもらえたら流れが把握できるかなと思います。
Kotanote
ただし、自作テーマの手順や方法には絶対にこれ！といったものは無さそうです。ので、あくまでも私のやり方という事で参考になればと思います。
これじゃわからんよ！という方、ごもっともです。徐々にブログでの解説をアップしていきます。
なんでざっくりなのか？
説明やその他の部分の長い動画が多かったからです。完結に短く表せないだろうか？と思い作っています。（長時間の動画は作れませんでした笑）
YouTubeでざっくり把握し、その後ブログで詳細を把握する。そんな流れがわかりやすいのでは？と思っております。
良かったらチャンネル登録と高評価ボタンをお願いします。
Twitterもやっていますので良かったらフォロー下さい。
kota_lalala
余談
最近暑いっす。本当に危ないので熱中症は気をつけてくださいね。日の当たらないところにいてもなるみたいですよ熱中症は。自分も気をつけないと。って思っています。こまめに水分補給するよう心がけています。アチィ・・・適度な塩分もお忘れなく！
それと、パソコン！こいつも熱くなり易くなってませんか？すぐに熱くなって、おかげで自分も熱くなってる気も・・・
パソコンがあれば仕事が出来る！つまりパソコンが無いと仕事になりません。
自分とPCのクールダウン、ともに気をつけましょう。あとスマホもね。日の当たる所の置きっぱはアウト！熱で壊れてしまうので、ご注意を。
ではでは(^^)/
まとめ
- 最小で必要なファイルは「header.php」「index.php」「sidebar.php」「footer.php」「single.php」「page.php」「style.css」「fanctions.php」
- ファイルの拡張子は「.php」(cssは除く)
