MathJaxを利用してWordPressで個別ページ毎に数式を表示する方法(Luxeritasでの利用法も解説)

ブログ運営

Wordpressで数式を表示する方法

Webで数式を表示する方法は何個かありますが、本記事ではLaTeX ($\LaTeX$) を知っている方向けに解説していきます。

MathJaxでWebサイトに数式を表示する方法

まずは基本的なところからいきましょう。

MathJaxとは

MathJaxの説明が本記事の目的ではありませんので、要点のみ説明しますね。

例えばベイズの定理をTeX記法で書くと以下のようになりますよね。

$$
\widehat {p}\left( x\right) =
\dfrac
    {\int
        q \left( x|\theta \right) 
        \prod _{i=1}^{n}
            q \left( x_{i}|\theta \right) 
            p \left( \theta \right)
            d\theta
    }
    {\int
        \prod _{i=1}^{n}
            q\left( x_{i}|\theta '\right)
            p\left( \theta '\right)
            d\theta '
    }
$$

MathJaxを導入すると、このTeXコードをブログに直打ちするだけで、以下のように数式が表示されるようになります。

$$
\widehat {p}\left( x\right) =
\dfrac
{\int
q \left( x|\theta \right)
\prod _{i=1}^{n}
q \left( x_{i}|\theta \right)
p \left( \theta \right)
d\theta
}
{\int
\prod _{i=1}^{n}
q\left( x_{i}|\theta ‘\right)
p\left( \theta ‘\right)
d\theta ‘
}
$$

これがMathJaxです。Mathjaxさえ導入してしまえば、論文でLaTeXを記載していくような感覚でブログを書くことができます。

※javascriptを用いてクライアント側で数式を生成していますので、ユーザーがjavascriptを無効にしていた場合はTeX記法のまま表示されます

MathJaxの導入の仕方

Webサイトのheadタグに以下のコードを埋め込むだけです。

<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>

これだけでMathJaxが利用できるようになります。

詳しい説明はMathJaxの解説サイトを参照してください。

WordPressではプラグインを利用して導入することも可能

Worpressの場合、ご自身でheadタグを編集しなくてもWP QuickLaTeXというプラグインをインストールすることで、Mathjaxを簡単に利用できるようになります。プリアンブルの設定等も簡単に行うことができます。

数式を利用しているページでだけMathJaxを利用する方法 (WordPress)

本記事のメインはこちら。

WordPressで数式を書くためには、上記方法でheadタグにスクリプトを埋め込むか、プラグインを入れればOKです。

しかし私のブログのように、数式を利用したページと利用していないページが混在している場合、数式を利用したページでのみスクリプトを読み込ませたいですよね。

なぜなら、数式を表示していないページでもスクリプトが読み込まれてしまう為、当該ページの表示が遅くなってしまうからです。

方法１：プラグインを使用する (簡単)

Web知識のない方には、この組み合わせがおそらく最も簡単です。

Plugin Load Filterというプラグインは、ページ毎にロードするプラグインを選択できるプラグインです。

plugin load filter（ページごとにロードするプラグインを選択できるWordPressプラグイン） | Thought is free

このプラグインを利用して、WP QuickLaTeXをロードしたいページ(即ち、数式を用いているページ)でのみ、プラグインを読み込ませるように設定することができます。

方法２：カスタムフィールドを利用する

こちらは少し敷居が高いですが、Wordpressの機能に「カスタムフィールド」というものがあります。これを利用すると、個別ページ毎にheadタグを編集することができます。

プラグインを利用しなくて済むため、プラグインの量を減らしたい人にはこちらの方法が良いですね。

以下、寝ログさんの記事がわかりやすいのでご参照ください。

WordPressのカスタムフィールドを用いて個別ページにCSS・JavaScriptコードを組み込むカスタマイズ方法

このカスタムフィールドを利用して、数式を適用したいページのheadタグに以下のMathjaxコードを埋め込めばOKです。

<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>

Luxeritasテーマで個別記事毎にMathJaxを設定する方法(カスタムフィールドを利用)

Web知識のない方ですと、上記のカスタムフィールドのやり方が理解できないかもしれません。

その方の為に、もっと簡単な方法をご紹介します。WordpressにはLuxeritasという優秀な無料テーマがあります。このテーマでは、予めheadタグ挿入用のカスタムフィールドが用意されています。

テーマ依存の解説にじゃなってしまいますが、具体的に説明した方がわかりやすいと思いますので、このテーマの利用を前提として以下で具体的な手順を解説しますね。

カスタムフィールド欄の表示

カスタムフィールドの表示方法記事投稿画面の上部に「表示オプション」という欄があると思いますので、そこをクリックしてください。そこから、カスタムフィールドのボックスを表示させることができるようになります。

カスタムフィールドにMathJaxスクリプトの追加

記事投稿画面の下の方に「カスタムフィールド」というボックスが表示されていると思います。

Luxeritasのaddheadカスタムフィールドの使い方

Luxeritasではheadタグ挿入用のカスタムフィールドが「addhead」という名前で既に用意されています。

名前欄でaddheadを選択し、値欄いMathJaxのスクリプトを記載しましょう。もう一回スクリプトを書きますね。

<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>

記載できましたら「カスタムフィールドを追加」をクリックしましょう。

Luxeritasのカスタムフィールドaddheadの使い方

すると、上記画像のように、カスタムフィールドが追加されます。

これだけです。

後はLaTeX風にブログを書いて投稿すれば、数式が表示されるようになります。

 

これはLuxeritasというテーマに依存した解説となってしまいますので、自分でフィールドを追加したい方は先程の寝ログさんの記事を参照して導入してくださいね。

ブログ運営

Posted by ころな