ブログ・WordPress

WordPressでライブプレビュー(リアルタイムプレビュー)をしながら記事を書く方法

WordPressで記事を書く時、何回もプレビューボタンを押しながら確認するのが大変でした。

もっと効率化できないかと探した結果、WordPressのWP Githuber MDプラグインの使い勝手がよかったのでご紹介します。

WP Githuber MDでできること

WP Githuber MDはWordPressのエディタ画面で「Markdown(マークダウン)」と呼ばれる書き方ができるようになるプラグインです。

ライブプレビューやHTMLの入力補完・色分け機能もあるので、べつにMarkdown記法は使わないなぁ……という人でも便利に使えます。

記事のライブプレビュー(リアルタイムプレビュー)

エディタ画面を2分割し、左側に編集エリア、右側にプレビューエリアを表示します。

プレビューエリアはプレビューボタンを押さなくても編集エリアに入力するたびリアルタイムでプレビューされます。

WP Githuber MD ライブプレビュー

CSSで設定している書式設定はライブプレビューでは反映されないため、CSSを確認したい場合は従来通りプレビューボタンを押す必要があります。

記事をMarkdown記法で書ける

エディタでMarkdown記法を使えるようになります。
従来通りHTMLも使えます。

WP Githuber MD Markdown記法

HTMLタグの入力補完・色分け表示

エディタでHTMLタグを入力すると、対応する終了タグ自動で入力してくれます。
また、タグやパラメータごとに色を分けて表示してくれます。

WP Githuber MD HTMLタグの入力補完・色分け

コードブロックでプログラムコードをハイライト表示

プログラムのコードをコードブロックを使ってハイライト表示できます。
行番号の表示や、コードブロックの右上にコピーボタンをつけることもできます。

function sayHello() {
    return 'Hello! World.';
}

echo sayHello();

MermaindやFlowChartを使ってテキストから図を作れる

mermaid.jsやflowchart.js、sequence-diagrams.jsなどの外部ライブラリを読み込んでテキストから図を生成できます。

A->B: Message
B->C: Message
C->A: Message

↑のテキストを入力すると
↓の図が生成

A->B: Message
B->C: Message
C->A: Message

WP Githuber MDの注意点

ほかのエディタ拡張プラグイン・テーマと競合する場合がある

WP Githuber MDをインストールすると、エディタ画面がMarkdown用のエディタに変わります。

そのため、ClassicEditorなどエディタ機能をカスタマイズするプラグインと競合して動かなくなる可能性があります。

また、テーマやプラグインによってはエディタ画面にショートカット用のボタンを追加するものもあります。

私はWordPressの有料テーマ「JIN」を使っていて、通常だとJINの機能により編集画面に独自のボタンが表示されてるのですが、WP Githuber MDを入れるとボタンが表示されなくなりました。

WordPress有料テーマJIN オリジナル編集ボタンWP Githuber MDがOffの時はJINのオリジナル編集ボタンが表示される

WP Githuber MD Markdown編集ボタンWP Githuber MDを入れるとJINのオリジナル編集ボタンが消える

タグを単語登録することで、編集ボタンがなくても記事を書けるようにしていますが、ほかの記事を検索してリンクを貼るボタンが使えなくなるのはちょっと不便です。

ショートコードの中でMarkdownが使えない

ショートコードの中ではMarkdownが使えないため、画像にキャプションをつけたいときは<img>タグを使う必要があります。

[caption id="attachment_8170" align="alignnone" width="800"]
<img src="画像のURL" alt="画像のAlt属性" />
キャプション
[/caption]

記事が長いとエディタ画面が重くなる

記事の行数が多くなってくると、ライブプレビューに時間がかかりエディタ画面が重くなります。

この記事は650行くらいあるのですが、編集に少しもたつきを感じます。

X(Twitter)の埋め込み表示ができない

現状、WP Githuber MDを使うと記事の中でX(Twietter)の埋め込みが使えなくなります。

Tweetの右上にある…を押して「</>ポストを埋め込む」で埋め込むとTweetの文字は表示されますが画像が表示されません。

また、Tweetを埋め込んだところから下に書かれている文字が消えて読み込めなくなります。

WP Githuber MDのインストール

  1. WordPressの管理画面からプラグイン→新規プラグインの追加をクリックします。

  2. プラグインの追加のページにある検索ボックスに「WP Githuber MD」を入力します。

  3. 検索結果に表示される「WP Githuber MD – WordPress マークダウンエディタ」をインストールし、プラグインの有効化をします。

WP Githuber MDの設定

WP Githuber MDはいろいろな機能がありますが、初期設定ではほとんど無効になっています。

プラグイン→WP Githuber MD→Settingsから自分の好きな機能を有効化できます。

設定を変更したあと「変更を保存する」ボタンを押す必要があります。

Markdownタブ

Enable

Markdown記法を有効化する記事タイプを選択します。
投稿ページ、固定ページと、CTAに対応しているテーマならCTAも選べました。(複数選択可)

Disable Revision

Onにすると、WordPressのリビジョン(版管理)機能を無効化します。(初期値:Off)

Disable Auto-save

Onにすると、WordPressの自動保存機能を無効化します。(初期値:Off)

Spell Check

エディタでスペルチェックをするか。(初期値:Off)
日本語は未対応です。

Language

スペルチェックをする言語(初期値:en_GB)

Match Highlighter

Onにすると、単語を選択したとき同じ単語の下に線が引かれます。(初期値:Off)

WP Githuber MD Match Highlighter

HTML-to-Markdown

Onにすると、エディタの右上にHTMLをMarkdownに変換するメタボックスを表示します。(初期値:On)

WP Githuber MD HTML-to-MarkdownHTML-to-MarkdownがOn

Markdown Editor Switcher

Onにすると、エディタの右上にMarkdownエディタを無効化するメタボックスを表示します。(初期値:On)

WP Githuber MD Markdown Editor SwitcherMarkdown Editor SwitcherがOnの時

メタボックスからMarkdownエディタを無効化した場合、Gutenbergの画面に遷移します。

GutenbergじゃなくClassic Editorにしてくれれば最高なんですが、無理っぽいです。

Fetch Remote Image

リモート画像(ほかの人のサイトにある画像)を取得してローカルフォルダに保存できるようにするメタボックスを表示します(初期値:Off)

WP Githuber MD Fetch Remote Image

Keyword Suggestion Tool

Onにすると、エディタの右上にキーワードを入力するメタボックスを表示します。(初期値:Off)
Onの場合、Googleサジェストを使って入力したキーワードの候補を表示できます。

WP Githuber MD Keyword Suggestion Tool

Live Preview

Onにすると、エディタ画面を2分割し、右側にライブプレビューを表示します。(初期値:On)

WP Githuber MD ライブプレビュー

Sync Scrolling

エディタ画面の編集エリアとプレビューエリアのスクロールを同期(連動)させるか。(初期値:On)

Onになっていると編集エリアでスクロールすると、プレビューエリアも一緒にスクロールされます。

HTML Decode

MardownエディタでHTMLを使えるようにするか。(初期値:On)

Line Number

エディタ画面の左に行番号を表示するか。(初期値:On)

Toolbar

エディタのツールバーの色の設定(初期値:default)

Editing Area

編集エリアの色の設定(初期値:default)

Modulesタブ

Syntax Highlight prism.js

prism.jsを使ってコードをハイライト表示するか。(初期値:Off)

Syntax Highlight hightlight.jsを有効にした場合、Syntax Highlight prism.jsは無効化されます。

prism.jsをOnにした時の設定
設定 説明 初期値
Theme ハイライトのテーマ色 default
Line Number コードブロックに行番号を表示する Off
File Host prism.jsの読込先 default
(自分のサーバー)

Syntax Highlight hightlight.js

hightlight.jsを使ってコードをハイライト表示するか。(初期値:Off)

Syntax Highlight prism.jsを有効にした場合、Syntax Highlight hightlight.jsは無効化されます。

hightlight.jsをOnにした時の設定
設定 説明 初期値
Theme ハイライトのテーマ色 Default
File Host hightlight.jsの読込先 default
(自分のサーバー)

Copy to Clipboard

clipboard.jsを使ってコードブロックの右上にコピーボタンを表示するか。(初期値:Off)

Copy to ClipboardをOnにした時の設定
設定 説明 初期値
File Host clipboard.jsの読込先 default
(自分のサーバー)

Image Paste

クリップボードの画像をコピペで記事に挿入できるようにするか。(初期値:Off)

Image PasteをOnにした時の設定
設定 説明 初期値
Storage Space コピペした画像のアップロード先 default
(WordPressのuploadsフォルダ)
Imgur Client ID Storage Spaceをimgur.comにした場合、Imgur Client IDを入力 空欄
sm.ms API Key Storage Spaceをsm.msにした場合、sm.ms API Keyを入力 空欄
Upload to Media Library? Storage Spaceをdefaultにした場合、メディアライブラリにアップロードするか。
メディアライブラリにアップロードすると異なるサイズのサムネイルが生成される。
On

Table of Contents

目次の設定ができるようです。(初期値:Off)
私はテーマ側で設定しているのでOffにしています。

KaTex

KaTex.jsを使って数式を表示できるようにします。(初期値:Off)

KaTexをOnにした時の設定
設定 説明 初期値
File Host KaTex.jsの読込先 default
(自分のサーバー)

Mermaid

mermaid.jsを使ってテキストから図を生成できるようにします。(初期値:Off)

sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
MermaidをOnにした時の設定
設定 説明 初期値
File Host mermaid.jsの読込先 default
(自分のサーバー)

Flow Chart flowchart.js

flowchart.jsを使ってテキストからフローチャートを生成できるようにします。(初期値:Off)

st=>start: User login
op=>operation: Operation
cond=>condition: Successful Yes or No?
e=>end: Into admin

st->op->cond
cond(yes)->e
cond(no)->op
Flow ChartをOnにした時の設定
設定 説明 初期値
File Host flowchart.jsの読込先 default
(自分のサーバー)

Sequence Diagrams

sequence-diagrams.jsを使ってテキストからシーケンス図を生成できるようにします。(初期値:Off)

A->B: Message
B->C: Message
C->A: Message
Sequence DiagramsをOnにした時の設定
設定 説明 初期値
File Host sequence-diagrams.jsの読込先 default
(自分のサーバー)

MathJax

MathJax.jsを使って数式を表示できるようにします。(初期値:Off)

MathJaxをOnにした時の設定
設定 説明 初期値
File Host MathJax.jsの読込先 default
(自分のサーバー)

Emojify emojify.js

emojify.jsを使って絵文字を表示できるようにします。(初期値:Off)

EmojifyをOnにした時の設定
設定 説明 初期値
File Host MathJax.jsの読込先 default
(自分のサーバー)
Image Size 絵文字の大きさ 1.500 (em)

Extensionsタブ

Markdown Extra

Onにすると、注釈など高度なMarkdownが使えるようになります。(初期値:Off)

GFM Task List

Onにすると、Markdownでチェックボックスを作れるようになります。(初期値:Off)

- [x] Finish my changes
- [ ] Push my commits to GitHub
- [ ] Open a pull request
  • Finish my changes
  • Push my commits to GitHub
  • Open a pull request

HTML5 Figure

ファイルのリンクをHTML5の<figure>タグに変換します。(初期値:Off)

Inline Code Block with Keyboard Style

で囲んだ文字をキーボードっぽく表示します。(初期値:Off)

1. Use `{ctrl}`+`{c}` to copy text.
2. Use `{ctrl}`+`{v}` to paste text.
3. Open task manager: `{ctrl}`+`{alt}`+`{del}`

私の使っているWordPressのテーマ「JIN」だと機能が競合しているのか、うまく表示されません。

Preferencesタブ

Link Opening Method

リンクをクリックした時のデフォルトの挙動を設定します。(初期値:同じウィンドウで開く)

Shortcode

Markdownの中でショートコードを使えるようにします。(初期値:On)

どちらかというとショートコードの中でMarkdownを使いたいのですが、無理なようです。

Smart Quotes

WordPressのデフォルト設定です。
自己責任でない限り、これをオフにしないでください。(初期値:On)

Ampersands in URL

URLの中の &amp;を&に変換するか。(初期値:Off)

Yoast SEO Analysis

Yoast SEOプラグインとの連携設定のようです。(初期値:Off)

Clear all Settings

WP GitHuber MDをアンインストールするとき、すべての設定をクリアするか。(初期値:Off)

Decode Code Blocks

コードブロックの表記がおかしい場合にOnにすると直ることがあるようです。(初期値:Off)

Default: Rich Editor

エディタ画面のデフォルトをMarkdownではなくGutenbergにします。(初期値:Off)

Markdownで記事を書いてからこの項目にチェックを入れて記事を編集する場合、MarkdownエディターからリッチエディターやGutenbergに切り替わりその投稿のMarkdownテキストが失われる場合があります。

以上、WP Githuber MDの紹介でした。

多機能だけあってほかのプラグインとの競合も多いですが、うまく使えば記事をより快適に書くことができそうです。