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

文中で式を記載する方法

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

まとめ

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

なお、数式を使ったサンプルを以下の関連リンク(円周率と記載したリンク)にまとめています。
具体的な出来栄えについても関心をお持ちでしたらご参照ください。

関連リンク
・ 【Python】 グラフを表示する方法 【matplotlib】
・ Python で円周率を求める

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