WordPressで記事を書く時、何回もプレビューボタンを押しながら確認するのが大変でした。
もっと効率化できないかと探した結果、WordPressのWP Githuber MDプラグインの使い勝手がよかったのでご紹介します。
WP Githuber MDでできること
WP Githuber MDはWordPressのエディタ画面で「Markdown(マークダウン)」と呼ばれる書き方ができるようになるプラグインです。
ライブプレビューやHTMLの入力補完・色分け機能もあるので、べつにMarkdown記法は使わないなぁ……という人でも便利に使えます。
記事のライブプレビュー(リアルタイムプレビュー)
エディタ画面を2分割し、左側に編集エリア、右側にプレビューエリアを表示します。
プレビューエリアはプレビューボタンを押さなくても編集エリアに入力するたびリアルタイムでプレビューされます。
記事をMarkdown記法で書ける
エディタでMarkdown記法を使えるようになります。
従来通りHTMLも使えます。
HTMLタグの入力補完・色分け表示
エディタで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を入れるとボタンが表示されなくなりました。
タグを単語登録することで、編集ボタンがなくても記事を書けるようにしていますが、ほかの記事を検索してリンクを貼るボタンが使えなくなるのはちょっと不便です。
ショートコードの中で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のインストール
-
WordPressの管理画面からプラグイン→新規プラグインの追加をクリックします。
-
プラグインの追加のページにある検索ボックスに「WP Githuber MD」を入力します。
-
検索結果に表示される「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)
HTML-to-Markdown
Onにすると、エディタの右上にHTMLをMarkdownに変換するメタボックスを表示します。(初期値:On)
Markdown Editor Switcher
Onにすると、エディタの右上にMarkdownエディタを無効化するメタボックスを表示します。(初期値:On)
メタボックスからMarkdownエディタを無効化した場合、Gutenbergの画面に遷移します。
GutenbergじゃなくClassic Editorにしてくれれば最高なんですが、無理っぽいです。
Fetch Remote Image
リモート画像(ほかの人のサイトにある画像)を取得してローカルフォルダに保存できるようにするメタボックスを表示します(初期値:Off)
Keyword Suggestion Tool
Onにすると、エディタの右上にキーワードを入力するメタボックスを表示します。(初期値:Off)
Onの場合、Googleサジェストを使って入力したキーワードの候補を表示できます。
Live Preview
Onにすると、エディタ画面を2分割し、右側にライブプレビューを表示します。(初期値:On)
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は無効化されます。
設定 | 説明 | 初期値 |
---|---|---|
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は無効化されます。
設定 | 説明 | 初期値 |
---|---|---|
Theme | ハイライトのテーマ色 | Default |
File Host | hightlight.jsの読込先 | default (自分のサーバー) |
Copy to Clipboard
clipboard.jsを使ってコードブロックの右上にコピーボタンを表示するか。(初期値:Off)
設定 | 説明 | 初期値 |
---|---|---|
File Host | clipboard.jsの読込先 | default (自分のサーバー) |
Image Paste
クリップボードの画像をコピペで記事に挿入できるようにするか。(初期値:Off)
設定 | 説明 | 初期値 |
---|---|---|
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)
設定 | 説明 | 初期値 |
---|---|---|
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!
設定 | 説明 | 初期値 |
---|---|---|
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
設定 | 説明 | 初期値 |
---|---|---|
File Host | flowchart.jsの読込先 | default (自分のサーバー) |
Sequence Diagrams
sequence-diagrams.jsを使ってテキストからシーケンス図を生成できるようにします。(初期値:Off)
A->B: Message
B->C: Message
C->A: Message
設定 | 説明 | 初期値 |
---|---|---|
File Host | sequence-diagrams.jsの読込先 | default (自分のサーバー) |
MathJax
MathJax.jsを使って数式を表示できるようにします。(初期値:Off)
設定 | 説明 | 初期値 |
---|---|---|
File Host | MathJax.jsの読込先 | default (自分のサーバー) |
Emojify emojify.js
emojify.jsを使って絵文字を表示できるようにします。(初期値:Off)
設定 | 説明 | 初期値 |
---|---|---|
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の中の &を&
に変換するか。(初期値: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)
以上、WP Githuber MDの紹介でした。
多機能だけあってほかのプラグインとの競合も多いですが、うまく使えば記事をより快適に書くことができそうです。