WordPressにMathJaxを導入する方法：投稿エディター＆記事表示対応

はじめに

WordPressで数学の数式を記述したい場合、LaTeX記法を使って簡単に数式を表現できるMathJaxが非常に便利です。しかし、デフォルトのWordPressにはMathJaxが組み込まれていないため、数式を正しく表示するためには適切なスクリプトを追加する必要があります。

この記事では、投稿エディター（Gutenberg） でのリアルタイム数式表示と、記事ページ での数式表示に対応するための functions.php のコードを紹介し、その仕組みを詳しく解説します。

MathJaxとは？

MathJax は、LaTeXやMathML、AsciiMathの記法を使って、HTMLページ内に美しい数式をレンダリングできるJavaScriptライブラリです。

例えば、以下のような数式を簡単に表示できます：

インライン数式

➡ 表示結果: $ h \approx \log_m n $

ブロック数式

➡ 表示結果:
$$
T_{response} = T_{search} + T_{transfer}
$$

WordPressにMathJaxを導入する方法

投稿エディター（Gutenberg）で数式をリアルタイム表示

以下のコードを functions.php に追加することで、Gutenbergエディター内で数式をリアルタイムに表示 できます。

function add_mathjax_to_admin() {
    echo '<script type="text/javascript" async
        src="https://polyfill.io/v3/polyfill.min.js?features=es6">
        </script>
        <script type="text/javascript" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
        </script>
        <script>
        window.MathJax = {
            tex: {
                inlineMath: [["$", "$"], ["$`", "`$"]],
                displayMath: [["$$", "$$"]],
                processEscapes: true
            },
            options: {
                skipHtmlTags: ["script", "noscript", "style", "textarea"],
                renderActions: {
                    addMenu: [0, "", ""]
                }
            }
        };
        function renderMathInEditor() {
            if (typeof MathJax !== "undefined") {
                MathJax.typesetPromise();
            }
        }
        document.addEventListener("DOMContentLoaded", function() {
            renderMathInEditor();
            setInterval(renderMathInEditor, 2000);
        });
        </script>';
}
add_action('admin_head', 'add_mathjax_to_admin');

記事ページで数式を表示

以下のコードを functions.php に追加すると、記事ページ内でMathJaxを適用 し、数式を正しく表示できます。

function add_mathjax_support() {
    echo '<script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            if (window.MathJax) {
                console.log("MathJax already loaded, reprocessing...");
                MathJax.typesetPromise().catch(function(err) {
                    console.error("MathJax processing error:", err);
                });
                return;
            }

            console.log("Loading MathJax...");
            window.MathJax = {
                tex: {
                    inlineMath: [["$", "$"], ["$`", "`$"]],
                    displayMath: [["$$", "$$"]],
                    processEscapes: true
                },
                options: {
                    ignoreHtmlClass: "tex2jax_ignore",
                    processHtmlClass: "tex2jax_process"
                }
            };

            var script = document.createElement("script");
            script.type = "text/javascript";
            script.async = true;
            script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
            script.onload = function() {
                console.log("MathJax loaded successfully, processing...");
                MathJax.typesetPromise().catch(function(err) {
                    console.error("MathJax processing error:", err);
                });
            };
            script.onerror = function() {
                console.error("Failed to load MathJax script.");
            };

            document.head.appendChild(script);
        });
    </script>';
}
add_action('wp_footer', 'add_mathjax_support');

まとめ

• 投稿エディターで数式をリアルタイム表示するために admin_head にMathJaxを適用
• 記事ページ内で数式を適用するために wp_footer にMathJaxを追加
• これにより、WordPressで美しい数式をLaTeX記法で記述可能

この方法を適用することで、WordPress上でスムーズに数式を扱うことができます。