療養費計算シミュレーターを作る(HV-AMS/AC/MX):WordPressに組み込む

本サイトはWordPressで動いている

前回までで、JavaScriptによる計算プログラムがひとまず動くようになりました。

ここまで来れば、あとは自分のWebサイトに組み込むだけです。

……「蛇が出るか鬼が出るか」ある程度は覚悟していました。

やっぱり、JavaScriptそのものとは別の問題が出てきます。

しかも、単に自分のパソコンで動けばいいわけではありません。

実際に公開しているサイトの中で、既存のページを壊さずに動かさなければなりません。

そもそも、このプログラムは自分のサイトだけで使うつもりではありませんでした。

将来的に、ほかの施術者の方が自分のWebサイトへ組み込んで使ってもらえることを考えていました。

そうなると、

「自分の環境で動いた」

だけでは不十分です。

できるだけ余計なものに依存せず、なるべく簡単に組み込める形にしておきたい。

そこで、WordPressのページそのものに大量のJavaScriptを書くのではなく、外部のJavaScriptファイルとして読み込ませる形を考えました。

WordPressで読み込ませる

WordPressの記事本文にJavaScriptを直接書く方法もあります。

ただ、今回のゴールではありません。

計算プログラムと記事本文が一緒になってしまうと、修正もしにくくなります。

そもそも、プログラムはプログラムとして別ファイルにしておき、必要なページから読み込めばいい。

これは前回までに考えていた「計算する部分と表示する部分を分ける」という考え方ともつながっています。

「どこに置く?」

では、そのJavaScriptファイルをどこに置くのか。

WordPressにはテーマやプラグインがあります。

ただ、今回はできるだけ特定のテーマに依存させたくありませんでした。

テーマを変更したら動かなくなる、という構造にはしたくない。

そこで、WordPressの本来的にアップロードされたメディア等を保存する領域を借りて専用のディレクトリを作り、そこへプログラムを配置する方法を取りました。

今回は、WordPress本体やテーマ、プラグインとは切り離して管理したかったため、`wp-content/uploads` 配下に専用ディレクトリを切って配置しました。

ここは以前から配置が変わっておらず、WordPressをアップデートしてもこの配下が変更されたことはありませんでした。そのため今回は、既存の環境を踏まえてここに配置しています。
ただし、これはあくまで私のサイトでの運用上の判断であり、wp-content/uploads 配下への配置を一般的な方法として推奨するものではありません。

こうしておけば、WordPress本体やテーマなどとは切り離して管理できます。

こうして、JavaScriptをWordPressのページから読み込ませるところまではできました。

ところが、実際にページへ組み込んでみると、今度は別の問題が出てきました。

WordPressの記事本文とJavaScriptは、必ずしも素直には付き合ってくれません。

次は、実際にページへ埋め込んで動かすところを書いてみます。

療養費計算シミュレーターを作る(HV-AMS/AC/MX):WordPressとの相性
HTMLを貼るさて、現実的な話として、HTMLに貼り付けるだけで動くというのが特徴にしている筈なので、実際のところどうだろうというところを実証実験も含めて行った現状がある。編集画面「コードモード」に切り替え、README.mdやsample...
タイトルとURLをコピーしました