「ブログで数式を綺麗に表示したいけど、どうすればいいの？」
そんな悩みを抱えているあなたへ。WordPressで数式を美しく表示するMathJaxの導入方法を、プラグイン不要で簡単に行う方法を徹底解説します。この記事を読めば、あなたも美しい数式を自由自在に操れるようになります！
例えば、以下のような複雑な数式も、MathJaxを使えばこの通り。
$$ w = \frac{1}{2}mv^2 $$
これは高校物理でおなじみの運動エネルギーの公式ですが、WordPressの標準機能ではきれいに表示できません。しかし、MathJaxを導入すれば、このような数式も美しく表示できます。
この記事では、プラグインを使わずにMathJaxを導入する方法を、初心者でも分かりやすく解説します。
Mathjaxとは？「世界標準の数式記述法」
Mathjaxとは、ウェブブラウザ上で美しい高品質な数式を表示するために使用されるオープンソースのJavaScriptライブラリです。数式をテキストコードとして記述でき、美しく表示します。
MathJax は、LaTeX、MathML および AsciiMath 表記法用のオープン ソース JavaScript 表示エンジンで、パソコン、スマートフォン、タブレットなどのデバイスに依存せず、ほとんどの最新ブラウザーで動作します。ユーザー側での設定は不要でプラグインのダウンロードやソフトウェアのインストールは必要ありません。ページ作成者は数式を含む Web ドキュメントを作成し、ユーザーがそれを自然かつ簡単に表示することができます。
MathJax は、Web ベースのフォントを使用するので拡大縮小しても美しい高品質な数式を表示できます。ビットマップ等の画像ファイルを使用すると、拡大縮小した際に数式の表示が粗くなるといった問題がおきますが、Mathjaxではそういった問題は起きません。また、テキストベースの数式のため、検索エンジンで使用できます。ページのテキストと同様に数式を検索できます。
MathJaxはアメリカ数学会と工業応用数学協会の合弁会社であるMathJaxコンソーシアムによって 2010 年にリリースされました。今の数学界ではMathjaxが標準的な数式記述方法になっています。
- 圧倒的な美しさ
ベクター形式で数式を表示するため、どんなに拡大縮小しても滑らかで美しい表示を維持します。 - アクセシビリティへの配慮
スクリーンリーダーでの読み上げに対応し、視覚障碍者にも優しいWebサイトを実現します。 - SEO効果
テキストベースの数式は検索エンジンに認識されやすく、専門性の高いキーワードでの検索順位向上に貢献します。 - クロスブラウザ対応
主要なWebブラウザに対応し、閲覧環境を選びません。 - 高度なカスタマイズ性
CSSで数式の色、サイズ、フォントなどを自由に変更でき、Webサイトのデザインに合わせた数式表示が可能です。 - 活発なコミュニティ
世界中の開発者や研究者が活発に情報を共有しており、最新の情報や技術が手に入りやすい環境です。
プラグイン不要！MathJax導入の3ステップ【初心者向け完全ガイド】
MathJaxの導入は、プラグインを使わなくても簡単です。header.phpにコードをコピペするだけで、美しい数式表示が手に入ります。
- 動作が若干重たくなる
- プラグインを使わなくても簡単
導入環境
それでは、MathJaxを導入していきます。WordPressの環境や導入するMathJaxのバージョンによって設定が異なる恐れがあります。ここでは以下の条件とします。
サーバー：ロリポップ ライトプラン
WordPress：バージョン 6.6
テーマ：SWELL バージョン 2.11.0
PHP：バージョン 8.1.29
これらは 2024 年 7 月 22 日時点の状態です。
2024 年 7 月 22 日時点で最新の MathJax バージョン 3 とします。
バージョンが違うとコードの記述内容が変わるので注意して下さい。
【ステップ１】「テーマファイルエディター」を開く
WordPressのメニュー画面を開き、「外観」＞「テーマファイルエディター」を開きます。
注意点
テーマファイルエディターは、Webサイトのソースコードを直接編集するため、誤った操作を行うとサイトが正常に動作しなくなる可能性があります。必ずバックアップを取ってから作業してください。
「テーマファイルエディター」を開く
【ステップ２】「テーマヘッダー（header.php）」を開く
「テーマファイル」で「テーマヘッダー（header.php）」を開きます。
「テーマヘッダー（header.php）」を開く
【ステップ３】MathJaxコードを <head> ～ </head> 間にコピペする
以下のコードをコピーし、<head> ～ </head> 間に貼り付けします。
コード
<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）」
数式が表示されなくなった！？そんな時には
正しく設定して数式が表示されてたはずなのに！？しばらく経って見ると表示されてないことに気づきました。恐らくSWELLテーマ更新の影響で header.php が初期化されたのではと確認すると、はやり追加したコードが消えてました。
再度コードを追加することで数式が表示されました。数か月気づきませんでした。たまにはチェックした方がいいですね。
その他、正しく設定したのに数式が表示されない場合は、以下の点を確認してください。
- テーマの更新
テーマを更新した場合、header.phpが初期化されることがあります。再度コードをコピペしてください。 - キャッシュのクリア
ブラウザやWordPressのキャッシュをクリアしてみてください。 - 競合するプラグイン
他のプラグインと競合している可能性があります。一時的に全てのプラグインを停止し、MathJaxが正しく表示されるか確認してください。 - コードの誤り
コピペしたコードに誤りがないか確認してください。特に、$や\などの記号が正しく入力されているか注意してください。 - ブラウザの拡張機能
ブラウザの拡張機能がMathJaxの動作を妨げている可能性があります。拡張機能を一時的に無効化して確認してください。 - JavaScriptエラー
ブラウザの開発者ツールでJavaScriptエラーを確認してください。 - CDNの接続
CDN（cdn.jsdelivr.net）に接続できるか確認してください。
コメント