オリジナルテーマ作成時、最低限必要なPHPファイルと格納場所(パス)

最終更新日:  |  web関連, WordPressカスタマイズ, 記事一覧

今回はテーマ作成時の必要ファイルというテーマですが、それ以前の問題から説明しましょう
初めて自作する場合に気になるのは「格納場所」ですよね。
WordPressを自身で色々イジくる場合に必要な主な階層を先に説明。
まず、ダウンロードした場合は全てまとまった「wp」というフォルダに格納されてます。
その中で、テーマを新規で入れるには
「wpフォルダ」の中の「wp-contentフォルダ」の中の「themesフォルダ」の中に作成したテーマ用のフォルダを用意します。
(例)私の場合

一番最上位にホームページのディレクトリがあります。
その傘下に下記のものが設置されていきます。
場合によっては1階層目のwpを省いてwp-contentやwp-adminなどのwpフォルダの中身を直置きする方もいらっしゃるかと思います。
今回は、ワードプレスをインストールしたままの状態でアップロードしているという条件で説明していきます。

1階層目
wp(フォルダ)
– wp-content(フォルダ)
– –  themes(フォルダ)
– – – kurobuta(フォルダ)
– – – – index.php
– – – – style.css
– – – – functions.php
– – – – single.php
– – – – common(フォルダ)
– – – – – css(フォルダ)
– – – – – – common.css
– – – – – – reset.css
– – – – – js(フォルダ)
– – – – – – main.js
– – – – – sass/scss(フォルダ)
– – – – – img(フォルダ)




となっています。
1階層目のwpフォルダの補足
※wpというフォルダ名からわかりやすいフォルダ名に変更するのをお勧めします。
2階層目は
wp-contentやwp-adminなどのフォルダで構成されています。
テーマを置くのはwp-contentの中にある3階層目のthemesというフォルダの中に設置します。
あとは独自のテーマフォルダの中に、自身で作るテーマの中身を設置していきます。
今回は必須となるファイルと、あると便利なファイルを説明していきます。


さて、ここから本題に入っていきます。
箇条書きしていきたいと思います。
とりあえず必須のファイル
1.まずは当然ながらThemaフォルダ直下に置くおリジナルテーマのフォルダ(名前はアルファベット表記で好きな名前なんでもOK)
2.直下に必ず置くファイル
・index.php
・style.css(テーマの詳細を記載したもの。スタイルは記述しなくてもOK※これについては後ほど記述します)
・functions.php

とりあえずコレだけ準備すればトップページは作れます。
・・・・が、ワードプレスはシングルページや固定ページ、カテゴリーページなどで構成されているので、それらを活用するためにも、これらを出力する為のファイルが必要です。
ですので、下記ファイルも必須になります。

用意するファイル
・archive.php
・category.php
・page.php
・single.php
・404.php

以上の5つは必要かと思います。
さらに、記事検索機能も基本はつけるかと思いますのでその出力先となる
・search.php
も必要ですね。

それから、管理画面でテーマを選ぶ際に目印となる
・screenshot.png
も必要ですね。

また、ページによって呼び出すファイルが変わってきますが、せっかくphpを使っているので共通の部分は動的に読み込みたい。
あると便利・・・というか、用意しといた方が絶対に良い共通ファイル
・head.php
・header.php
・footer.php
サイドバーをつける場合は
・aside.php

このくらいあれば、とりあえずは困らなくなるかと思います。

別ファイル(phpファイル)を呼び出すときは
<?php require “○○○.php”;?>
または
<?php  require (dirname(__FILE__) . “○○○.php”);?>
です。

cssやjsも複数用意する場合がでてきますので、直下にはそれらを格納するcommonフォルダもあると便利です。
commonフォルダにはそれぞれcssフォルダ、jsフォルダ、imgフォルダなど用意すると良いかと思います。

 

↑で書きましたがこれから最も重要なstyle.cssに関して書きたいと思います。
これをしっかりやらないと、テーマ自体使えなくなるんで間違えないように。
とりあえず、私のstyle.cssの内容

/*
Theme Name: kurobuta_original
Theme URI: http://blackpigtail.com
Author: 黒ブタ
Author URI: http://blackpigtail.com
Description: WEBデザイナー黒ブタの気まぐれブログ
Version: 1.0
*/

必須項目は
・Theme Name
・Author
・Description

Theme Nameはテーマの名前
Authorは作成者の名前
Descriptionはテーマの説明文です。