PR

Cocoon と WP Mermaid プラグインの設定

1. はじめに

Cocoon テーマと WP Mermaid プラグインを組み合わせて、WordPress サイトに美しいダイアグラムを簡単に追加する方法を説明します。
当サイトはWordPressで構築されており、Cocoon テーマを使用しています。
mermaid 記法を使って、フローチャートやシーケンス図などを表示させようとしたのですが、設定で少し手間取ったので、その手順をまとめます。

2. 設定手順

2.1 WP Mermaid プラグインのインストールと有効化

  1. WordPress 管理画面にログインします。
  2. 「プラグイン」→「新規追加」をクリックします。
  3. 検索バーに「WP Mermaid」と入力し、プラグインをインストールして有効化します。

2.2 WP Mermaid の設定

  1. 「設定」→「WP Mermaid」をクリックします。
  2. ファイルホストを「ロカール（デフォルト）」以外 に設定します。
  3. 「変更を保存」をクリックします。

3. Mermaid 記法の使用

  1. 投稿または固定ページの新規または編集画面を開きます。
  2. 追加するブロックから「WP Mermaid」を選択します。
  3. mermaid 記法を入力します。例えば、以下のようなシーケンス図を追加します。
sequenceDiagram
    participant User
    participant WordPress
    participant Cocoon
    participant WP_Mermaid

    User->>WordPress: 投稿を作成
    WordPress->>Cocoon: テーマを適用
    Cocoon->>WP_Mermaid: Mermaid.jsを読み込み

4. CSS の調整（必要に応じて）

当サイトの背景の問題で、mermaid の文字が見えにくいため、以下の CSS を追加しました。

.wp-block-wp-mermaid-block.mermaid {
  background-color: white !important;
  padding: 10px;
  border-radius: 4px;
}

上記を、「外観」→「カスタマイズ」→「追加 CSS」に貼り付けて保存します。

5. 確認

sequenceDiagram participant User participant WordPress participant Cocoon participant WP_Mermaid User->>WordPress: 投稿を作成 WordPress->>Cocoon: テーマを適用 Cocoon->>WP_Mermaid: Mermaid.jsを読み込み

6. まとめ

Cocoon テーマと WP Mermaid プラグインを組み合わせることで、WordPress サイトに簡単にダイアグラムを追加できます。
これで表現の幅が広がり、より魅力的なコンテンツを提供できるようになりました。

今回の記事も、Github Copilot が7割くらい書いてくれました。

A. 参考サイト

WP Mermaidでフローチャートを作る時に押さえておきたい …
WordPressでMarmaid記法を表示する

B. 関連書籍

コメント