【WordPressでオリジナルサイトを作ろう】④ディレクトリ作成編

WordPressのディレクトリ構成

先ほど作成した「ブログサイト」をもとに、確認していきます。

WordPressのディレクトリは下記の場所です。

C:\Users\ユーザー名\Local Sites\blog\app\public

WordPressディレクトリの中身は下記の通りです。

    
public
 ├─wp-admin
 ├─wp-content
 │  ├─languages
 │  ├─plugins
 │  │
 │  ├─themes
 │  │  ├─twentynineteen
 │  │  ├─twentytwenty
 │  │  └─twentytwentyone
 │  │
 │  ├─upgrade
 │  └─uploads
 └─wp-includes
    
  

wp-admin
管理画面に関するファイルが入っているディレクトリ

wp-content
テーマやプラグイン、アップロード画像などのファイルが入っているディレクトリ

wp-includes
WordPressのシステムに関するファイルが入っているディレクトリ

「blog」ディレクトリの作成

WordPressのテーマは「themes」ディレクトリの中で管理されています。

オリジナルのテーマを作る場合は、「themes」ディレクトリの中に作ります。

初期状態では「twentynineteen」「twentytwenty」「twentytwentyone」の3つが用意されていますが、今回はオリジナルのテーマを作りたいのでこの中に「blog」という名前のディレクトリを新たに作ります。

C:\Usersユーザー名\Local Sites\blog\app\public\wp-content\themes\blog

これでオリジナルテーマ用のディレクトリ作成は完了です。

オリジナルテーマに必要な基本ファイルの作成

続いて、オリジナルテーマを作る際に必要な基本ファイルを作成していきます。

WordPressでオリジナルテーマを表示させるために最低限必要なファイルは下記の2つです。

• index.php
• style.css

この2つのファイルを、先ほど作成した「blog」ディレクトリの中に作ります。

C:\Usersユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\index.php
C:\Usersユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\style.css

次に、style.cssの中にテーマ名を記述します。
これもテーマを動かすためには必須です。

    style.css
    
@charset "UTF-8";
/*
Theme Name: blog
*/
    
  

以上でオリジナルテーマのディレクトリ作成と基本ファイルの作成は終了です。

オリジナルテーマの表示確認

オリジナルテーマが正しく表示されるか動作確認を行いましょう。

確認ために、index.phpの中に仮で下記の記述を行います。

    index.php
    
Hello World
    
  

続いて、WordPressの管理画面でテーマの変更を行います。

管理画面からログイン後、「外観」→「テーマ」をクリックします。

テーマの中に「blog」があるので、「有効化」をクリックします。

これで「blog」がテーマとして設定されました。
画面を表示してみましょう。

「blog」→「サイトを表示」をクリックします。

画面に「Hello World」と表示されたら、blogテーマが正しく設定されています。

確認できたらindex.phpのファイルを開いて、テスト用に記述した「Hello World」を消しておきましょう。