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

souruce-wordPressMarkdown-1
WEB / プログラミング / IT系

こんにちは! あますた(@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で修正が必要なポイント
  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だと下記の様に同じブロックに全ての内容がコピーされます。

Cmd+Vで貼り付けた場合
Cmd+Vで貼り付けた場合

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

Shift+Cmd+Vで貼り付けた場合
Shift+Cmd+Vで貼り付けた場合

これだけで基本的には良いのですが、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として編集」と進むと、ブロック内の表示がHTMLに切り替わります。

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

タグを追加してビジュアル編集に戻し、プレビューを見ると反映
タグを追加してビジュアル編集に戻し、プレビューを見ると反映
HTMLで書いた段落

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

Markdown

<details class='well' open>
<summary>目次</summary>
<ol class='mb0'>
<li>てすと1</li>
<li>てすと2</li>
</ol>
</details>
カスタムHTMLブロックにHTMLを入力(右上)、プレビュー(右下)
カスタムHTMLブロックにHTMLを入力(右上)、プレビュー(右下)

ちなみに、ブロックの種類の選択は、ブロック内で「/」と入力し、続けて「カスタム」と入力すると直ぐにカスタム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

あますた

935 views

電気工学科卒の元プログラマの現飲食店オーナー。間に不動産管理、営業等も経験。ここでは、自分の経験とお客様に聞いた話を基に、役立つ情報を発信していこうと思いま...

プロフィール

ピックアップ記事

関連記事一覧

  1. この記事へのコメントはありません。

CAPTCHA


ABOUT

”わくわく”や”驚き”等、『心の栄養』を与えられる、『楽しい』でつながるWebメディアを目指します。
ABOUT

最新記事