VCCWで自作テーマを作るための準備 #初心者

はじめに

VCCWとはWordpressを仮想環境上に構築するためのツールです。VCCCWはVagrantを利用して仮想環境を構築するのですが、Vagrantfileで設定を記述すればホストOS(ローカル環境)とゲストOS(仮想環境)のファイルを同期することができます。
これはどういうことかというと、ローカル環境のファイルを修正すると仮想環境にssh接続することなしに即座に仮想環境上に存在する同期設定されたファイルにも同じ修正が加わるということです。
VCCWではホストOSとゲストOSのファイル同期の設定がすでにデフォルトでされているため、ローカルのファイルをいじることが仮想環境上のファイルをいじることに直結します。ですので、sshで接続する仮想環境においてもFTPやgitなどを利用することなく直接ファイル編集をすることができます。

今回はこの同期機能を活用した、自作テーマを作成するための準備について説明します。今回は自作テーマでHelloWorldがWordPress上に表示できることをゴールにします。

自作テーマ作成準備手順

vccwをインストールしたディレクトリに移動します。
vccwのディレクトリに移動するとwordpressというディレクトリがあるのがあるのですが、このwordpressディレクトリが仮想環境の/var/www/htmlと同期されています。

$ cd /path/to/vccw

wordpressのテーマディレクトリに移動します。

$ cd /path/to/vccw/wordpress/wp-content/themes

ここに新しくディレクトリを作成します。このディレクトリに自作テーマを作成していきます。

$ mkdir sample

自作テーマをwordpress上で使えるようにするために最低限必要なものがindex.phpとstyle.cssです。
index.phpとstyle.cssを先ほど作成したディレクトリの下に作成します。

index.php

<html lang="ja">
  <head>
    <title>Sample</title>
  </head>
  <body>
     <h1>
        HelloWorld
     </h1>
  </body>
</html>

style.cssは空でも問題ないですが、テーマの情報を表示させたい場合はコメントを追加することでWordPressから確認できるようになります。
色々と記述できる情報はあるのですが、以下のような内容が含まれていれば十分だと思います。

style.css

/*
Theme Name: SampleTheme
Description: サンプルテーマ
Author: SampleUser
Author URI: http://●●●.com
Version: 1.0
*/

実際に仮想環境上にもディレクトリとファイルができていることを確認してみます。

$ cd /path/to/vvcw
$ vagrant ssh
$ cd /var/www/html/wp-content/themes/sample
$ ls
index.php  style.css

次に、http://vccw.test/ もしくは http://192.168.33.10/ にアクセスをして管理画面にログインします(デフォルトはユーザ名・パスワード共にadmin)。
「外観」 -> 「テーマ」から確認すると自作テーマが表示されていることがわかります。

自作テーマを有効化して、トップ画面が以下のように表示されていればOKです。