WordPressでLaTeX数式を表示する方法｜プラグインあり・なし両方解説

「WordPressで数式を綺麗に表示したい！」
「LaTeXの数式をブログに貼り付けたい」
「数学や物理の記事を書きたいけど、どうすれば…？」

数式を含む記事を書こうとして、こんな壁にぶつかったことはありませんか？

普通に文字で書くと…

x = (-b ± √(b^2-4ac)) / 2a

これでは見にくいですよね。

でも、LaTeXを使えば、こんな風に美しく表示できます：
$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

この記事では、WordPressでLaTeX数式を表示する方法を、初心者にも分かりやすく解説します。

2つの方法を紹介：

プラグインを使う方法（初心者向け・簡単）
プラグインなしで実装する方法（カスタマイズしやすい）

数学、物理、工学、統計、経済学…

どんな分野でも、この記事を読めば5分で数式が使えるようになります。

LaTeXとは？
【方法1】プラグインを使う方法（初心者向け）
【方法2】プラグインなしで実装する方法
LaTeXコマンド一覧（よく使うもの）
トラブルシューティング
プラグインあり・なしの比較
1. プラグイン（MathJax-LaTeX）を使う方法
2. プラグインなしで実装する方法
よくある質問
まとめ

LaTeXとは？

まず基本から確認しましょう。

LaTeX（ラテフ）の定義

LaTeXは、数式や論文を美しく組版するためのコンピュータ文書作成システムです。

読み方：
ラテフ、ラテック、レイテック（どれでもOK）

特徴：

数式を美しく表示できる
学術論文で標準的に使われる
プログラミング的な記述方法

MathJaxとは？

MathJaxは、LaTeXで書いた数式をウェブブラウザで表示するためのJavaScriptライブラリです。

つまり：

LaTeX = 数式の書き方
MathJax = それをブラウザで表示するツール

WordPress + LaTeXで何ができる？

こんな数式が表示できるようになります。

例1：二次方程式の解の公式
$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

例2：積分
$$\int_{0}^{1}f(x)dx$$

例3：総和
$$\sum_{k=1}^{n}k=\frac{1}{2}n(n+1)$$

例4：行列
$$\begin{pmatrix} a & b \ c & d \end{pmatrix}$$

文章中にも入れられます：関数fをxで偏微分すると、$\frac{\partial f}{\partial x} = 2x$になります。

【方法1】プラグインを使う方法（初心者向け）

最も簡単な方法です。

推奨プラグイン：MathJax-LaTeX

特徴：

インストールが簡単
設定がほとんど不要
10,000以上のサイトで使用中
無料
WordPress 6.7対応

インストール手順

ステップ1：プラグインを検索

WordPressダッシュボードにログイン
左側メニューの「プラグイン」にマウスを合わせる
「新規追加」をクリック

ステップ2：検索してインストール

検索ボックスに「MathJax-LaTeX」と入力
検索結果の一番上に表示される「MathJax-LaTeX」を見つける
「今すぐインストール」をクリック
インストール完了後、「有効化」をクリック

これで完了です！

重要な設定：Force Load

プラグインを有効化したら、必ず以下の設定をしてください。

手順：

左側メニューの「プラグイン」→「インストール済みプラグイン」
「MathJax-LaTeX」の下にある「設定」をクリック
「Force Load」という項目にチェックを入れる
「Save Changes」をクリック

Force Loadとは：
すべてのページでMathJaxを自動的に読み込む設定です。

これを有効にしないと、記事ごとに[mathjax]というショートコードを入れる必要があります（面倒）。

数式の書き方（3種類）

MathJax-LaTeXプラグインでは、3つの書き方が使えます。

書き方1：ショートコード形式（推奨）

文法：

[latex]数式[/latex]

例：

[latex]E=mc^2[/latex]

表示：
$$E=mc^2$$

特徴：

最も確実
Force Loadがなくても動く
WordPressエディタで見やすい

書き方2：ダブルドルマーク（別行立て）

文法：

$$数式$$

例：

$$E=mc^2$$

表示：
$$E=mc^2$$

特徴：

数式が中央に大きく表示される
前後に改行が入る
「ディスプレイ表示」「別行立て」と呼ばれる

書き方3：バックスラッシュ+丸カッコ（インライン）

文法：

\(数式\)

例：

関数fをxで偏微分すると、\(\frac{\partial f}{\partial x} = 2x\)になります。

表示：
関数fをxで偏微分すると、$\frac{\partial f}{\partial x} = 2x$になります。

特徴：

文章の中に数式を埋め込める
「インライン表示」「行内数式」と呼ばれる
数式が小さめに表示される

使い分けのポイント

ショートコード形式 [latex]...[/latex]

初心者におすすめ
確実に動作する
インラインでもディスプレイでも使える

ダブルドルマーク $$...$$

数式を強調したいとき
別行立てで表示したいとき
複雑な数式

バックスラッシュ+丸カッコ $...$

文章中に数式を入れたいとき
さりげなく表示したいとき

実際の使用例

例1：二次方程式

二次方程式の解の公式は以下の通りです。

$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

例2：文章中の数式

円周率は\(\pi \approx 3.14159\)です。

例3：複数の数式

以下の関係式が成り立ちます。

これはピタゴラスの定理として知られています。

【方法2】プラグインなしで実装する方法

カスタマイズしたい人向けの方法です。

メリット

プラグインが不要（サイトが軽くなる）
細かいカスタマイズが可能
最新バージョンのMathJaxを使える
読み込むライブラリを自分で選べる

デメリット

テーマファイルの編集が必要
初心者にはやや難しい
テーマ更新時に設定が消える可能性

実装手順（Cocoonテーマの場合）

Cocoonテーマには、2つの方法があります。

【方法A】Cocoon設定から追加（最も簡単・推奨）

ステップ1：Cocoon設定を開く

WordPressダッシュボードの左側メニューから「Cocoon設定」をクリック
上部のタブメニューから「アクセス解析・認証」タブを選択

ステップ2：ヘッド用コードに追加

ページを下にスクロール
「ヘッド用コード」という項目を見つける
そのテキストエリアに以下のコードを貼り付け：

<script type="text/javascript" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

ページ一番下の「変更をまとめて保存」ボタンをクリック

これで完了です！テーマを更新しても設定は消えません。

【方法B】テーマファイルから追加（カスタマイズしたい場合）

ステップ1：テーマエディターを開く

左側メニューの「外観」をクリック
「テーマファイルエディター」を選択

警告が表示されます：
「テーマを直接編集する場合は注意が必要です…」

→ 「理解しました」をクリック

ステップ2：子テーマのhead-insert.phpを開く

右上の「編集するテーマを選択」で「Cocoon Child」（子テーマ）を選択
右側のファイルリストから「tmp-user」フォルダを展開
「head-insert.php」を選択

注意：head-insert.phpが見つからない場合：

古いバージョンのCocoon Childテーマには、このファイルが含まれていない可能性があります。

その場合は、以下の手順で作成してください：

親テーマ「Cocoon」を選択
「tmp」フォルダから「head-insert.php」を見つける
その内容をコピー
子テーマ「Cocoon Child」に戻る
FTPソフトで子テーマフォルダ内に「tmp-user」フォルダを作成（なければ）
その中に「head-insert.php」ファイルを作成してコピーした内容を貼り付け

または、方法A（Cocoon設定）を使う方が簡単です。

ステップ3：MathJaxスクリプトを追加

head-insert.phpを開いたら、以下のコードを適切な場所に貼り付けます。

追加する場所：

head-insert.phpを開くと、以下のような内容が書かれています：

<?php //ヘッダー部分（<head></head>内）にタグを挿入したいときは、このテンプレートに挿入
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
//例：<script type="text/javascript">解析コード</script>
?>

<?php if (!is_user_administrator()) : //管理者を除外してカウントする場合は以下に挿入 ?>

<?php endif; ?>

<?php //全ての訪問者をカウントする場合は以下に挿入 ?>

コメント<?php //全ての訪問者をカウントする場合は以下に挿入 ?>の下に、以下のコードを追加します：

基本版（シンプル）：

<script type="text/javascript" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

詳細設定版（カスタマイズ可）：

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    processEscapes: true
  },
  svg: {
    fontCache: 'global'
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

ステップ5：保存

「ファイルを更新」をクリックして保存します。

ステップ6：動作確認

新しい投稿を作成して、数式を入れてみましょう。

$$E=mc^2$$

プレビューして、正しく表示されることを確認してください。

最も簡単な方法まとめ

Cocoonテーマを使っている場合：
→ 方法A（Cocoon設定のヘッド用コード）が最も簡単でおすすめです。
テーマ更新時にも設定が消えません。

他のテーマを使っている場合：
→ 以下の方法を試してください。

一般的なテーマでの実装

header.phpに追加する場合：

「外観」→「テーマファイルエディター」
「header.php」を選択
</head>の直前に、上記のコードを貼り付ける
「ファイルを更新」をクリック

注意：
子テーマを使っている場合は、子テーマのheader.phpを編集してください。

高度な設定例

数式番号を自動で付ける：

<script>
MathJax = {
  tex: {
    tags: 'ams',
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']]
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

マクロを定義する：

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    macros: {
      R: "\\mathbb{R}",
      N: "\\mathbb{N}",
      Z: "\\mathbb{Z}",
      Q: "\\mathbb{Q}",
      C: "\\mathbb{C}"
    }
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

これで、 $\R$ と書くだけで実数の記号$\mathbb{R}$が表示されます。

LaTeXコマンド一覧（よく使うもの）

数式を書くために必要な基本的なコマンドを紹介します。

基本的な演算子

表示	コマンド	説明
$a + b$	`a + b`	足し算
$a – b$	`a - b`	引き算
$a \times b$	`a \times b`	掛け算（×記号）
$a \cdot b$	`a \cdot b`	掛け算（・記号）
$a \div b$	`a \div b`	割り算
$\frac{a}{b}$	`\frac{a}{b}`	分数

上付き・下付き

表示	コマンド	説明
$x^2$	`x^2`	上付き文字（累乗）
$x_i$	`x_i`	下付き文字（添字）
$x^{2n}$	`x^{2n}`	複数文字の上付き
$x_{i,j}$	`x_{i,j}$	複数文字の下付き

ルート・累乗

表示	コマンド	説明
$\sqrt{x}$	`\sqrt{x}`	平方根
$\sqrt[3]{x}$	`\sqrt[3]{x}`	3乗根
$x^{1/2}$	`x^{1/2}`	累乗表記

ギリシャ文字

表示	コマンド	表示	コマンド
$\alpha$	`\alpha`	$\beta$	`\beta`
$\gamma$	`\gamma`	$\delta$	`\delta`
$\pi$	`\pi`	$\theta$	`\theta`
$\lambda$	`\lambda`	$\mu$	`\mu`
$\Sigma$	`\Sigma`	$\Omega$	`\Omega`

関数

表示	コマンド	説明
$\sin x$	`\sin x`	サイン
$\cos x$	`\cos x`	コサイン
$\tan x$	`\tan x`	タンジェント
$\log x$	`\log x`	対数
$\ln x$	`\ln x`	自然対数
$\lim_{x \to 0}$	`\lim_{x \to 0}`	極限

積分・微分

表示	コマンド	説明
$\int f(x)dx$	`\int f(x)dx`	積分
$\int_{a}^{b}$	`\int_{a}^{b}`	定積分
$\frac{df}{dx}$	`\frac{df}{dx}`	微分
$\frac{\partial f}{\partial x}$	`\frac{\partial f}{\partial x}`	偏微分

総和・総乗

表示	コマンド	説明
$\sum_{i=1}^{n}$	`\sum_{i=1}^{n}`	総和
$\prod_{i=1}^{n}$	`\prod_{i=1}^{n}`	総乗

行列

2×2行列：

$$\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}$$

表示：
$$\begin{pmatrix}
a & b \
c & d
\end{pmatrix}$$

3×3行列：

$$\begin{pmatrix}
a & b & c \\
d & e & f \\
g & h & i
\end{pmatrix}$$

連立方程式

$$\begin{cases}
x + y = 5 \\
2x - y = 1
\end{cases}$$

表示：
$$\begin{cases}
x + y = 5 \
2x – y = 1
\end{cases}$$

トラブルシューティング

よくある問題と解決法を紹介します。

問題1：数式が表示されない

症状：
$$E=mc^2$$が、そのまま文字として表示される

原因1：Force Loadが有効になっていない

解決法：

プラグインの設定を開く
「Force Load」にチェックを入れる
「Save Changes」をクリック

原因2：[mathjax]ショートコードがない

Force Loadを使わない場合、記事のどこかに[mathjax]を入れる必要があります。

解決法：
記事の最初に[mathjax]を追加する

原因3：プラグインが無効になっている

解決法：

「プラグイン」→「インストール済みプラグイン」
MathJax-LaTeXが「有効化」されているか確認

原因4：スクリプトが正しく読み込まれていない（プラグインなし実装の場合）

解決法：
ブラウザの開発者ツールでエラーを確認

Chrome: F12キーを押す → Console タブ
MathJaxのエラーが表示されていないか確認

問題1-2：Cocoonでtmp-user/head-insert.phpが見つからない

症状：
テーマファイルエディターでtmp-userフォルダ内にhead-insert.phpが見つからない

原因：
古いバージョンのCocoon子テーマを使っている

解決法：

方法A：Cocoon設定を使う（推奨）

Cocoon設定 → アクセス解析・認証 → ヘッド用コード
この方法ならファイルが存在しなくても問題なし

方法B：ファイルを手動で作成

親テーマ「Cocoon」のtmp/head-insert.phpをコピー
FTPソフトで子テーマフォルダにtmp-userフォルダを作成
その中にhead-insert.phpを作成してコピーした内容を貼り付け

方法C：Cocoon子テーマを最新版に更新

Cocoon公式サイトから最新の子テーマをダウンロード
ただし、既存のカスタマイズがある場合は注意

問題2：一部のブラウザで表示されない

症状：
Chromeでは表示されるが、Safari/Firefox/Edgeで表示されない

原因：
MathJaxのバージョンやCDNの問題

解決法：
プラグインを最新版に更新する

または、プラグインなし実装の場合は、スクリプトのURLを確認：

<script type="text/javascript" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

問題3：ブロックエディタで改行が入る

症状：
数式の前後に不要な<br>タグが入る

原因：
WordPressが自動的に改行を挿入している

解決法：

方法A：HTMLブロックを使う

ブロックエディタで「HTML」ブロックを追加
その中に数式を書く

方法B：カスタムHTMLブロック

「カスタムHTML」ブロックを追加
数式を記述

問題4：記号が正しく表示されない

症状：
\text{1233}や複雑な数式が崩れる

原因：
LaTeXのコマンド記述ミス

解決法：

波カッコ{}の対応を確認
バックスラッシュ\が抜けていないか確認
オンラインのLaTeXエディタでテスト（https://latex.codecogs.com/eqneditor/editor.php）

問題5：テーマ更新で設定が消える

症状：
プラグインなし実装で、テーマを更新したら数式が表示されなくなった

原因：
親テーマのheader.phpを直接編集していた

解決法：
子テーマを使用する

子テーマをインストール
子テーマのheader.phpにMathJaxスクリプトを追加
親テーマを更新しても設定は残る

プラグインあり・なしの比較

どちらの方法を選ぶべきか、比較してみましょう。

プラグイン（MathJax-LaTeX）を使う方法

メリット：

インストールが簡単（3分で完了）
設定がほとんど不要
複数の記法に対応
初心者でも使える
サポートが受けられる

デメリット：

プラグインが1つ増える
カスタマイズの自由度が低い
MathJaxのバージョンが固定される

おすすめの人：

WordPressを始めたばかり
とにかく簡単に使いたい
テーマファイルの編集が不安
数式の使用頻度が高くない

プラグインなしで実装する方法

メリット：

プラグインが不要（サイトが軽い）
最新版のMathJaxを使える
細かいカスタマイズが可能
読み込むライブラリを選べる

デメリット：

テーマファイルの編集が必要
初心者には難しい
テーマ更新時に設定が消える可能性
自分でトラブルシューティングが必要

おすすめの人：

WordPressに慣れている
カスタマイズしたい
プラグインを増やしたくない
数式を多用する（学術サイトなど）

よくある質問

Q1. wp-latexと何が違う？

A. wp-latexは画像、MathJaxはテキストです。

wp-latex：

数式を画像に変換して表示
サーバーに負荷がかかる
表示が遅い
SEO的に不利

MathJax-LaTeX：

JavaScriptでリアルタイムにレンダリング
軽量
拡大縮小しても綺麗
SEO的に有利

Q2. 無料で使える？

A. はい、完全無料です。

MathJax-LaTeXプラグインも、MathJax本体も、すべてオープンソースで無料です。

Q3. 商用サイトでも使える？

A. はい、商用利用もOKです。

MathJaxはApache License 2.0で、商用利用が明示的に許可されています。

Q4. モバイルでも表示される？

A. はい、スマホでも綺麗に表示されます。

MathJaxはレスポンシブ対応で、どのデバイスでも美しく表示されます。

Q5. 既存の記事は修正が必要？

A. プラグインをインストールするだけでOKです。

既存の記事に数式が含まれていない場合、特に何もする必要はありません。

Q6. どのテーマでも使える？

A. はい、ほとんどすべてのテーマで使えます。

MathJax-LaTeXプラグインは、標準的なWordPressテーマなら問題なく動作します。

Q7. Gutenberg（ブロックエディタ）で使える？

A. はい、使えます。

以下のブロックで使用可能：

段落ブロック
ショートコードブロック
カスタムHTMLブロック
HTMLブロック

Q8. LaTeXのコマンドを全部覚える必要がある？

A. いいえ、必要に応じて調べればOKです。

よく使うコマンドは自然に覚えますし、複雑な数式はその都度検索すれば大丈夫です。

参考サイト：

LaTeX コマンド集（日本語）
MathJax公式ドキュメント
Qiitaの数式チートシート

まとめ