WordPressのテーマは無料、有料含めて様々なテーマが用意されています。
デザインにこだわりが無ければ、公開されたテーマを利用することが最も手軽で良い方法なのですが、独自のテーマを作成する必要がある場合も多いでしょう。
今回ご依頼があり、Wordpressでオリジナルテーマを作成する必要があったので、その開発環境構築までの手順をご紹介します。
＊node.jsがインストールされていることが前提です
WordPressのオリジナルテーマを開発する上で必要なもの
WordPressのテーマを作成するには、いくつか必要なものがあります。
最低必要になるものが
- style.css
- index.php
の２つです。
実際にテーマを作る上ではもっと必要なものが出てきますが、最低限上記２つがあればWordpressでテーマとして認識してもらえます。
WordPressオリジナルテーマの作り方については、こちらのサイトが秀逸で大変参考になります。
フロントエンジニアに染まった開発環境へ
いまどきのWeb開発環境は混沌としています。色々な技術が組み合わさって、ついていくのがやっとです。
しかし人間、一度便利なソフトを覚えてしまうと、なかなか元の開発環境には戻れないんです。
cssではなくsass（またはscss）が使いたいし、npm installで便利なjavascriptライブラリを引っ張って来たいんです。
wordpressのテーマ作成時にも、もちろんsassやらgulpやらを使えれば便利です。
でもこの場合の環境構築がよくわからなかったのです。
AngularやVueはcliが優秀すぎて、コマンド１つで全ての環境を用意してくれるので、個別の設定方法がよくわかっていなかったためです。
備忘録として環境構築までの流れをここに書いておきます
何はともあれnpm
最近yarnというものも賑わっていますが未だにnpm使ってます。
wordpressにて、テーマを作成するには、
wp-content/themes/の中にフォルダを１こ作る必要があります。
ここではmythemeという名前にします
ターミナルでmythemeフォルダまで移動して、以下のコマンドを入力します
npm init -y
するとpackage.jsonファイルが自動で作成されます。
Sassを使うまで
sass/scssを使えば、cssよりも便利に開発ができます。しかしsass/scssはそのままではブラウザが読み込むことができないので、sass/scssで書いたコードをcssへ変換する作業が必要になります。
sass＞cssへの変換を毎回手動で行うのは現実的ではありません。この処理は全てコンピュータに任せるべきです。
幸い、変更を検知して自動でscss＞cssに変換してくれる仕組みが用意されています。
ここでは、gulpを使って変換をする方法をご紹介します
なお、これ以降SASSではなくSCSSを前提に準備していきます。基本的にやり方は変わりません。
gulpをインストール
gulpはタスクランナーと呼ばれていて、面倒な作業を自動化してくれます。
npm install gulp --save-dev
と入力すると、gulpがインストールされます。
{
"name": "mytheme",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1"
}
}
gulpで使用するsass関連もインストールします
gulp単体では、sassを扱えないので、gulp-sassをインストールします
npm install gulp-sass --save-dev
ベンダープレフィックス関連も一緒に入れておきましょう
npm install gulp-autoprefixer --save-dev
最後にエラー回避対策も入れます。plumberが無い場合、sassでコンパイルエラーが発生するとgulpが落ちてしまいます。
plumberを入れることで、コンパイルエラーが発生しても落ちなくなりますので、タイプミスが多い私にとっては必須です。
npm install gulp-plumber --save-dev
package.jsonの中で、”scripts”:{ } の中に
"gulp": "gulp"
を追加します。
package.jsonの中身
さて、ここまで作業をすると、package.jsonの中身はこんな感じになると思います
{
"name": "mytheme",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"gulp": "gulp"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-plumber": "^1.1.0",
"gulp-sass": "^3.1.0"
}
}
“devDependencies”の中は自動的に追加されているはずです。
“gulp”:”gulp”は手動で追加します。１行上の末尾に , をつけ忘れないように。
gulpの設定ファイルを作成
gulpはタスクランナーですが、どのファイルを監視して、どんな処理をするのかといった設定は自分で作成しなければなりません。
package.jsonと同じ階層に、gulpfile.jsを作ります。
その中に、以下のコードをコピペします
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
gulp.task('convertToCss', function() {
gulp.src('./src/scss/style.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('./'));
});
gulp.task('default', function() {
gulp.watch('./src/scss/**/*.scss',['convertToCss']);
});
簡単に解説していきますと、
gulp.task('default', function() {
gulp.watch('./src/scss/**/*.scss',['sass']);
});
ここで、監視するフォルダを設定しています。gulp.jsからみて、 ./src/scss/以下にある、 拡張子が.scssのファイルを監視しています。
（そのため、テーマフォルダ内に srcフォルダと、scrフォルダ内にscssフォルダを作っておいてください。そしてその中にstyle.scssファイルを作っておきます）
文字では伝わりにくいので、以下の図を参照して下さい
ディレクトリ構造はこんな具合になります。style.cssはこの時点でまだ存在しません
監視対象に変化があった場合、convertToCssというタスク（下参照）が呼ばれます。
gulp.task('convertToCss', function() {
gulp.src('./src/scss/style.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest('./'));
});
convertToCssは./src/scss/style.scssファイルをエントリポイントとして、cssへ変換します。出力先はプロジェクトフォルダ直下で、ファイル名はstyle.cssになります。（エントリポイントのファイルと同じ）
pipeの順に処理がされていくイメージです。
（plumberでエラー回避 ＞ Sassコンパイル ＞ プレフィックスつける ＞ 出力先 ）
gulpを動かす
長い準備作業もここまでです。お疲れ様でした。
ではgulpを動かして見ましょう。ターミナルから gulp と入力します
このように表示されれば成功です。gulpが監視をしてくれています
では、実際にscssからcssに変換されるか確認します
src/scss/style.scssを開いて
.myClass{
color:red;
}
と入力して保存します。
すると自動的にstyle.cssがテーマフォルダ直下に作られます。
.myClass {
color: red; }
うまくできない方はこれまでの設定をよく確認してみましょう。
PCを再起動するだけで正常に動いてしまうこともあります。どうしてもだめなら再起動してみましょう。
WordPressに適合するようにSCSSを書き換える
さて、Wordpressにおいて、style.cssファイルは必須です。そしてstyle.cssの先頭に以下の情報を書く必要があります。
（先頭じゃなくても大丈夫でしたが、一般的には先頭に書きます）
/* Theme Name: テーマの名前 Description: テーマの説明 Theme URI: Author: Author URI: Version: 1.0.0 License: License URI: */
この情報をscssに書いておけば、cssに変換されるときにちゃんとstyle.cssにも反映してくれます。
しかし、scssはファイルを分割できるので、このような部品は分けて書いておくと後々楽です
SCSSファイルを分割して管理しやすくしよう
CSSは１個のファイルに全部記述すると、見通しが悪くなります。よって、上記のテーマに関する説明は、別ファイルに分けてしまいましょう。
src/scss/wp.scss というファイルを作り、上記の内容をペーストします。
/* Theme Name: テーマの名前 Description: テーマの説明 Theme URI: Author: Author URI: Version: 1.0.0 License: License URI: */ @charset "UTF-8";
そして、エントリポイントである src/scss/style.scssには、wp.scssを読み込むように記述していきます。
@import "wp.scss";
人によりやり方は色々ですが、私はstyle.scssには取り込む処理だけを書いて、各ファイルにスタイルを書くようにしています。
お疲れ様でした
以上で設定が完了します。
Sassは変数が使えたり、入れ子構造を使えたりと、従来のCSSより遥かに便利です。
しかし環境を整えるのが少し分かりにくいので、それだけが欠点ですね。
なお、Worpdressのテーマを本番環境に移行するときは、src以下のデータは全て不要です。もちろん、gulp.jsやpackage.jsonも不要です。(style.cssは必要です）
このあたりは、開発中にのみ利用するのであって、wordpressのテーマには本来必要無いものだからです。
