お世話になっております。
ノベルティの山本です。
今回は、もう既に化石扱いされてしまっている技術だとは思いますがGulpとXAMPPを使ったワードプレスのローカル開発環境の作り方について紹介したいと思います。
Windowsを使用していて、コマンドプロンプトを使用することに抵抗がなく、テキストエディタはVisual Codeを使用しているという方にお勧めの記事となっております。
この記事では、まずNode.jsをダウンロードするところから始めて、次にXAMPPをインストール、最後にGulpの設定を行うところまでを説明したいと思います。
山本が使用しているGulpの設定コードも記述するためコピペするだけで、実際に動かせるところまで行っていきます。
読み飛ばしていい雑談
CMSを組み込んだサイト制作を行うと考えると、ワードプレス以外にもたくさん選択肢があると思うのですが
お客様がご自身で更新できる必要がある場合はワードプレス一択になるかと思います。
本当は、Reactのgatsbyなど最近のトレンドをキャッチアップしてサイト制作をしたいのですが、実務には向いていない技術だなって思ってしまいます。
でもSEO的にも効率的にもそっちの方がいいと思うので、情報は押さえておきたい。
念のため、Gulpことタスクランナーを使用することに対するメリットを書いておきたいと思います。
まず、SASSでコードをかけるようになるので、CSSをモジュール化できるのでテンプレート作成が速くなります。
また、ベンダープレフィックスも自動で付与してくれるので、コーディング自体も早くなるのでお勧めです。
jsファイルもCSS同様にモジュール化できるので作業がテンプレート作成が楽になります。
あとは、CSS、JSともにファイルをコンパイルしてくれるのでおしゃれになるのと、ファイルが一つになるので呼び出しが減ってブラウザにやさしい感じになります。
おまけですが、画像ファイルも圧縮できたりします。（あんまり使ったことがないです）いつもパンダに頼っています。
Node.jsのインストール方法
Node.jsと言っていますが、ダウンロードするのはnodistはNode.jsのバージョン管理を行ってくれるものです。
Node.jsのバージョン管理はしたことがないですが、nodistにはもともとNode.jsも内包されているのでセオリーに乗っ取ってnodistをダウンロードします。
こちらから最新版のNodist set up -v ???.exeをダウンロードします。（一番上にあるファイルです）
ダウンロードが完了したら、フォルダにアクセスしてファイルを開いてインストールを開始します。
すべてYESと答えておけば大丈夫ですが、インストール先のフォルダは、半角スペースが入っていないフォルダを選んでおいた方がいいです。（半角スペースが入っているとコマンドプロンプトで操作するときに読み込めなくなったりするっぽい）
インストールが終わったら、コマンドプロンプトを立ち上げて、下記をそれぞれ打ち込んでバージョンが表示されたら無事にインストールが完了しています。
nodist -v node -v
XAMPPのインストール方法、MySQLの設定
こちらにアクセスして、一番上にあるWindows版XAMPPのセットアップファイルをダウンロードしてください。
XAMPPこそすべてYEAと答えてインストールしておけば大丈夫です。
インストールが終わったら、実際に起動してみて、一番上と二番目にあるApacheとMySQLそれぞれのStartボタンを押してあげます。そのほかの機能は使いません。
Startボタンを押したことでサーバーとデータベースがそれぞれ起動します。
次にMySQLのAdminボタンを押してMySQLの設定を行っていきます。
Adminを押すとブラウザの新しいタブにMySQLが開かれると思います。このままではセキュリティ的に問題があるそうなのでユーザー認証をさせるように設定します。
一度、XAMPPのコントロールパネルに戻って右側にあるShellボタンをクリックしてシェルを起動させます。
シェルが起動したら下記コードをそれぞれ叩いて設定を行います。
cd mysql\bin
mysql -u root
set password=password('あなたのパスワード');
あなたのパスワードの箇所に半角英数字で任意のパスワードを打ち込んでEnterを押します。
このパスワードは、MySQLにログインする際に使用します。
ここまで済んだらシェルはもう用済みなので閉じてください。
次にMySQLの設定ファイルをテキストエディターで開いて修正します。
設定ファイルのパスは下記のとおりです。
xampp/phpMyAdmin/config.inc.php
config.inc.phpファイルの19行目と20行目をそれぞれ修正します。
configをcookieに変えてuserのrootを消します。
$cfg['Servers'][$i]['auth_type'] = 'cookie'; $cfg['Servers'][$i]['user'] = '';
保存をしたら、テキストエディタはもう用済みです。
再びXAMPPのコントロールパネルに戻ってMySQLのAdminボタンを押します。
ユーザー認証画面が現れれば設定完了です。エラーが表示された場合は再起動してみてください。
ユーザーはrootで、パスワードは先程入力した任意のパスワードになります。
問題がなければMySQLにログインできるはずです。
MySQLにアクセスしたら、ワードプレスをインストールするデータベースを作成してください。
名前は、wpとかでいいと思います。
WordPressをXAMPPにアップロード
wordpressの最新版をこちらからダウンロードしてそのファイルをxampp/htdocsのフォルダーにアップロードします。（ZIPから展開した状態で）
アップロードが終わったら、XAMPPのコントロールパネルを確認して、ApacheとMySQLが起動していることを確認してください。
起動している状態でhttp://localhost/wordpress/(wordpressの箇所はhtdocs以下のファイル名)にアクセスするとワードプレスのインストール画面が表示されます。
ここでは、インストール作業は行わずに行ったんXAMPPを使った作業はいったん中断します。
次は、Node.jsを使ってGulpのダウンロードと設定を行います。
Gulpのダウンロードの方法
まずはコマンドプロンプトを起動してください。
起動したら下記をそれぞれ叩いて、gulpをダウンロードします。初心者なので、どこでもコードをたたけるようにグローバルにダウンロードします。
npm install -g yarn yarn add -g gulp
ダウンロードが終わったらプロジェクトフォルダに移動しましょう。
E:/projects/wordpress/とかでいいと思います。
コマンドプロンプトでプロジェクトフォルダまで移動して、下記コードをたたきます。
npm init -y
そうすることで、パッケージを管理するためのpackage.jsonファイルが作成されます。
まだ中身はほとんど空っぽな状態です。ここのファイル内に使用したいフレームワークやライブラリを追加していきます。
package.jsonの作成まで完了したらフォルダ内にgulpfile.jsファイルを作成して設定内容を書いていきます。
内容は下記のコードをコピペしてください。
const gulp = require('gulp'),
sass = require('gulp-sass'),
compass = require('gulp-compass'),
cleanCSS = require('gulp-clean-css'),
connect = require('gulp-connect-php'),
browserSync = require('browser-sync'),
server = browserSync.create(),
plumber = require('gulp-plumber'),
autoprefixer = require('gulp-autoprefixer'),
changed = require('gulp-changed'),
notify = require('gulp-notify'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
mozjpeg = require('imagemin-mozjpeg'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps'),
babel = require('gulp-babel');
const Name = 'テーマファイルの名前',
develop = {
'root': './wordpress/wp-content/themes/' + Name + '/src/'
},
release = {
'root': './wordpress/wp-content/themes/' + Name + '/',
'style': './wordpress/wp-content/themes/' + Name + '/css/',
'script': './wordpress/wp-content/themes/' + Name + '/js/',
'images': './wordpress/wp-content/themes/' + Name + '/images/'
};
gulp.task('reload', (done) => {
browserSync.reload();
done();
});
gulp.task('watch', () => {
gulp.watch(develop.root + 'style.css', gulp.series('style', 'reload'));
gulp.watch(develop.root + 'assets/styles/*.scss', gulp.series('styles', 'reload'));
gulp.watch(develop.root + 'assets/styles/**/*.scss', gulp.series('styles', 'reload'));
gulp.watch(release.root + '*.php', gulp.series('reload'));
gulp.watch(develop.root + 'assets/scripts/*.js', gulp.series('scripts', 'reload'));
});
gulp.task('connect-sync', (done) => {
connect.server({
port: 3000,
bin: 'G:/program/XAMPP/php/php.exe',
ini: 'G:/program/XAMPP/php/php.ini',
},
function() {
browserSync({
proxy: 'localhost:3000/wordpress/'
});
});
done();
});
gulp.task('images', function() {
return gulp.src([
develop.root + 'assets/images/*.+(jpg|jpeg|png|gif)',
develop.root + 'assets/images/**/*.+(jpg|jpeg|png|gif)'
])
.pipe(changed(release.root))
.pipe(
imagemin([
pngquant({
quality: [.7, .85],
speed: 1,
floyd: 0
}),
mozjpeg({
quality: 85,
progressive: true
})
])
)
.pipe(gulp.dest(release.images))
.pipe(notify('🍣 images task finished 🍣'))
});
gulp.task('scripts', function() {
var scripts = develop.root + 'assets/scripts/*.js';
return gulp.src(scripts)
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(plumber())
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest(release.script));
});
gulp.task('compress', function() {
return gulp.src(release.script + '*.js')
.pipe(uglify())
.pipe(gulp.dest(release.script));
});
gulp.task('style', () => {
return gulp.src(develop.root + 'style.css')
.pipe(plumber({
errorHandler: function (err) {
console.log(err.messageFormatted);
this.emit('end');
}
}))
.pipe(sourcemaps.init())
.pipe(compass({
config_file: 'config.rb',
sass: 'sass',
css: 'css'
})
.on('error', sass.logError))
.pipe(gulp.dest(release.root));
});
gulp.task('styles', () => {
return gulp.src([
develop.root + 'assets/styles/*.scss',
develop.root + 'assets/styles/**/*.scss'
])
.pipe(plumber({
errorHandler: function (err) {
console.log(err.messageFormatted);
this.emit('end');
}
}))
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded'
})
.on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
cascade: false
}))
.pipe(cleanCSS())
.pipe(gulp.dest(release.style));
});
gulp.task('phps', () => {
return gulp.src(develop.loot + '*/.php')
.pipe(gulp.dest(release.root));
})
gulp.task('dev', gulp.series('connect-sync', 'watch'));
ファイルに設定を記述出来たらコマンドプロンプトで、コードをたたいて設定ファイルで使用しているライブラリを一斉にダウンロードします。
npm install
ダウンロードがし終わったら、最後に先程xampp/htdocsに移動したwordpressのファイルの中身を丸ごとそのままprojectsファイルのwordpressフォルダ以下にコピーします。
ここまでくればほとんど終了です。
最後にgulpの設定ファイル内のパスと実際のあなたが使用している設定ファイルのパスが間違っていないか確認してください。
テーマファイルの名前の箇所には、ひとまずデフォルトのテーマ名を書き込むのがいいと思います。
ローカルでWordpressを動かす
Visual stadio codeを起動して、gulpfile.jsに記述したテーマファイルを開いてください。
Ctrl + Shift + @ でターミナルが起動します。もしくは上にあるTerminalからNew Terminalを押してください。
VS Code内に起動したターミナルに下記コードをたたくとサーバーが起動してlocalhost:3000/wordpress/が開かれます。
yarn gulp dev
そうしたら、先程途中でやめたwordpressの設定を再開します。
データベース名は、先程MySQLで作成したデータベース名を入力してください。
ユーザー名は、root、パスワードは先程のパスワードを入力してください。
そのほかの項目を入力し終わったら、ワードプレスのインストールを開始してください。
エラーが表示された場合は、たいていユーザーがデータベースの編集権限がないことが原因だと思うのでMySQL Adminに戻ってroot、もしくは新しく作成したユーザーにワードプレスをインストールするデータベースの編集権限を付与してください。
問題なくページ遷移しましたら、通常通りのワードプレスの設定を行ってください。
お疲れさまでした、これで開発環境の構築は完了しました。
あとは、開発環境のディレクトリ構造を把握したら快適なコーディングライフが訪れると思います。
新しくテーマを編集する際に、テーマ名を決めてthemes以下にフォルダを作成してsrc/assets/以下にstylesとscriptsフォルダを作ってその中に部品を作っていくイメージです。
cssに関しては、styles直下にstyle.scssを作成して、インポートしたいscssファイルを@import ‘./?????/_?????.scss’;で増やしていけば大丈夫です。
jsに関しては、勝手にコンパイルされるので気にしなくて大丈夫です。
srcフォルダいがいの箇所に関しては、通常のワードプレスのテーマファイルと同じ内容になっています。
