WordPressで数式を記述「簡単！プラグインなしでMathjaxを導入」

2024年7月21日

　数式を記述したい時にはどうすればいいでしょうか？例えば以下の分数を含んだ数式は標準では記述できません。

数式の例

$$ w = \frac{1}{2}mv^2 $$

　この数式は高校物理で学習するので何となく見覚えのある方も多いと思いますが、質量$m$の物体が速度$v$で移動している時の物体の持つエネルギー$w$を示す式です。

　WordPressで数式を記述するには「Mathjax」を導入する必要があります。「Mathjax」を導入することで複雑な数式を記述することができます。Mathjaxの導入はプラグインを使う方法と、使わない方法の 2 通りあります。本記事ではプラグインを使わない方法を説明します。

Mathjaxとは？「世界標準の数式記述法」

　ウェブブラウザ上で美しい高品質な数式を表示するために使用されるオープンソースのJavaScriptライブラリです。ウェブページ内で数式をテキストコードとして記述しMathJaxを使って美しく表示します。

　MathJax は、LaTeX、MathML および AsciiMath 表記法用のオープンソース JavaScript 表示エンジンで、パソコン、スマートフォン、タブレットなどのデバイスに依存せず、ほとんどの最新ブラウザーで動作します。ユーザー側での設定は不要でプラグインのダウンロードやソフトウェアのインストールは必要ありません。ページ作成者は数式を含む Web ドキュメントを作成し、ユーザーがそれを自然かつ簡単に表示することができます。

　MathJax は、Web ベースのフォントを使用するので拡大縮小しても美しい高品質な数式を表示できます。ビットマップ等の画像ファイルを使用すると、拡大縮小した際に数式の表示が粗くなるといった問題がおきますが、Mathjaxではそういった問題は起きません。また、テキストベースの数式のため、検索エンジンで使用できます。ページのテキストと同様に数式を検索できます。

　MathJaxはアメリカ数学会と工業応用数学協会の合弁会社であるMathJaxコンソーシアムによって 2010 年にリリースされました。今の数学界ではMathjaxが標準的な数式記述方法になっています。

MathJaxをプラグインなしで導入「コピペで簡単！header.phpに追記」

header.php の <head> ～ </head> 間にコードをコピペするだけ。ページ毎の設定は不要。

　MathJaxをプラグインで導入することもできますが以下の理由で、私はプラグインなしで導入しました。

MathJaxをプラグインで導入しない理由

動作が若干重たくなる
プラグインを使わなくても簡単

導入環境

　それでは、MathJaxを導入していきます。WordPressの環境や導入するMathJaxのバージョンによって設定が異なる恐れがあります。ここでは以下の条件とします。

WordPress環境

サーバー：ロリポップライトプラン
WordPress：バージョン 6.6
テーマ：SWELL バージョン 2.11.0
PHP：バージョン 8.1.29

これらは 2024 年 7 月 22 日時点の状態です。

導入するMathJaxバージョン

2024 年 7 月 22 日時点で最新の MathJax バージョン 3 とします。
バージョンが違うとコードの記述内容が変わるので注意して下さい。

【手順１】「テーマファイルエディター」を開く

　WordPressのメニュー画面を開き、「外観」＞「テーマファイルエディター」を開きます。

「テーマファイルエディター」を開く

【手順２】「テーマヘッダー（header.php）」を開く

　「テーマファイル」で「テーマヘッダー（header.php）」を開きます。

「テーマヘッダー（header.php）」を開く

【手順３】MathJaxコードを <head> ～ </head> 間にコピペする

　以下のコードをコピーし、<head> ～ </head> 間に貼り付けします。

コピペ用MathJaxコード

<script>
Mathjax = {
	tex: { inlineMath: [['$', '$'], ['¥¥(', '¥¥)']] }
};
</script>
<script type="text/javascript" id="MathJax-script" async
	src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <!-- IE11対応 -->

　MathJaxコードをコピペした後は以下になります。最後に「ファイルを更新」をクリックしエラーが出なければ完了です。

コピペ後の「テーマヘッダー（header.php）」