7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Gulpを使ってwordpressのテーマを作成

Posted at

MAMPでwordpress環境を作り、gulpを使いテーマを作る環境を作ることにする。

#用意するもの
タスクランナー(gulp)
wordpress環境(MAMP)

wordpressを構築

MAMPをインストールして、ローカルサーバーの設定(ルート)と
データベース作成する。
スクリーンショット 2019-07-06 0.51.03.png

ルートに設定したディレクトリにwpのファイルを格納
スクリーンショット 2019-07-06 0.55.58.png

ルートのパスを叩くとwordpressのインスールをするためのデータベース設定あるので
データベース名,port,host,password,メールアドレス等を入れていきます。
スクリーンショット 2019-07-06 1.16.50.png
スクリーンショット 2019-07-06 1.13.40.png

データベースの設定が終わるとwordpressがインストールされます。無事にインストールされたら設定にいき、アドレスをメモしておきます。
スクリーンショット 2019-07-06 1.16.34.png

タスクランナーの設定

タスクランナーはテーマディレクトリで動かします。
node.js gulpのインストールは割愛します。
スクリーンショット 2019-07-06 1.50.34.png

必要なプラグインはプロキシの設定ができるローカルサーバーです。その結果browserSyncを選びました。
$ npm i -D browser-sync

gulpのタスクを書きます。htmlなど静的なファイルはoptionの設定でserverを選び制作するらしいですが、
それだとphpは更新されないためoptionではserverではなくproxyで設定するようです。
スクリーンショット 2019-07-06 1.35.33.png
タスクを実行するとローカルサーバーが立ち上がり、proxyで設定したwordpressが表示されます。

個人的に、このほかにsassやjavascriptのためのタスクを入れ、watchタスクで監視しています。そして、cssやphpなどテーマファイルに更新があればbrowserSyncリロードのタスクが発動します。

プロキシで設定するだけなんですね、、、どんだけ〜 ってくらいここまでくるのに
時間かかりました。とほほ、、、、、

参考
[いまさら始めるGulpでWordPressテーマ開発](https://olein-design.com/blog/gulp-wp-starter)

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?