ファイル構造を理解する

ホーム > WordPressの記事

WordPressのファイルはインストール時には1500ファイル以上あります
使わない機能や何が目的なのかよくわからないようなファイルもタップリ。

では、index.html(またはphp)ペラ一枚しかないホームページにWordPressを導入するとしたら、どんなファイルが必要になるでしょうか?

WordPress 大枠の基本構造

WordPressのファイル構造は以下のようになっています。

wp-admin・・管理画面に必要なファイル
wp-content・・コンテンツデータ
wp-includes・・重要な機能に関わるファイル

それと、この階層にはファイルがバラバラあります。

この中のwp-content以外のファイルは変更を加えたり、削除したり、追加しないでください。
例え、よくわかっている人だとしても、WordPressのアップデートがかかると、これらのファイルが上書きされてしまう場合が多いためです。

実際のホームページのデータは、wp-contentの中に格納します。
そのwp-contentの中を見てみましょう。

languages・・言語に関わる重要なファイル
plugins・・追加したプラグイン
themes・・ホームページデータ
index.php・・起動用ファイル

この中のthemesの中にファイルを格納します。
他のファイルは、とりあえず触らずに行きましょう。

themesの中を覗いてみます。

twentyfifteen・・テンプレート
twentyseventeen・・テンプレート
twentysixteen・・テンプレート
index.php・・起動用ファイル

なんとかteenとかいうフォルダが3つくらいあります。
このフォルダがホームページのレイアウトデザインを構成するファイルを格納する場所です。

既に、

twentyfifteenというデザイン
twentyseventeenというデザイン
twentysixteenというデザイン

の3つの実用的なデザインがインストールされていて、それこそ本当に5分でホームページが開設できます。

でも、今回の場合、自分のデザインを使いたいので、なんとかteenはいりません。フォルダごと消してしまってもかまいません。

デザインテンプレート追加

新しくデザインを追加する場合は、

twentyfifteen・・テンプレート
twentyseventeen・・テンプレート
twentysixteen・・テンプレート
mydesign・・新しく追加したデザイン
index.php・・起動用ファイル

このように新しくフォルダを作ります。

mydesignという名前である必要はありません。
このサイトの場合は、pikodonnoteにしていますので、

twentyfifteen・・テンプレート
twentyseventeen・・テンプレート
twentysixteen・・テンプレート
pikodonnote・・PikodonNoteのデザイン
index.php・・起動用ファイル

こんな感じにして、自分専用のテンプレートフォルダを作ります。

次に、最低限pikodonnoteの中にどんなファイルを入れれば良いのか?
ここは、みんなが一番知りたいところです。

検索すると、難しい解説サイトや、基本的な骨組みだけ!という配布データなどがあります。

一番のおススメは、twentyfifteenなどの、なんとかteenを参考に作ることですが、そもそも、今回の最初の目的は、index.htmlペラ一枚しかないホームページをWordPress化する事なので、余計な情報は混乱するだけです。

では、ズバリ、これだけ!という必要ファイルは、この3つです。

index.php・・これがindex.htmlの役割を果たしています
style.css・・CSSです
functions.php・・重要な機能が書かれています

functions.phpに関しては、内容は意味がわからなくても良いですが、ファイルそのものは大変重要なものなので、そのまま残しておいてください。

index.phpの中を全部消して、そこにあなたのサイトのindex.htmlの内容をそのまんまコピペしてください。

他に、このディレクトリには独自のフォルダを作って置いてもかまいません。
例えばそれは、

image
js
css
common

などと言ったものです。

元々あったindex.htmlペラから繋げていてる画像やらJavscriptなどを、このフォルダに入れて、そのままアップロードしておいても大丈夫です。WordPressを導入しても、元々静的サイトで使っていたデータをそのまま扱えます。

これで完成!

サーバにアップすれば、すぐに公開できます。

CSSなんか1行も使ってないから、style.cssもいらないんじゃないの?という疑問についてですが、このファイルだけは用意しておいてください。
style.cssの上3行には以下のような雛形でテンプレート名を記述します。

/*
Theme Name: 私のデザイン
*/

すると、WordPressの管理画面で「私のデザイン」を認識するようになります。

そもそも、index.html一枚しかないホームページにWordPressを導入する意味があるのかどうか?という疑問についてですが、確かにWordPressはブログ用CMSツールというキャッチコピーを売りにしているため、一般的なブログのような形になったものを作らないのであれば、意味がないのかもしれない。と思ってしまうところです。

でも、実際、WordPressは「ブログ」というよりも、優秀なデータベース管理ツールと言ったほうが正しいです。

大抵、ペラindexしかないような「大型サイト」は、その一枚の画面に、複雑なデータベースの情報をうまい具合にスタイリッシュに配置する事を求めています。

例えば、昔よくあったような、index.htmlしかなくて、そこから外部のswfを読み込んでいるだけの、Flashサイトとか、何かしらのAPI、例えば、地図だとか、音楽リストのようなものを表示するだけ。といったようなWebサイト。あるいはSNS系のサイトなど。

一般的な雛形通りではなく、パッと開いた瞬間に全ての情報を感覚的に伝えるようなサイトなどは、いちいちユーザーにページをめくらせるような仕組みになっておらず。大抵が、表示したそのフロントページに全ての情報が表示されていて、「更に表示」みたいなボタンを押して、むりむりと情報が現われていくような仕組みになっていたりします。

そんな時こそ、WordPressで膨大な情報の追加や編集を行って管理し、その情報をindex.phpでまとめて表示するような、偉大なるindexペラ1枚サイトを作る事ができます。

もし、ペラ一枚でも、バックエンドで膨大な情報を管理するサイトを構築した場合、どれくらいコストがかかるでしょうか? PHP制作、SQLのデータベース設計や構築。データベースの管理表をエクセルで作成しては更新して共有し、バグが出るたびに休日出勤。何かのアップデートがかかれば、対応。セキュリティも時代と共に強化が必要です。

でも、WordPressだったら、バックエンド側の面倒な開発の大部分を「WordPressのインストール」という項目だけで、解決できたりします。

ファイルには優先順位がある

WordPressのテンプレートファイルの構造に話を戻します。

さて、index.php、style.css、functions.phpの3つだけで動くWordPressですが、もし、これ以外のファイルが存在していたとしたら?WordPressはこう考えます。

「無いなら無いで構わないけど、あるんならそっちを優先的に読み込むよ」

そんなわけで「ファイルが無くてはいけない」と考えるのではなく、あったら便利だし、効率的になる。と思うのであれば、ファイルを追加すると考えても良いと思います。

まず、追加しておくと便利なものは、

screenshot.png

これは、サイズは特に決まってはいません。WordPressの管理画面で、このテンプレートを選択する時に表示される画像データとなります。管理画面で視覚的に「私のデザイン」のテンプレートがどれかを判別するためにも、作っておくと良いでしょう。

2ページ以上存在するならば、

header.php・・ページの上に付加されるもの
footer.php・・ページの下に付加されるもの

自分のサイトには、あのダサいヘッダーなんてものはないし、Copyrightなんて野暮ったいものは付けない主義なので必要ありません!というものではなく、htmlに必ず必要な上部と下部のタグを付加してくれます。

ヘッダーの内容としては、こんなようなものです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>私のホームページ</title>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/style.css" media="all">
</head>
<body>

そして、フッターの内容はこんなようなものです。

</body>
</html>

header.php と footer.php に関しては、ファイルさえ用意しておけば自動的に読み込んでもらえるものではなく、以下のようにPHPを記述して、挿入する場所を指定します。

<?php get_header(); ?>・・header.phpの内容を表示
<h1>私のホームページへようこそ</h1>
<p>もぞもぞもぞもぞもぞもぞもぞもぞ</p>
<?php get_footer(); ?>・・footer.phpの内容を表示

これをトップページとなるindex.phpにも記述し、その下層ページとなる。別のphpファイル全てに記述する事で、同じ上部と下部を表示する事ができます。

もし、ヘッダーやフッター以外にも、下層ページで使いまわしたい共通記述があるようでしたら、

sidebar.php

を用意すると良いです。

各ページテンプレート内に、

<?php get_sidebar(); ?>

と記述する事で、sidebar.phpの内容を表示する事ができます。
sidebarと書いてあるからといってブログでよく見るサイドバーである必要はありません。

共通バナーでも良いし、最新ニュースのようなものでも良いです。

このサイドバーは、このようにそれぞれ独自の機能を持たせる事もできます。

sidebar-news.php
sidebar-banner.php
sidebar-profile.php
sidebar-eventlist.php

そして、それぞれのsidebar-ファイルを選ぶ時は、以下のように-以降のファイル名の部分を指定します。

<?php get_sidebar('news'); ?>
<?php get_sidebar('banner'); ?>
<?php get_sidebar('profile'); ?>
<?php get_sidebar('eventlist'); ?>

もうsidebarって名前を使いたくもない場合は、

以下のような自由な名前のファイルを作って直接設置する事もできます。

myprofile.php
banner.php

そして読み込む場合は、以下のように指定します。

<?php get_template_part( 'myprofile' ); ?>
<?php get_template_part( 'banner' ); ?>

ただ、その場合、WordPressが何かの機能として認識する決められたファイル名は避ける必要があります。

下層ページを追加する


では、次に、下層ページを用意する時に必要になるphpファイルを解説していきます。

page.php・・固定ページ用テンプレート

管理画面から追加した固定ページで使うテンプレートはこのファイルです。
もしpage.phpがなければ、WordPressはindex.phpをテンプレートとして使います。

固定ページで作った下層ページを別のレイアウトデザインにしたければ、page.phpを用意してください。

下層ページに色んなタイプのレイアウトを用意したい場合。

page.php
page-profile.php
page-product.php
page-customer.php
page-download.php

といったようなファイルを用意して、全てのファイルの最初の5行を以下のようにテンプレート名を指定すれば、固定ページを追加した時に、テンプレートを選択できるようになります。

<?php
/*
Template Name: プロフィールページテンプレート
*/
?>

ファイル名はpage-である必要はありませんが、page-としておいたほうが、これが固定ページ用のテンプレートである事がわかりやすくなります。

次に、WordPressの醍醐味でもある。大量のデータをデータベースに投稿し、それを表示するためのページのテンプレートです。

single.php

という名前のファイル名にします。index.phpやpage.phpの内容をまんまコピペでも、ページそのものは動きます。

実は各phpファイルの内容は、指定された書き方はありません。page.phpだからこう書かなくてはならない。とか、single.phpだからこうしなきゃいけない。というルールはないです。あくまでも、WordPressが読み込む時に、存在していれば優先的に読み込む仕組みになっているだけで、全てのファイルについて、同じ内容のhtmlやらphpがコピペされていても問題ありません。

全く同じものをコピペするくらいなら、ファイルそのものを作らずに、なるべく少ないphpファイルで構成したほうが良いです。

この投稿の種類を複数に増やして、それを管理する事をWordPressは得意とします。
投稿の種類を増やす事をWordPressの用語で「カスタム投稿」と呼びます。

例えば、主催するイベントなどを管理する場合は、

single-event.php

例えば、こんなような投稿タイプを作ります。

トピックスやニュースなどであれば、

single-topics.php

沢山の商品をデータベースに登録し、その商品ページを表示したいのであれば、

single-product.php

こんな感じの投稿タイプを作っても良いですし、

データベースで管理している大量の投稿を取得してイベントカレンダーを作ったり、商品についてのプロモーションや管理ページなどを用意する事もできます。ただECサイトを作りたいのであれば、決算システムやら注文管理などが最初から備わっているECサイト専用のCMSを使ったほうが良いです。外国製から日本製のものまで、無料のものも沢山あります。

そういったデータベースに投稿されたものの、一覧ページを作りたい場合は、

archive-event.php
archive-topics.php
archive-product.php

このような名前でphpファイルを作成します。
archive-とついているファイル名は一覧ページと認識されます。

元々用意されている投稿タイプを一覧化する場合、

archive.php

このphpファイルを認識しますが。WordPress4.4からはそのままでは認識しないようになりました。(少し設定変更が必要になります)

本来、簡単にできるブログ作成用CMSというポジションを売り込んでいたWordPressとしては、あまり良い変更とは思えませんが、逆に優秀なデータベース管理用CMSと考えるならば、この流れは当然の事かと思います。

そもそもWordPressは、複数の投稿タイプを扱う事を考えた仕組みになっていて、これをsingle.phpとかarchive.phpといった単一の投稿タイプを想定したようなファイル構成は、自分でテンプレートを1から作り複雑な情報を管理するサイトを作る場合紛らわしく感じます。

最後に作ったほうが良いファイルは、

404.php

存在するページがなかった時は、このファイルが読み込まれて表示されます。

次はファイルごとの記述方法について説明します。