カテゴリー

お問い合わせ

Node.js＆package.jsonのみでscss、jsコンパイルしWordPressに実装

cssやjavascriptも今まではfunctions.phpにあるwp_enqueue_style関数を使ったシンプルな記述と読み込みにしていましたが、環境も段々と整備していくことにしました。

今回の記事で設定した項目は以下のとおりです。

  • scssを使ってcssを便利に、管理しやすく開発
  • 開発用フォルダを設けその中でscssとjsをコーディングし、納品フォルダ（サーバーに連携しているフォルダ）にコンパイル先を設定
  • 複数のブラウザ、デバイスで表示をリアルタイムに反映できる便利な開発ツールを追加
  • Node.jsを使い、上記のライブラリ・パッケージを簡単に管理＆実行する
  • Webpack、Viteなどは使わずシンプルな内容で開発環境を構築

Node.jsがインストールされている環境が前提になります。

色々いじくってトライ＆エラーした結果をできる限り記録しようとしていますが、あくまで個人的開発記録となりますので参考程度にご覧いただけますと幸いです。

静的ファイルと動的ファイルの割り当て

srcフォルダで開発し動的にwordpressフォルダ（サーバーに連携しているフォルダ）にコンパイルするファイルと、ライブラリなど自分では触らない内容の静的ファイルを分離するため、プロジェクトの構造を変更しました。


sometimesフォルダ＝プロジェクトのルート

├── .github
│   ├── workflows
│   │   └── deploy.yml
│   └── …
├── .vscode
│   └── settings.json
├── src
│   ├── js
│   │   └── main.js
│   └── sass
│       ├── editor-style.scss
│       └── style.scss
├── wordpress
│   ├── wp-admin
│   ├── wp-content
│   │   ├── plugins
│   │   │   ├── myplugin　←納品ファイルが入っているフォルダ
│   │   │   └── …
│   │   ├──  themes
│   │   │   ├─ …
│   │   │   └──mytemplate　←納品ファイルが入っているフォルダ
│   │   │       ├── …
│   │   │       └── assets
│   │   │           ├── css
│   │   │           │   ├── lib　←ライブラリなどの自分では編集しない格納場所
│   │   │           │   │   └── atom-one-dark.min.css
│   │   │           │   ├── editor-style.css　← src/ssssでコンパイルされたcssファイル
│   │   │           │   ├── static-app.css　←scssではなく直接ここで記述したいファイル（任意）
│   │   │           │   └── style.css　←src/ssssでコンパイルされたcssファイル
│   │   │           ├── img
│   │   │           └──js
│   │   │               ├── lib　←ライブラリなどの自分では編集しない格納場所
│   │   │               │   ├── highlight.min.js
│   │   │               │   └── toc.js　←自作コードを独立して読み込みたい時にここに保存（任意）
│   │   │               ├── main.js　←src/jsでコンパイルされたjsファイル
│   │   │               └── static-home.js　←トップページのみ読み込みたいファイル（任意）
│   │   └── …
│   ├── wp-includes
│   └── …
├── …
├── .gitignore
├── bs-config.js
├── docker-compose.yml
├── package-lock.json
└── package.json

開発環境ファイルの作成

プロジェクトフォルダのルートに以下内容のpackage.jsonファイルを新規作成します。

package.json

{
  "name": "project",
  "version": "1.0.0",
  "scripts": {
    "start": "run-p watch:sass watch:js watch:server",
    "build": "npm run compile:sass && npm run build:js",
    "build:js": "cp src/js/main.js wordpress/wp-content/themes/mytemplate/assets/js/main.js",
    "compile:sass": "sass src/sass:wordpress/wp-content/themes/mytemplate/assets/css --no-source-map --style=expanded",
    "watch:sass": "sass --watch src/sass:wordpress/wp-content/themes/mytemplate/assets/css --no-source-map --style=expanded",
    "watch:js": "onchange src/js/main.js -- npm run build:js",
    "watch:server": "browser-sync start --config bs-config.js"
  },
  "dependencies": {
    "destyle.css": "^3.0.2",
    "browser-sync": "^2.27.7",
    "onchange": "^7.1.0",
    "npm-run-all": "^4.1.5",
    "sass": "^1.49.9"
  }
}

ざっくり内容を説明すると以下のような設定が定義されており、

  • 開発用フォルダのsrcフォルダにあるscssとjsファイルのコンパイル条件を設定
  • Browsersyncという便利ツールでファイル保存時に即座にブラウザーに反映させる設定
  • 各ブラウザのデフォルトのスタイリングをほぼ無くすことができる人気のdestyle.cssを利用

加えて、bs-config.jsを同じ階層に作成し、Browsersyncの詳細な設定をしていきます。

/*
 |--------------------------------------------------------------------------
 | Browser-sync config file for WordPress
 |--------------------------------------------------------------------------
 */
 module.exports = {
  ui: {
    port: 3001,
  },
  files: [
    'wordpress/wp-content/themes/mytemplate/assets/**/*.css', 
    'wordpress/wp-content/themes/mytemplate/assets/**/*.js', 
    'wordpress/**/*.html',
    'wordpress/**/*.php'
  ],
  watchEvents: ['change'],
  proxy: 'localhost:8081', // あなたのローカルサーバーのアドレスに変更してください
  port: 3000,
  ghostMode: {
    clicks: true,
    scroll: true,
    location: true,
    forms: {
      submit: true,
      inputs: true,
      toggles: true,
    },
  },
  logLevel: 'info',
  logPrefix: 'Browsersync',
  open: 'local',
  browser: 'default',
  notify: true,
  reloadDelay: 0,
  reloadDebounce: 500,
  injectChanges: true,
  codeSync: true,
};

functions.phpの更新

動的ファイルと静的ファイルと割り振ったので、css、jsの読み込み方法部分を更新します。

wordpress/wp-content/themes/mytemplate/functions.php

/**
 * CSS,JSを読み込ませる
 */
function mytemplate_enqueue_scripts() {
    // jQueryの読み込み
    wp_enqueue_script('jquery');

    // 共通jsの読み込み
    wp_enqueue_script('mytemplate', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), null, true);

    // 共通cssの読み込み
    wp_enqueue_style('app-style', get_template_directory_uri() . '/assets/css/static-app.css');
    wp_enqueue_style('theme-style', get_template_directory_uri() . '/assets/css/style.css');
    // 投稿ページのみ特定ファイルの読み込み
    if (is_single()) {
        wp_enqueue_script('toc-script', get_template_directory_uri() . '/assets/js/lib/toc.js', array('jquery'), null, true);
        wp_enqueue_style('style_highlight', get_template_directory_uri() . '/assets/css/lib/atom-one-dark.min.css', array(), null, 'all');
        wp_enqueue_script('js_highlight', get_template_directory_uri() . '/assets/js/lib/highlight.min.js', array(), null, true);
    }

    // トップページのみ特定ファイルの読み込み
    if (is_home()) {
        …
    }
}
add_action('wp_enqueue_scripts', 'mytemplate_enqueue_scripts');

ここまできたら、ターミナルからnpm installを実行すると、上記の設定が完了します。

このサイトでは、DockerでWordpressを開発しています。

localhost:8081 はすでにDocker上のWordPress サーバーが使用しているため、Browsersync が同じポート番号（8081）でサーバーを立ち上げることができず、エラーになるということで、Browsersyncのデフォルトポートであるhttp://localhost:3000で連携を取るようにしています。

再びターミナルからnpm startするとhttp://localhost:3000/が自動で立ち上がり、各ブラウザ、デバイスで同じ表示内容が同期されます。
（Dockerを起動するのを忘れずに！）

srcディレクトリ内のscssやjsを編集し保存すると、自動でwordpress/wp-content/themes/mytemplate/assets配下にコンパイルされ、リアルタイムの変更検知やブラウザの自動リロードが反映されることが確認できます。

また、ターミナルに出てくる


[Browsersync] Access URLs:のExternal: http://192.168.10.…にスマホからアクセスすると、スマホとPCと表示が連動していることが分かります。


以上で、Node.jsのシンプルな設定でcssとjsの開発環境を構築し、納品フォルダと分離して管理しやすくする方法を完了しました。

PAGE TOP