WordPress

JP Markdown と Classic Editor をやめ、Gutenberg を利用することにしました

投稿日:2019年5月13日 更新日:

1. これまでの経過

JP Markdown プラグインの終了

本ブログでは、JP Markdown というプラグインを利用していました。Markdown を使って記事を書くためのプラグインです。

既に何年も前から更新されなくなっていたのですが、先月末とうとうダウンロードすらできなくなりました。

Gutenberg を避けるための Classic Editor プラグイン

また WordPress バージョン 5 になり、デフォルトのエディタが「Gutenberg」になりました。この Gutenberg は、「ブロック」という新しい概念が導入されており、それまでのエディタから大きく変化しています。

しかし、本ブログでは JP Markdown を使っていたこともあり、Gutenberg のメリットを享受することはほとんどないだろうと判断して、従来のエディタを使い続けてきました(Classic Editor プラグインを導入すれば可能です)。

とうことで、Classic Editor + JP Markdown という環境で記事を書いていました。

Gutenberg を受け入れる

JP Markdown が終了したとはいえ、まだ当面の間は使い続けることができるでしょう。また、Gutenberg でも「コードエディター」というモードであれば、JP Markdown やその他の同じようなプラグインを使って Markdown を利用することは可能です。

なのですが、最近「Markdown を使わなくても、あまり変わらないのではないか?」と思うことも増えてきていたため(*1)、Gutenberg を使うのもよいのではないかと思うに至りました。

*1: HTMLタグに独自にCSSクラスを指定したい場合には、自分でHTMLを書くことになります。こうする機会が増えていました。

2. Gutenberg に移行すると何が変わるのか?

この記事で書きたかったのは、「Gutenberg に移行すると何が変わるのか?」という点です。実際に移行して気づいた点を忘れないように記しておきたいと思います。

(1) 既存の記事はHTML形式になっている

過去に Markdown で書いた記事を編集したい場合は、Markdown形式ではなくHTML形式でデータを編集することになります。但し、ビジュアルエディターも使えます。

(2) エディターに、テーマが用意したボタンが表示されなくなる(ことがある)

テーマが Gutenberg に未対応であれば、当然エディタのツールバー上にボタンが表示されなくなります。これは結構困る点です。

この際、必要なボタンは自分で追加してもよいでしょう。

参考

(3) ブロックが想像以上に便利

用意されているブロックの種類が多いおかげで、従来HTMLコードを直接書いていたよりも記述がラクになることもあります。

例えば、ビジュアルエディターで書いたほうがラクな部分と、HTMLを手書きしたい部分があった場合に、「カスタムHTML」というブロックを使うことができます。

(4) ビジュアルエディターがメインでよさそう

そのため、ビジュアルエディターをメインに使うというので問題がなく、コードエディターは補助的に使うだけで済みそうです。

(5) プレビューが遅い

プレビュー表示がちょっと遅いです。→ その後、速くなりました。なぜ?

3. おわりに

思っていたよりも、Gutenberg が便利そうです。今後も気づいたことがあれば、本ページに追記していきます。

参考

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPress プラグイン開発における多言語対応(gettextを利用する場合)

目次1. はじめに2. 想定している開発環境3. gettext のインストール4. 多言語対応の作業1. プログラム中の翻訳文字列を使用する箇所で、専用の関数を使うようにします。2. 翻訳ファイルを …

WordPress

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生する

All in One SEO Pack を使っている場合に、Search Console で noindex のエラーが発生した場合の対応方法について書きました。

WordPressで作られたサイトの利用テーマを調査する

ブラウザでサイトを見ていて、「これは WordPressを使っているのか?」「WordPressを使っているとしてら、何のテーマを使っているのか?」を調査する方法です。 ※ 100%分かるわけではあり …

WordPress

WSL + Homestead で WordPress のプラグイン開発環境を作る

目次1. はじめに2. 環境3. 作業1. 今回 WordPress をインストールするディレクトリを用意します2. Homestead に Webアプリケーションの設定を追加します3. Window …

WordPress

WordPressのカスタムHTMLブロックで ‘>’ などを記述する場合の問題点 (未解決)

WordPressのカスタムHTMLブロックで ‘>’ などを記述する場合の問題点 (未解決)