--- title: VCCWで自作テーマを作るための準備 tags: WordPress PHP Vagrant VirtualBox 初心者 author: nishina555 slide: false --- ## はじめに VCCWとはWordpressを仮想環境上に構築するためのツールです。VCCCWはVagrantを利用して仮想環境を構築するのですが、Vagrantfileで設定を記述すればホストOS(ローカル環境)とゲストOS(仮想環境)のファイルを同期することができます。 これはどういうことかというと、ローカル環境のファイルを修正すると仮想環境にssh接続することなしに即座に仮想環境上に存在する同期設定されたファイルにも同じ修正が加わるということです。 VCCWではホストOSとゲストOSのファイル同期の設定がすでにデフォルトでされているため、ローカルのファイルをいじることが仮想環境上のファイルをいじることに直結します。ですので、sshで接続する仮想環境においてもFTPやgitなどを利用することなく直接ファイル編集をすることができます。 今回はこの同期機能を活用した、自作テーマを作成するための準備について説明します。今回は自作テーマでHelloWorldがWordPress上に表示できることをゴールにします。 ## 自作テーマ作成準備手順 vccwをインストールしたディレクトリに移動します。 vccwのディレクトリに移動するとwordpressというディレクトリがあるのがあるのですが、このwordpressディレクトリが仮想環境の/var/www/htmlと同期されています。 ```bash $ cd /path/to/vccw ``` wordpressのテーマディレクトリに移動します。 ```bash $ cd /path/to/vccw/wordpress/wp-content/themes ``` ここに新しくディレクトリを作成します。このディレクトリに自作テーマを作成していきます。 ```bash $ mkdir sample ``` 自作テーマをwordpress上で使えるようにするために最低限必要なものが`index.php`と`style.css`です。 `index.php`と`style.css`を先ほど作成したディレクトリの下に作成します。 ```index.php Sample

HelloWorld

``` style.cssは空でも問題ないですが、テーマの情報を表示させたい場合はコメントを追加することでWordPressから確認できるようになります。 色々と記述できる情報はあるのですが、以下のような内容が含まれていれば十分だと思います。 ```style.css /* Theme Name: SampleTheme Description: サンプルテーマ Author: SampleUser Author URI: http://●●●.com Version: 1.0 */ ``` 実際に仮想環境上にもディレクトリとファイルができていることを確認してみます。 ```bash $ 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)。 「外観」 -> 「テーマ」から確認すると自作テーマが表示されていることがわかります。 ![スクリーンショット 2017-11-08 2.43.37.png](https://qiita-image-store.s3.amazonaws.com/0/140792/4e63a4ad-72ef-a998-bab4-03fb9a6d5445.png) 自作テーマを有効化して、トップ画面が以下のように表示されていればOKです。 ![スクリーンショット 2017-11-08 2.39.51.png](https://qiita-image-store.s3.amazonaws.com/0/140792/fe7ec215-01be-574f-7240-bfe5b2a3b09d.png)