プラグイン 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】