Wakalab Software

日本語

English

日本語

English

Appearance

はじめかた ​

このページは、WordPress サイトに導入してから最初の Markdown 記事を公開するまでを扱います。 使い方・FAQ・トラブルシュート・システム情報を含む完全なリファレンスはプラグイン内の Markdown Renderer for GitHub → Manual にあるため、このページは意図的に短くしています。

GitHub アカウントやリポジトリの接続は不要です。 既定の設定では記事の内容が外部に送信される こともありません。Shiki・Mermaid・Chart.js・markdown-it はローカルに同梱され、ご自身の WordPress から配信されます。

動作要件 ​

  • WordPress 6.8 以上
  • PHP 8.2 以上
  • JavaScript が有効なモダンブラウザー
  • 推奨: PHP メモリ上限 128MB 以上
  • 推奨: Web サーバーで静的 JavaScript の gzip または Brotli 圧縮を有効化

シンタックスハイライトと図表のライブラリは非圧縮では大きいものの、gzip / Brotli で配信すると 大幅に小さくなります。多くのマネージドホスティングと CDN は既定で有効です。プラグインは ツール → サイトヘルス に、これらのバンドルが実際に圧縮配信されているかを報告するチェックを 追加します。

無料版をインストールする ​

WordPress 管理画面から:

  1. プラグイン → 新規追加 を開きます。
  2. 「Markdown Renderer for GitHub」を検索します。
  3. 今すぐインストール をクリックします。
  4. 有効化 をクリックします。

ZIP ファイルから:

  1. プラグイン → 新規追加 → プラグインのアップロード を開きます。
  2. プラグインの ZIP ファイルをアップロードします。
  3. 今すぐインストール をクリックします。
  4. 有効化 をクリックします。

WordPress.org から無料版を入手する

最初の記事を公開する ​

  1. 投稿または固定ページを開き、Markdown ブロックを追加します。
  2. 見出し・リスト・表・コードブロック・Mermaid 図・チャートを含む GitHub Flavored Markdown を貼り付けます。
  3. 公開またはプレビューし、コードハイライト・図表・表・コピーボタンが期待どおり表示されることを確認します。
  4. Code Block タブに戻り、シンタックスハイライトのテーマと Markdown スタイルプリセットを選びます。
  5. 目次・構造化データ・PlantUML・多言語 URL などの任意機能は、サイトで必要になった時点で有効化します。

次のサンプルを Markdown ブロックに貼り付けると、ひととおりの描画を確認できます。

markdown
# Hello, GitHub Markdown

A short paragraph with **bold**, _italic_, and `inline code`.

- A list item
- [x] A completed task

| Feature | Status |
| ------- | ------ |
| Tables  | Works  |

```js
const greeting = 'Hello';
console.log( greeting );
```

WordPress のフロントエンドで描画された GitHub Flavored Markdown の表

クラシックエディター・ウィジェット・テーマテンプレートでは、代わりに [gfmr_markdown] 囲み型 ショートコードで Markdown を包みます。ブロックと同じパイプラインを通ります。

手を動かして試したい場合は、プラグインの Manual から、コードハイライト・表・タスクリスト・数式・ 脚注・Alerts・図表を含む拡張サンプル入りの下書きを作成できます。

既定で描画されるもの ​

以下はすべて無料版に含まれ、設定なしで動作します。

  • GitHub Flavored Markdown — 表・タスクリスト・取り消し線・自動リンク・脚注・絵文字ショートコード
  • GitHub スタイルの Alerts — > [!NOTE]・[!TIP]・[!IMPORTANT]・[!WARNING]・[!CAUTION]
  • Shiki シンタックスハイライト — 31 言語をネイティブ文法で、それ以外も近似文法で表示。GitHub Light / GitHub Dark / システム連動テーマに対応
  • インタラクティブな操作に対応した Mermaid 図表
  • Chart.js チャート — chart フェンスから標準 8 種
  • KaTeX 数式 — math フェンス、$$...$$、$...$、[latex] ショートコード
  • 目次・構造化データ・多言語 URL・サーバーサイドレンダリングの各設定

WordPress のフロントエンドで描画された Shiki のシンタックスハイライト

WordPress のフロントエンドで描画された Mermaid のフローチャート

WordPress のフロントエンドで描画された Chart.js の棒グラフ

PlantUML は opt-in ​

PlantUML の図表は外部の PlantUML / Kroki サーバーで描画するため、既定では無効です。 PlantUML 設定タブで次の 3 ステップを行うと有効になります。

  1. Enable PlantUML をオンにします。
  2. プライバシーの同意にチェックを入れます（図のソースが、指定した描画サーバーへ送信されます）。
  3. PlantUML または Kroki エンドポイントの Server URL を入力します。

サーバーサイド Mermaid レンダリングも同じ仕組みです。どちらかを有効にするまで、コンテンツが 外部に出ることはありません。

描画されないときは ​

  • ページキャッシュ・オブジェクトキャッシュ・CDN キャッシュ・ブラウザーキャッシュをクリアし、フロントエンドを再読み込みします。
  • 対象の投稿が Markdown ブロックまたは [gfmr_markdown] ショートコードを使っているかを確認します（非対応ブロックへの平文貼り付けは対象外です）。
  • コードブロックは開始のバッククォート直後に言語名を付けます（例: ```js）。言語指定のないブロックはハイライトなしの平文として表示されます。
  • スクリプトやスタイルが欠けて見える場合は、最適化プラグインの minify・defer・combine を一時的に無効にします。
  • Markdown・表・コードブロックのスタイルがテーマ CSS に上書きされていないか、既定テーマへ一時的に切り替えて確認します。
  • PlantUML やサーバーサイド Mermaid では、描画サーバー URL・プライバシー同意・サーバーからの外部通信可否を確認します。

完全な一覧はプラグイン内 Manual の Troubleshooting タブに、サポート依頼に必要な情報は System Info タブにあります。ライセンスキー・API キー・トークン・パスワードは共有しないでください。

次のステップ ​

サポート ​

無料版の使い方の質問や再現手順のあるバグは WordPress.org のサポートフォーラム へお願いします。Pro のライセンス・購入・返金・アカウントに関する質問は support@wakalab.dev へお送りください。