MarkdownをWordPressのGutenbergに反映させる方法

こんにちは！ あますた(@amaguristar)です。

• 「Markdownの書き方はなんとなく分かるんだけど、WrodPressのGutenbergで使うにはどうすれば良いの？」

って方、結構多いのではないでしょうか？

今回はそんな方の為にGutenbergでサクッとMarkdownを使う方法を説明します。

Markdownってなに？って方は↓↓↓
>> https://fun.wazn.jp/info/753/

Markdownの具体的な書き方は↓↓↓
>> https://fun.wazn.jp/info/782/

目次[ open / close ]

1. WrodPressでMarkdownを使う主な方法
2. Gutenberg(グーテンベルク)は標準で使える
3. GutenbergのMarkdownで修正が必要なポイント
• 段落内でのタグの利用
• htmlで書いた段落
• ブロック選択のポイント
• テーブルの結合
4. まとめ

YouTubeでも紹介してます↓↓↓
>> https://youtu.be/XbhLjYyeUO4

WrodPressでMarkdownを使う主な方法

WordPressでMarkdownを使う方法は、主に下記2つ。

1. プラグインを導入
2. WordPress標準機能を使う

今回は、「2.」のWordPress標準搭載の機能を利用して説明。

「1.」のプラグインを使う方法については、利用するプラグインにより、やり方が異なるため割愛。気になる方は、「WrodPress Markdown プラグイン」と検索すると色々と出てきます。

Gutenberg(グーテンベルク)は標準で使える

それではいよいよWordPressのグーテンベルクにMarkdownを書いていきましょう。

とはいえ、実はGutenbergには標準でMarkdownの機能が搭載されてます。使い方も簡単で下記手順。

1. Markdownで書いてコピー
2. タイトルブロックを選択
3. Shift + Cmd + vで貼り付け

たった3手順で完了。

注意！
CmdはMacの場合です。Windowsの場合は、Winキーに置き換えて下さい

注意！
最近のWrodPressには、Markdownブロックも存在しますが、今回は使いません。

通常のCmd + Vだと下記の様に同じブロックに全ての内容がコピーされます。

Shiftを押しながらペーストすると構造も反映。空行で区切り、それぞれ1つのブロックとしてペーストされます。

これだけで基本的には良いのですが、WrodPressのMarkdownは、デフォルト状態で使うと手直しが必要なものがあります。

GutenbergのMarkdownで修正が必要なポイント

現状、GutenbergではMarkdownは下記手直しが必要なものがあります。

1. 段落内でのタグの利用
2. htmlで書いた段落
3. テーブルの結合

段落内でのタグの利用

具体的に言うと下記状態。

Markdown

テストテスト<span class='text150'>テスト</span>テストテスト  
テストテスト<span class='red'>テスト</span>テストテストテスト

段落内にタグを入れても反映されません。上記Markdownは、タグを無視した状態でペーストされます。

HTML

テストテストテストテストテスト
テストテストテストテストテストテスト

これを修正する為には、ブロックを選択して「HTMLとして編集」機能を使います。

「ブロックを選択」→「オプション」→「HTMLとして編集」と進むと、ブロック内の表示がHTMLに切り替わります。

この状態でタグを入力すると、設定が反映可能です。

HTMLで書いた段落

「段落内でのタグの利用」で説明しましたが、タグは反映されません。なので、下記の様に1つのブロックが丸ごとHTML表記の場合は、カスタムHTMLブロックを使います。

Markdown

<details class='well' open>
<summary>目次</summary>
<ol class='mb0'>
<li>てすと1</li>
<li>てすと2</li>
</ol>
</details>

ちなみに、ブロックの種類の選択は、ブロック内で「/」と入力し、続けて「カスタム」と入力すると直ぐにカスタムHTMLブロックが選択可能です。

POINT！
ブロック選択には、ブロック内で「/」の後に続けて目的のブロック名を入力すると直ぐに選択できる

テーブルの結合

現状、テーブル結合自体が、Guetnbergのビジュアルモードでは不可能です。

• プラグインをインストール
• HTMLを直接修正

上記で対応するしかありません。

Markdownは日々進化してるので、プラグインを入れなくても編集可能になる日を期待しましょう。

プラグインのインストールは、今回の趣旨と違うので割愛。HTMLの直接修正も詳しく書くと長くなるのでポイントだけざっくり説明。

水平方向に結合したい場合は、colspanを設定
垂直方向に結合したい場合は、rowspanを設定

詳細は外部サイト↓↓↓
>> TAG Indexへ

まとめ

WrodPressのGutenbergでMarkdownを利用したい時は、

1. Markdownで書いてコピー
2. タイトルブロックを選択
3. Shift + Cmd + vで貼り付け

で、構造ごと貼り付けることが可能。

タグが反映されない等、未対応部分もあるので注意。独自のショートカットを作成しセルフMarkdown化すると、より使いやすくなります。

ショートカットの作り方は、いずれ紹介いたします。

YouTubeでも紹介してます↓↓↓
>> https://youtu.be/XbhLjYyeUO4