WordPressの記事上で数式を書く方法です。KatexはMathJaxよりも軽快に描画されるらしいという話を見かけたので、今回はKatexを使うことにします。WordPressにはKatexを使えるようになるプラグインがいくつかありますが、今回はプラグインなしでできる方法を使います。
目次
CDN で配信されているスクリプトを埋め込む
Katexは自身のサーバにインストールして使う方法以外に、インストールを必要とせずWebページにコードを埋め込むだけで使える方法があります。具体的には、CDNで配信されているスクリプトを読み込むコードを、WordPressの投稿内に埋め込むということになります。
以下の1つ目のコードはデフォルト設定のコードですが、2つ目のコードのようにオプションで変更することもできます。特に数式であることを示すために数式の左右を囲うdelimiters
オプションは要チェックです。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script> <script> document.addEventListener("DOMContentLoaded", function() { renderMathInElement(document.body, { // ...options... }); }); </script>
delimiters
を特に指定しない場合はデフォルトで以下が設定されます。
[ {left: "$$", right: "$$", display: true}, {left: "\\(", right: "\\)", display: false}, {left: "\\[", right: "\\]", display: true} ]
上記のコードを投稿内に埋め込むだけで数式を記述できるようになります。埋め込む場所としては基本的にはどこでも良さそうですが、WordPressでWebサイトを作成している場合は、カスタムHTMLウィジェットとして埋め込むのが手軽です。
例えば「【初心者向け】WordPressでKatexをプラグイン無しで使う:ウィジェットにコードを挿入して解決」では、「コンテンツ下部」のウィジェットに埋め込んで動作しています。
以下も同様な例ですが「サイドバー」に埋め込んでいます。これでも問題なく動作します。元々サイドバーにウィジェットを並べているタイプのレイアウトだったので、そこにカスタムHTMLウィジェットを1つ追加しコードを記入しています。
「外観」→「カスタマイズ」→「ウィジェット」→「サイドバー」→「+ウィジェットを追加」。
タイトルは空欄にします。タイトルを書くとそのタイトル文字だけがWebページ上に表示されて不自然になってしまいます。

以上の設定を一度行えば、あとは投稿内で数式を記述できます。投稿のたびに上記設定を繰り返す必要はありません。
数式を使用した投稿の例
こんな感じになります。
(参考)WordPress の数式プラグイン
今回は使いませんでしたが、WordPressの数式プラグインには以下のようなものがあります。
- Jetpack, Beautiful Math with LaTeX
- Jetpackにも数式機能が含まれており、プラグインの設定で数式機能をONにすることで投稿内で数式を記述できます。
- 書き方:
$latex ...$
- KaTeX
- 専用ブロック内ではプレビューが表示されるので便利です。
- 書き方:
[katex]...[/katex]
または専用ブロック
- WP-KaTeX
- 書き方:
[latex]...[/latex]
- 書き方:
- WP Githuber MD – WordPress Markdown Editor, Githuber MD – KaTeX – TeX Math Rendering
- Markdownで投稿するためのプラグインですが、プラグインの設定でKatex機能をONにすることでMarkdown内で数式を記述できます。ただ、投稿画面がMarkdown用のレイアウトになってしまうため、単にKatex数式だけを使いたい場合には過剰なプラグインかもしれません。
- 書き方: Markdown内で
```katex
...
```