ファイル構造はどうなっているのか?

ワードプレスは動的にHTMLを生成しブラウザ上に表示する

これを理解しておくことで、ちょっとした編集が可能となったり。トラブル時の助けとなることは間違いない。

 htmlとCSSを書いてサイトやブログを作る場合、直接ブラウザにそのファイルを読み込む。これを静的なHTMLと言う。

 それに対しWordPressでは、日々入力された記事や画像などはデータをWordPress内のデータベースとして蓄積しそれをプログラムが読み込み、HTMLを生成する。これを動的HTMLと呼んでいる。

では、まず、ローカル環境を使ってインストールされたファイルの中身を見てみる。

ローカル環境を構築していない人は以下を参考にして構築してみてください。(手順は簡単で1時間も有ればできます。)

WordPress用ローカル開発環境を作ってみる

localの図

「Local by Flywheel」上図の矢印からapp>public>とフォルダを開くと下図となる

 

  • まず最初にあるフォルダ「wp-admin」管理画面一覧で使用するPHPファイルなどが格納されていて管理画面のレイアウトに関するデータも入っている。
  • 「wp-includes」WordPress自体が動くための基本となるプログラム、ライブラリなどが格納されている。

「wp-admin」「wp-includes」この二つのフォルダ内のものは通常触らないし、バックアップの必要もない。

「wp-content」このフォルダの中には以下の様なフォルダがある。

  • 「themes」テーマが入っているフォルダ
  • 「languages」日本語環境に必要なファイル
  • 「plugins」 インストールしたプラグインが入っている。
  • 「uploads」内部に「日付フォルダ(年別)」>「日付フォルダ(月別)」>画像ファイルとなっており
    WordPressダッシュボードのメディアからアップロードした画像ファイルが入っている。

通常テーマをカスタマイズや修正する場合、これをバックアップしておけば、何かと役に立つ。

フォルダ外ににある「wp-config.php」と言うファイルはインストールした時の方法が記述されている。

WordPressではファイル名が決まっているものがある。

代表的な物として、メインのスタイルシートの場合は「style.css」という名前に決まっている。

このファイルはテーマフォルダ内に必須のもので例えば次のような記述がされている。(内容は省略してある)

Theme Name: Twenty Seventeen
Author: the WordPress team
Description: Twenty Seventeen brings your site to life with header video and immersive featured images.

そして、この記述はテーマ蘭に下記の様な形で表示される。

WordPressテーマのイメージ

テーマファイルの優先順位
通常HTMLで記述したサイトの場合、index.htmlが真っ先に読み込まれるため、index.phpの優先順位が高そうだが、WordPressでは別な順位付けがある。

読み込むファイルの優先順位

  1. front.php
  2. home.php
  3. index.php

1が無ければ、2,2も無ければ3の順に読み込まれる。

したがって、1か2が有ればindex.php」の内容を修正しても表示に反映されない。

次にローカルから下図ADMINERをクリックしてデータベースを開き投稿記事がどうなっているのか、覗いてみる。

localの図

phpMyAdminが一般的だが、「Local by Flywheel」ではデータベースの管理ツールとしてAdminer4.2.6-devというソフトを使っている。

adminerの図

wp_postをクリックして、次にSelect  dataを開くと下図。

ここでは、投稿された記事がズラリと並んでいる。横するロールで内容を見ることができる。

adminerの図

記事の投稿数よりもはるかに多いのは、WordPressで投稿したときに表示されるリビジョンの記事を含んでいるせいだ。リビジョンは修正する度に増えるため、実際にWordPressのサイト上に表示されるものよりも多い数の記事がデータベース上で管理されているのが分かる。

WordPressリビジョンは画面

このリビジョンは下図のようにバーで選択して復元することもできるため、サイトの修正時に役立つこともある。

WordPressリビジョン画面

以上、WordPressのファイルの役割の基礎について簡単に解説してみました。

「Local by Flywheel」はこういった学習にも役立つのでとてもありがたい。