WordPress で数式を扱う 【LaTeX】

Machine Learning

プラグイン MathJax-LaTeX を使って、WordPress で数式を使う設定、手順をまとめておきます。

以下の環境で動作確認をしています。
環境: WordPress 5.X、CentOS

背景 ~ ワードプレスで数式!

Python で図形、グラフ、機械学習などを扱っていると、数式を扱う場面がよく出てきます。
数式を表現するソフトウェアとしては LaTeX がよく知られています。
WordPress で LaTeX が使えると、ウェブサイトで数式が扱えるようになり、とても便利です。
そこで、WordPress で LaTeX が使えるプラグイン MathJax-LaTeX のインストール方法と、典型的な記載例をまとめておきます。

インストール方法 ~ MathJax-LaTeX

① WordPress 管理画面左側下の「プラグイン」にマウスを重ね、「新規追加」を左クリックします。
→ 「プラグインを追加」画面が表示されます。
② 「プラグインを追加」画面上部の検索欄に “mathjax” と入力し検索します。
③ プラグイン “MathJax-LaTeX” が表示されますので、「今すぐインストール」をクリックし、インストールします。
④ インストール後、「有効化」をクリックします。
→ 「プラグイン」画面に移り、「プラグインを有効化しました。」の表示がされます。
⑤ 「MathJax-LaTex」の「設定」の文字部分をクリックします。
⑥ 「Force Load」となっている部分のチェック欄にチェックを入れ、「Save Changes」をクリックします。
→ これで完了です。

※ ⑥でチェックを入れないと、数式の変換がされないようです。

使い方

式を単独で記載する方法

下表で、左側の記載例のように記述すると、右側の表示例に示したような式に変換されて表示されます。
なお、記載例を使うにあたり、”math jax” の間に入っている半角スペース(1か所)は削除してください。加えて、“$ $” の間に入っている半角スペース(2か所)も削除してください(合計3か所)。(実際の記載例をこのサイト上で書くと変換されてしまうため、変換されない形にしています。)
実際に WordPress 上で使う場合は、下記の記載例の文字列をコピーして、WordPress の編集欄に貼りつけ、3か所のスペースを削除してください。
ワードプレスの編集画面では変換前の文字列で表示されますが、記事を保存してリンクをクリックして完成後のページを表示すると、式が変換されて表示されると思います。うまく表示されたら、文字や式を使いたい形に修正してください。

記載例 表示例
[math jax] $ $ x + y = 1 $ $  $$ x + y = 1 $$
[math jax] $ $ x – y = 1 $ $ $$ x – y = 1 $$
[math jax] $ $ x \pm y = 1 $ $ $$ x \pm y = 1 $$
[math jax] $ $ {x}\times{y} = 1 $ $ $$ {x}\times{y} = 1 $$
[math jax] $ $ {x}\div{y} = 1 $ $ $$ {x}\div{y} = 1 $$
[math jax] $ $ \frac{x}{y} = 1 $ $ $$ \frac{x}{y} = 1 $$
[math jax] $ $ \sqrt{x} $ $ $$ \sqrt{x} $$
[math jax] $ $ x^n + y^n = z^n $ $ $$ x^n + y^n = z^n $$
[math jax] $ $ \sum_{n=1}^{m}n =  \frac{(m+1)m}{2} $ $ $$ \sum_{n=1}^{m}n =  \frac{(m+1)m}{2} $$
[math jax] $ $ {\int_{a1}^{b1} f(x) dx} = 1 $ $ $$ {\int_{a1}^{b1} f(x) dx} = 1 $$
[math jax] $ $ X, dB = 20 \log_{10} {\frac{P1}{P0}} $ $ $$ X, dB = 20 \log_{10} {\frac{P1}{P0}} $$
[math jax] $ $ e = \lim_{n \to +\infty} \biggl( 1+\frac{1}{n} \biggl)^{n} $ $ $$ e = \lim_{n \to +\infty} \biggl( 1+\frac{1}{n} \biggl)^{n} $$
[math jax] $ $ {_{n} C_{i}} $ $ $$ {_{n} C_{i}} $$

文中で式を記載する方法

なお、文中で数式を使うには “\ (” と “\ )” でくくります。
例えば、”\ ( x + y = 1 \ )”のように記載すると、\( x + y = 1 \) のように表示されます。
なお、上記と同様に “\” と “(” の間、および、”\” と “)” の間にある半角スペース(2か所)は削除してください。

まとめ

WordPress で数式を扱う方法についてまとめました。
これでウェブサイト上で数式を扱うことが可能になりました!

なお、以下の関連リンク「円周率を求めてみる」などで、実際に数式を使っています。
具体的な使用例・出来栄えについて関心がある場合は、参照してみてください。

関連リンク
・ グラフを表示する【matplotlib & Python】
・ 音声データの音量レベルを一括で変換する
・ ネイピア数を求めてみる 【Python】
・ 円周率を求めてみる 【Python】

タイトルとURLをコピーしました