Help us understand the problem. What is going on with this article?

VCCWで自作テーマを作るための準備

More than 1 year has passed since last update.

はじめに

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.phpstyle.cssです。
index.phpstyle.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)。
「外観」 -> 「テーマ」から確認すると自作テーマが表示されていることがわかります。

スクリーンショット 2017-11-08 2.43.37.png

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

スクリーンショット 2017-11-08 2.39.51.png

nishina555
Webデベロッパーです。現在は業務委託で仕事をしています。サーバーサイドがメイン。Rails/React/Redux/Node/GraphQL/AWS。大学院時代は自然言語処理の研究を行っていました。
https://nishinatoshiharu.com/
onecareer
ワンランク上のキャリアを目指す学生のための新卒採用サービスONE CAREERの開発・運営会社
https://www.onecareer.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした