数式を表示するためのコードをjavascript.jsに移した

　WordPressで数式を表示するためにMathJaxを使っているが、そのためのコードをこれまではそれぞれの投稿ページにカスタムHTMLやカスタムJavaScriptを使って記載していた。今回、使っているテーマCocoonに子テーマ用のjavascript.jsがあって、テーマファイルエディターから編集できることを知ったので、利用することにした。javascript.jsを見ると次のように書いてあった。

//ここに追加したいJavaScript、jQueryを記入してください。
//このJavaScriptファイルは、親テーマのJavaScriptファイルのあとに呼び出されます。
//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。

Cocoonスキンの機能の仕様

Cocoonのスキン機能に関する詳細な仕様書です。スキン機能を利用すれば、洋服を着替える感覚でサイトデザインを変更することが可能です。

wp-cocoon.com

　これまで各ページに記載していたMathJaxのコードは次の通り。

<script>
window.MathJax = {
  loader: {load: ['[tex]/empheq']},
  tex: {packages: {'[+]': ['empheq']}, tags: 'ams', inlineMath: [['$', '$'],['\\(', '\\)']]}
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js">
</script>

　これをそのままjavascript.jsに記載してはいけないらしく、記載できるよう、Geminiに修正してもらったコードが次の通り。

// 数式入力用
window.MathJax = {
	loader: {load: ['[tex]/empheq']},
	tex: {packages: {'[+]': ['empheq']}, tags: 'ams', inlineMath: [['$', '$'],['\\(', '\\)']]}
};
(function () {
	var script = document.createElement('script');
	script.id = "MathJax-script";
	script.src = "https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js";
	script.async = true;
	document.head.appendChild(script);
})();

　これで、数式を使いたい時に、いちいちJavaScriptのコードを記載しなくても利用できるようになった。