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/」に移動して、以下のコマンドを実行します。

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

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

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

ビルド

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

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

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

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