この記事では、WordPress上で数式を書くためのプログラム「MathJax」の導入方法を３つ比較しています。

「プラグインを使う方法」、「カスタムHTMLブロックにコードを書く方法」、「アクションフックを使う方法」について、下記に焦点をあてています。

  • 導入や設定が容易か
  • テーマを変更しても表示が崩れないか
  • MathJaxの仕様変更に対応しやすいか
  • その他の将来的なリスクはあるか

なお、この記事の執筆時（2022年11月）では、MathJaxの最新バージョンは「3.2.2」です。

プラグインを使う方法

導入や設定の容易さ

プラグインは、最も簡単にMathJaxを導入できる方法です。

記事執筆時点（2022年11月）の有効インストール数で上位２つのプラグインは、次の２つ。

このうち、Simple MathJaxの設定画面には、色々な設定（遅延組版など）のためにコードを書きこむ欄があり、設定しやすいので、Simple MathJaxの利用を前提に説明します。

それぞれの導入方法・設定方法については、別記事で紹介していますので、下記をご覧ください。

WordPressで数式を書くプラグイン「MathJax-LaTeX」の使い方

WordPressで数式を書くプラグイン「MathJax-LaTeX」の使い方

この記事では、WordPressの投稿内で数式を書くためのプラグイン「MathJax-LaTex」の使い方を紹介します。バージョン３を読み込む方法とショートコードを使うときのコツも紹介します。

sj-note
WordPressで数式を書くプラグイン「Simple MathJax」の使い方

WordPressで数式を書くプラグイン「Simple MathJax」の使い方

この記事では、WordPressの投稿内で数式を書くためのプラグイン「Simple MathJax」の使い方を紹介します。

sj-note

テーマ変更による表示の崩れ

WordPressのテーマを変更しても、プラグインの有効化には影響がないので数式の表示が崩れることはありません。

ただし、テーマを変更するとCSSに記載したコードは消えるので、CSSを書き直す必要があります。（これはどの方法にも共通しています。）

また、テーマとプラグインとの相性が悪いと、プラグインが機能しなくなる可能性はあります。

MathJax仕様変更への対応

Simple MathJaxの設定画面上で、CDN（MathJaxを利用するためにアクセスするWebアドレス）の書き換えができるので仕様変更には対応できると言えます。

📌NOTE
Simple MathJaxは、初期設定でMathJaxの最新版（執筆時バージョン3.22）を読み込みますが、バージョン２やバージョン3.xxを指定して読み込むことができます。具体的なやり方は別記事で紹介しています。

ただ、MathJaxやWordPressに大幅な変更があった場合にプラグインを継続利用できるかは、プラグインの開発者次第なので、評価しづらいと言えます。

プラグインの持続可能性は、プラグインの更新頻度やフォーラムで開発者が質問に回答しているかといった観点で判断するしかありません。

その他の将来的なリスク

何らかの理由で、将来的にプラグインが利用できなくなるリスクはあります。

しかし、MathJaxの記法はプラグインでもアクションフックでも共通なので、移行する方法を知っていればそれほど問題にはならないと思います。

カスタムHTMLブロックにコードを書く方法

導入や設定の容易さ

記事のどこかに「カスタムHTMLブロック」を追加し、下記のコードをペーストするだけで、MathJaxを導入することができます。

1
2
3
4
5
6
7
8
9
10
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
  },
  chtml: {
    matchFontHeight: false
  }
};
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
📌NOTE
コードの解説は、次のとおりです。
  • １から９行目の役割は、文章内数式（インライン）を書く際に「$」と「\(」を区切りとして使えるようにすることです。（詳細は公式サイト参照）
  • なお、「matchFontHeight」の初期設定は「true」であるため、インライン数式を日本語の文字列内に書くと、<数式がフォントよりやや大きく、数式が行の上にはみ出します。「false」とすると、数式高さと文字高さとが同じになります。（詳細は、公式サイト参照）
  • 10行目の役割は、Mathjaxバージョン３に対応していないInternet Explorer11で数式を表示させることです。（詳細は公式サイト参照）
  • 11行目は、MathJaxの最新バージョンを読み込むためのコードです。（詳細は公式サイト参照）
  • ちなみにMathJaxバージョン２を読み込むためのコードは下記のとおり。MathJaxがバージョン３に仕様変更したことで大きくコードが変わっているのが分かります。
1
2
3
4
5
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
</script>

テーマ変更による表示の崩れ

テーマを変更しても記事内に書かれたコードには影響がないため、表示が崩れることはありません。

ただし、上述のとおりCSSは書き直す必要があります。

MathJax仕様変更への対応

MathJaxの仕様変更があった場合は、各記事のカスタムHTMLブロックに書かれたコードを１つ１つ書き直す必要があり、手間がかかります。

しかし、下記のとおり、あらかじめ再利用ブロックを利用しておけば、すべての記事のカスタムHTMLブロックを一括で書き換えることができます。

  1. MathJaxを読み込むコードを書いたカスタムHTMLブロックを再利用ブロックに登録する。
  2. 数式を書いた記事には、その再利用ブロックをどこかに追加する。
  3. 追加した再利用ブロックは「通常ブロックに変換せず」、記事を保存する。
  4. もし、MathJaxの仕様が変更されたら、再利用ブロックのコードを書き換える。

ただ、将来的な仕様変更に備えて再利用ブロックを使わざるを得ないことに懸念があります。

過去にWordPressのバージョンアップで再利用ブロックが消えるという事件がありました。

その他の将来的なリスク

本来は<head>に記載すべきコードを<body>に記載するため、WordPressの仕様変更などで将来的に問題となることが懸念されます。

MathJaxの公式サイトでも、下記のとおりヘッダーに書くことを勧めています。

It can also go in the \ if necessary, but the head is to be preferred.
https://docs.mathjax.org/en/latest/web/start.html#using-mathjax-from-a-content-delivery-network-cdn

アクションフックを使う方法

導入や設定の容易さ

アクションフックでMathJaxを導入するには、子テーマの作成とfunction.phpへのコード追記が必要となるため、WordPress初心者にはやや難しいでしょう。

📌NOTE
  • アクションフックとは、WordPressに備わっている「機能（プログラム）を挿入する仕組み」です。
  • アクションフックを使うためには、テーマに付随するファイル「function.php」にコードを記載する必要があります。
  • 子テーマとは、元となるテーマ（親テーマ）の機能を保護しつつ、機能を追加・変更するためにWeb管理者が自作するテーマです。
  • 子テーマの作成は、Webを検索すれば簡単で分かりやすい解説が見つかると思いますので、説明はそちらに譲ります。

具体的なMathJaxの導入方法は、子テーマを作り、子テーマのfunction.phpに、下記のコードをコピペするだけです。

1
2
3
4
5
6
7
8
//アクションフックでMathjaxが使えるようにスクリプトを<head></head>に挿入する
function mathjax_add(){
	echo <<< EOM
	<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
EOM;
}
add_action('wp_head', 'mathjax_add');

ちなみに、コードのうち「add_action(…);」という部分でアクションフックによるプログラムの追加・実行をしています。

テーマ変更による表示の崩れ

テーマを変更すると、function.phpも変更されてしまい数式が表示されなくなります。

このため、変更後のテーマのfunction.phpにコードをコピペする必要が生じてしまいます。

MathJax仕様変更への対応

function.phpのコードを書き換えるだけでMathJaxの仕様変更には対応可能です。

その他の将来的なリスク

私が調べた限りでは、将来的なリスクは特にありません。

まとめと結論

まとめると下記の表のとおりです。

プラグインSimple MathJax カスタムHTMLブロック アクションフック
導入や詳細設定の容易さ 〇　プラグイン設定画面にコードをペースト △　コードをカスタムHTMLブロックにペースト ×　子テーマの追加とfunction.phpの編集
テーマ変更による表示の崩れ 〇　崩れない 〇　崩れない ×　要書き直し
MathJaxの仕様変更への対応 〇　プラグイン設定画面でCDNを書き換え △　再利用ブロックでコードを書き換え △　function.phpでコード書き換え
その他の将来的なリスク △　プラグインの停止 △　本来はヘッダーに書くべき 〇　リスクなし
総合評価 〇 △ ×

MathJaxを導入・設定する方法は「プラグイン」が最適だと私は考えます。

理由は、プラグインが将来の仕様変更に最も簡単に対応できそうだからです。その中でもSimple MathJaxは、不具合がなく、ショートコードも不要で、別記事で紹介しているとおり、高速化のための遅延読み込みも実装できます。

カスタムHTMLブロックにコードを書く方法については、再利用ブロックを使わざるを得ないことが不採用の決定的理由です。ただ、他の方法と違って、数式の無いページにはMathJaxを読み込むコードが記載されないので、Webサイトの軽量化が図られます。

アクションフックを使う方法は、最も堅牢な方法とも考えられますが、プラグインに比べると手間が多いです。ただ、プラグインを使いたくない場合やプラグインが使えなくなった場合にはよい選択肢になります。