Laravel Mixを使ってwordpress開発を便利にする方法

2021年8月7日wordpress

Laravel Mixを使ってwordpress開発を便利にする方法を紹介します。

目次から読む

1. Laravel Mixを使ってwordpress開発を便利にする方法
2. ディレクトリ構造
3. WordPressのthemesフォルダにアクセス
4. style.css
5. Laravel Mixをいれる
6. package.jsonの設定
7. webpack.mix.jsの設定
8. PHPファイルの記述

Laravel Mixを使ってwordpress開発を便利にする方法

Laravel Mixを使うとwebpackをよりわかりやすい記述方式で書くことができます。
そして、SASSやブラウザの自動リロードなどを簡単に設定できます。

ディレクトリ構造

root
├─ dist
├─ src
   ├─ images
   │   └─ sample.jpg
   ├─ js
   │   └─ app.js
   ├─ sass
   │   ├─ abstracts
   │   │   ├─ _variables.scss
   │   └─ app.scss
├─ .gitignore
├─ archive.php
├─ index.php
├─ header.php
├─ footer.php
├─ functions.php
├─ page.php
├─ front-page.php
├─ search.php
├─ archive.php
├─ style.css
├─ package.json
├─ webpack.mix.js

WordPressのthemesフォルダにアクセス

localを使っている場合、app>public>wp-content>themesにアクセスします。
その中にテーマのフォルダを作成して、上のフォルダとファイルを作成します。

style.css

style.cssには最低下の一行は必要です。

/* 
Theme: wordpress-one
*/

wordpressのadminへいって、テーマを適用します。

Laravel Mixをいれる

https://laravel-mix.com
上にアクセスします。
version 6の場合、https://laravel-mix.com/docs/6.0/installationのStand-Alone Projectsにやり方が書いてあります。

npm init -y

でpackage.jsonを作成します。

npm install laravel-mix --save-dev

でLaravel Mixをインストールします。

touch　webpack.mix.js

でwebpack.mix.jsを作成します。

package.jsonの設定

Laravel Mix v6の場合、
https://laravel-mix.com/docs/6.0/upgrade#update-your-npm-scripts
にpackage.jsonの記述が記載されています。
v5以前とだいぶ内容が変わっているので、各々のバージョンを確認します。

  "scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
  },

v6の場合は、上の通りです。

npm run watch

で監視できます。

npm run production

でミニファイバージョンを取得できます。

webpack.mix.jsの設定

// webpack.mix.js

let mix = require('laravel-mix');

mix
.options({
  processCssUrls: false,
})
.js('src/js/app.js', 'dist/js')
.sass('src/scss/app.scss', 'dist/css')
.copyDirectory('src/images', 'dist/images')
.browserSync({
  files: [
      "src/**/*",
      "dist/**/*.*"
  ],
  proxy: {
      target: "http://localhost:10014/", //ここにurl
  }
});

それぞれ説明します。

JavaScriptのバンドル

mix.js('src/js/app.js', 'dist/js')

上記はJavaScriptのバンドルです。
この一行で、
ES2015記法
モジュール
開発環境向けに圧縮
が可能です。
また、Vueを使う場合も、少しのコードを付け足すだけでOKです。

mix.js('src/app.js', 'dist').vue();

Vueのバージョンを指定したい場合は、以下のように記述します。

mix.js('src/app.js', 'dist').vue({ version: 2 });

SASSのコンパイル

mix.sass('src/scss/app.scss', 'dist/css')

この一行で、SASSが使えるようになります。

画像

mix.options({
  processCssUrls: false,
})

上記はscssファイルでbackground-imageのurlで画像を指定する場合、デフォルトのwebpackのurl操作を無効にするための記述です。

mix.copyDirectory('src/images', 'dist/images')

上記の記述によって、dist/imagesに画像をコピーするため、記述どおりのcssが出力されるようになります。

browserSync

mix.browserSync({
  files: [
      "src/**/*",
      "dist/**/*.*"
  ],
  proxy: {
      target: "http://localhost:10014/", //ここにurl
  }
});

ブラウザの自動リロードの設定です。
localを使っている場合など、targetを変更する必要がある場合は、targetのurlを自分の環境に変更します。

   proxy: {
       target: "http://my-domain.dev/",
   }

3000番の場合は、上のようにしても動きます。

PHPファイルの記述

以下は動かすために最低限必要な記述です。

functions.php

<?php
function scripts() {
  wp_register_style('style', get_template_directory_uri(). '/dist/css/app.css', [], 1, 'all');
  wp_enqueue_style('style');

  wp_enqueue_script('jquery');

  wp_register_script('app', get_template_directory_uri() . '/dist/js/app.js', ['jquery'], 1, true);
  wp_enqueue_script('app');
}

add_action('wp_enqueue_scripts', 'scripts');

front-page.php

<?php get_header(); ?>

<div class="content">
  ここにテキスト
</div>

<?php get_footer(); ?>

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイトル</title>

  <?php wp_head(); ?>

</head>
<body>

footer.php

<?php wp_footer(); ?>

</body>
</html>

wordpress

Posted by devsakaso