この記事では、WordPressの投稿内で数式を書くためのプラグイン「MathJax-LaTeX」の使い方を紹介します。バージョン３を読み込む方法とショートコードを使うときの再利用ブロックの活用法も書きましたので参考にしてください。

インストール後の設定

WordPressの管理画面で、「設定」に追加された「MathJax-LaTeX」をクリックします。

MathJax-Latex設定画面で、図のとおり設定します。

「Custom MathJax location?」の欄には下記のテキストをコピペしてください。

1
https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

設定オプションの詳細は、後で解説します。

基本的な使い方

投稿に数式を記載するには、テキストが入力できるブロック（例：段落ブロック）を追加して、LaTeXの記法に従って式を書きます。

例として、段落ブロックに別行立て数式（display-math）、リストブロックに行内数式（inline-math）を書いてみました。

投稿画面
Web画面

投稿での入力時には、別行立て数式（display-math）は\[...\]の中に数式となるテキストを書き、行内数式（inline-math）は\(...\)の中に書きます。

Web表示では、別行立て数式は強制的に改行され、中央揃えとなります。一方、行内数式は改行されませんが、分数が小さくなって表示されています。

📌NOTE
  • 別行立て数式は$$...$$を\[...\]の代わりに使って表示させることができます。
  • しかし、MathJax-LaTeXでは、$...$ を行内数式の \(...\) の代わりとして使うことができません。

設定オプションの解説

Force Load

これをオンにすると、すべての投稿上でMathJax JavaScriptを強制的に読み込みます。

📌NOTE
Force Loadをオフにすると、投稿内に数式を書くために、下記のどちらかが必要になります。
  • 投稿内のどこかにショートコードブロックを追加し[mathjax]と入力する。
  • [latex]...[/latex]の中に数式を書く。
記事内に[latex]...[/latex]を一度でも書くと、[mathjax]を書いた時と同様の効果があります。
なお、[latex]...[/latex]は、初期設定で行内数式（inline-math）になっています。

Default [latex] syntax attribute

 [latex]...[/latex]の中に書いた数式を、別行立て数式（display-math）、行内数式（inline-math）のどちらにするかを選択します。

Use wp-latex syntax?

これをオンにすると、$latex …$に数式を書いた場合にも行内数式（inline-math）になります。

Use MathJax CDN Service

これがオンの場合は、プラグインに組み込まれているMathJax CDN ServiceからMathJaxが読み込まれます。

これがオフの場合は、その下にある「Custom MathJax location?」の欄に記載されたCDNからMathJaxが読み込まれます。

📌NOTE
  • このプラグインの説明や設定画面には、どのMathJaxのバージョンが読み込まれるのか記載されていません。
  • そこで、自分のWebサイトのソースを確認したところ、CDNが「'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=default&ver=1.3.11'」になっていました。
  • 最新版が読み込まれるのかと思いましたが、意外にもバージョン「2.7.5」が読み込まれます。
  • なお、この記事の執筆時（2022年11月）におけるMathJaxの最新バージョンは「3.2.2」です。
  • 最新バージョン（バージョン３）を読み込む方法は、後で説明します。

Custom MathJax location?

Use MathJax CDN Serviceがオフの場合に、この欄に記載した接続先からMathJaxを読み込みます。

MathJax Configuration

このオプションの解説は公式サイトにあります。

特にこだわった記法を使うことがなければ、「default」のままにしておきましょう。

MathJaxバージョン２までの設定には有効ですが、バージョン３では不要な設定のようです。

実際にAMSの記法である「dfrac」を使って、分数が別行立て数式として表示されるか試してみると分かります。

最新バージョン（バージョン３）を読み込む方法

MathJax-Latexは、初期設定ではMathJaxバージョン2.7.5を読み込みます。

プラグインの説明には、他のバージョンの利用方法が記載されていませんが、下記のとおり設定すれば、最新バージョン（バージョン３）が利用可能です。

  1. 「Use MathJax CDN Service?」をオフにする。
  2. 「Custom MathJax location?」に次のテキストをコピペする。
1
https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

これは公式サイトに記載されたMathJax最新バージョンのCDNです。

📌NOTE
MathJaxバージョン３では、レンダリング速度60～80%が向上するなど色々改善されています。
https://docs.mathjax.org/en/v3.2-latest/upgrading/whats-new-3.0.html
さらに、バージョン3.2から利用可能となった「遅延組版（Lazy Typesetting）」でWebの表示をさらに高速化することも可能です。
遅延組版（Lazy Typesetting）を利用する方法は、下記の記事で紹介しています。
MathJaxの「遅延組版（Lazy Typesetting）」を設定してWebサイトを高速化

MathJaxの「遅延組版（Lazy Typesetting）」を設定してWebサイトを高速化

この記事では、MathJaxの遅延組版（Lazy Typesetting）を設定する方法を紹介します。Web表示におけるMathJaxの処理時間が短くなりますので、Webサイトを高速化したい方にはお勧めの機能です。この記事で紹介する方法は、WordPressのプラグインを使ってMathJaxを読み込んでいることを前提にしています。

sj-note

ショートコード[mathjax]の利用をお勧めしない理由と、ショートコードを使うときの再利用ブロックの活用法

私は、「Force Load」をオンにして、ショートコード[mathjax]を記事内に記載しないことをお勧めします。

その理由は、プラグインMathJax-LaTeXを無効にすると、ショートコードのテキスト[mathjax]がWebサイトに表示されてしまうからです。

どうしても、「Force Load」をオフにしたい場合は、あらかじめショートコードブロックを再利用ブロックに登録しておきましょう。

こうすることで、プラグイン無効化後に各記事に表示されてしまうテキスト[mathjax]を一括で削除することが可能です。

数式を書くときに再利用ブロックを使う手順は、下記のとおり。

  1. ショートコードブロックを追加し、ショートコード[mathjax]を書いて、再利用ブロックに登録する。
  2. 数式を記載する記事には、この「再利用ブロック」を追加して「通常ブロックには変換せず」に保存する。

プラグインを無効化したときに表示されてしまうテキスト[mathjax]を消去する方法は、再利用ブロック内のショートコードのテキスト[mathjax]を消すだけです。

ただし、編集画面上には、空白のショートコードブロックは残ってしまいます。