WordPress プラグイン「ameliabooking」にあるVueファイルを編集してビルドする

WordPress プラグイン「ameliabooking」にあるVueファイルを編集してビルドする

WordPressで、予約システムが構築できるプラグイン「ameliabooking」にあるVueファイルを編集してビルドする手順を記述してます。

環境

  • WordPress 5.7
  • サーバー ubuntu

nodeインストール

レイアウトがvueで作成されているため、vueファイルを編集して変更を適応するにはnpmでビルドが必要となります。

nodeとnpmがインストールされていない場合は、作業できないのでインストールします。

Vueファイルを編集

編集するvueファイルは、「wp-content/plugins/ameliabooking/assets/views」に存在します

必要パッケージインストール

「wp-content/plugins/ameliabooking/」に移動して、以下のコマンドを実行します。

npm run inst

これでうまくいけば、問題ないですが、自分の場合は「node-sass」と「libpng-dev」でERRORとなったので、
「package-lock.json」と「node_modules」を削除して、キャシュをクリア後に「node-sass」だけをインストールしてます。

rm -rf package-lock.json node_modules
npm cache clean --force
npm i --unsafe-perm node-sass

「libpng-dev」の方は、インストールしておきます。

sudo apt install -y libpng-dev

これで以下を実行してもエラーはなくなりました。

npm run inst

ビルド

自分の場合は、以下でビルドすると

npm run production

jqueryがないとエラーになったので、

Module not found: Error: Can't resolve 'jquery' in

jqueryをインストールしてからビルドを実行しました

npm i jquery

これで、vueの編集した結果が反映されました。