WordPressでテキストエディタを優先的に使う方法 ~ブロックエディタのデメリット

WordPress
記事について

人気のWordPressテーマ『SWELL』はブロックエディタ向けに開発が進んでいますが、あえてクラシックエディタ(テキストエディタ)で使う理由と、快適に使い続ける為のヒントを紹介しています。

目次 🏃

テキスト系ブロガーにブロックエディタは不要

WordPressもブロックエディタが主流になり、「テキストエディタはもう古い。ブロックエディタを使え」と推奨する声が圧倒多数ですが、テキスト系ブロガーであれば、ブロックエディタをメインで使う必要はありません。かえって、テキスト入力の邪魔になり、リライトや電子書籍化などの際、操作に手間取ることが多いです。

ここでは、WordPressテーマ「SWELL」において、テキストエディタを優先的に使う方法を紹介しています。(他のテーマでも、優先化する手順は同じ)

人気テーマ『SWELL』のお洒落なブログパーツも、基礎的なHTML構文に改変することで、テキストエディタでも普通に使用できます。

昔ながらのテキスト系ブログを楽しみたい方の参考になれば幸いです。

テキストエディタを優先的に使う方法

テキストエディタ(クラシックエディタ)をメインで使用する手順は次の通りです。

プラグインをインストールして、functions.phpに数行、書き込むだけなので、初心者でも5分で設定できます。

テキストエディタをメインにする方法
  • プラグイン『Disable Gutenberg』をインストールする
  • functions.phpでテキストエディタをデフォルトにする
  • ブログパーツのHTMLタグを編集する

プラグイン『Disable Gutenberg』をインストールする

まず、ブロックエディタを無効にするプラグイン『Disable Gutenberg』をインストールします。
https://ja.wordpress.org/plugins/disable-gutenberg/

同じ機能をもつ『Classic Editor』がWordPress公式からリリースされていますが、こちらは2022年でサポートが終了する為、おすすめしません。

『Disable Gutenberg』を有効化したら、下記の通りに設定を行います。

ブロックエディタも、ある程度、馴れておく必要があるので、完全無効化は推奨しません。

自分(Administrator)もブロックエディタを使う場合、「以下で無効化 Administrator」のチェックをオフにします。

プラグイン Disable Gutenberg 設定画面

『SWELL』の場合、固定ページとブログパーツは、ブロックエディタを使います。

プロフィールなどは、ブロックエディタの方が装飾しやすいし、「キャプション付きボックス」や「投稿リスト」など、お洒落なSWELLブロックは『ブログパーツ』として投稿内に挿入できるからです。

投稿IDやスラッグ、タイトルでも、「有効 / 無効」を個別に設定することができます。

プラグイン Disable Gutenberg 設定画面
プラグイン Disable Gutenberg 設定画面

functions.phpでテキストエディタをデフォルトにする

クラシックエディタには、『ビジュアルエディタ』と『テキストエディタ』の二種類がありますが、テキストエディタを優先的に使うなら、下記のコードをfunctions.phpに記入します。

//テキストエディタを優先的に表示
add_filter('wp_default_editor', create_function('', 'return "html";'));

参照: How To Change the Default Editor

上記が上手くいかない場合は、こちらを試して下さい。

//テキストエディタを優先的に表示
function change_editor_default( $editor ) {
$editor = 'html';
return $editor;
}
add_filter( 'wp_default_editor', 'change_editor_default' );

テキストエディタのフォントを見やすくするには、CSSで調整します。
メイリオ、ヒラギノ、游ゴシック、何でもOKです。

// テキストエディタの書式
function change_editor_font(){
echo'

';
}
add_action('admin_head', 'change_editor_font');
function custom_editor_settings(){
add_editor_style('editor-style.css');
}
add_filter( 'admin_init', 'custom_editor_settings' );

下図のように、いつ投稿画面を開いても、テキストエディタが優先的に表示されるようになります。

WordPress テキストエディタ

逆に、ビジュアルテキストを優先的に表示したい場合。

//ビジュアルエディタを優先的に表示する
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";'));

『AddQuicktag』を使う

SWELL公式サイトでは、定型句プラグイン『AddQuicktag』は非推奨になっていますが、テキストエディタをメインで使うなら必須です。

導入したからといって、何の問題もありません。

https://ja.wordpress.org/plugins/addquicktag/

下図のように、よく使う装飾用のタグを登録します。

プラグイン AddQuicktag 設定画面

下記にも書いてますが,過剰な文字装飾は、かえって見づらいです。

本当に必要な数種類だけ、統一して使用することをお勧めします。

将来的にテーマを乗り換える時も、HTMLタグの書き換えがラクです。

ブログパーツのコードをシンプルなHTML形式に編集する

ブロックエディタのデメリット

テキスト系ブロガーにとって、ブロックエディタの最大のデメリットは、--wp:paragraph-- のような、ブロックエディタ特有のコードが大量に自動挿入される点だと思います。

テキストエディタで作成した場合、コード記述は、上手のようにシンプルなHTML形式ですが、ブロックエディタで作成した場合、下図のように、ブロックエディタ特有のコードが大量に自動挿入されます。

『SWELL』の場合、↓のようなお洒落なアイコン付きボックスを作成できますが。

本作は海洋科学と土木・建築をモチーフとしたフィクションです。作品の詳細はこちら

ブロックエディタで作成した場合、コードは下図のようになります。(コードエディターで確認)
基本のHTMLの他、wp:paragraph のような、ブロックエディタ特有のコードが自動挿入されているのが分かります。

ブロックエディタ コード

テキストエディタの場合、コードは下記のようにシンプルなHTML形式です。

<p class="has-text-align-center has-swl-pale-04-background-color has-background has-small-font-size">本作は海洋科学と土木・建築をモチーフとしたフィクションです。<a rel="noreferrer noopener" href="https://novel.onl/morgenrood/" target="_blank">作品の詳細はこちら</a>。</p>

問題点

全てのコンテンツをWordPress内で管理する場合は、さほど問題になりませんが、

・ 投稿データをCSV形式やXML形式でエクスポートし、一括変換や他の用途に用いる

・ 投稿テキストだけ抽出して、電子書籍を作成する

といった作業をする際、エクスポートしたテキストの中に、wp:paragraph のようなコードも大量についてくるので、テキスト編集が煩雑になりやすいです。

下図のようなウェブページの投稿について。

WordPress 投稿 ページ

テキストエディタで作成した場合、テキストデータはシンプルなHTML形式です。
CSV形式やXML形式でエクスポートした時も、まったく同じです。

WordPress テキストエディタ

ところが、ブロックエディタの記述はこうなります。
CSV形式やXML形式でエクスポートした時も、wp:paragraph 系のコードが大量についてきます。

WordPress ブロックエディタ コード

ブロックエディタ特有のコードは削除できるのか?

海外のサイトを幾つか探したところ、wp:paragraph系のコードを削除するプラグインや、phpMyAdminを直接操作する方法もあるようですが、私は試していません。

出来たとしても、データベース構造を理解し、直接編集できるような中級以上のスキルが必要です。

気にならない人は、ブロックエディタを使い続ければいいですが、「自分の書いたテキストをきれいに保存したい」「他のブログサービスやSNSで使い回したい」という方は、テキストエディタの方がデータ管理しやすいです。

ブロックをテキストエディタで使用する ~HTML形式に整える

ブロックエディタで作成したブログパーツをテキストエディタでも使う場合は、 --wp: ○○-- を削除して、HTML形式に整えます。

SWELLのブログパーツ。

段落ボックス(背景色付き)

本作は海洋科学と土木・建築をモチーフとしたフィクションです。作品の詳細はこちら

ブロックエディタのコード。

<!-- wp:paragraph {"align":"center","backgroundColor":"swl-pale-04","fontSize":"small"} -->
<p class="has-text-align-center has-swl-pale-04-background-color has-background has-small-font-size">本作は海洋科学と土木・建築をモチーフとしたフィクションです。<a rel="noreferrer noopener" href="https://novel.onl/morgenrood/" target="_blank">作品の詳細はこちら</a>。</p>
<!-- /wp:paragraph -->

wp:paragraph系を削除して、HTML形式に整える。

<p class="has-text-align-center has-swl-pale-04-background-color has-background has-small-font-size">本作は海洋科学と土木・建築をモチーフとしたフィクションです。<a rel="noreferrer noopener" href="https://novel.onl/morgenrood/" target="_blank">作品の詳細はこちら</a>。</p>

キャプション付きボックス

タイトル

ここに内容を書きます

ブロックエディタのコード。

<!-- wp:loos/cap-block {"className":"is-style-onborder_ttl2"} -->
<div class="swell-block-capbox cap_box is-style-onborder_ttl2"><div class="cap_box_ttl"><span>タイトル</span></div><div class="cap_box_content"><!-- wp:paragraph -->
<p>ここに内容を書きます</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/cap-block -->

シンプルなHTML形式に整える。

<div class="swell-block-capbox cap_box is-style-onborder_ttl2"><div class="cap_box_ttl"><span>タイトル</span></div><div class="cap_box_content">
<p>ここに内容を書きます</p>
</div></div>

ボックス付きリスト

ブロックエディタの記述。

<!-- wp:group {"className":"is-style-big_icon_good"} -->
<div class="wp-block-group is-style-big_icon_good"><!-- wp:list {"className":"is-style-default"} -->
<ul class="is-style-default"><li>プラグイン『Disable Gutenberg』をインストールする</li><li>functions.phpでテキストエディタをデフォルトにする</li><li>ブログパーツのHTMLタグを編集する</li></ul>
<!-- /wp:list --></div>
<!-- /wp:group -->

HTML形式でも使えます。

<div class="wp-block-group is-style-big_icon_good">
<ul class="is-style-default"><li>プラグイン『Disable Gutenberg』をインストールする</li><li>functions.phpでテキストエディタをデフォルトにする</li><li>ブログパーツのHTMLタグを編集する</li></ul>
</div>

テーブルなど、かなり入り組んだコードでも、HTML形式で表示できますので、いろいろ試してみて下さい。

ただ、リッチカラムなど、設定が細部に及ぶ場合は、wp:paragraph系のコードを削除すると、表示が崩れることがあります。

出来ないことはないですが、上級者でないとカスタマイズは難しいです。

しかし、テキスト系ブログの場合、そこまで入り組んだブロックパーツは必要ないので、ほとんど問題にならないと思います。

どうしても必要なら、ブログパーツのショートコードとして記入すればOKです。。

こちらもおすすめ

カスタム投稿で『SWELL設定』を可能にする方法(カスタムフィールドを使ったメタデータ書き込み。簡単です)
SWELLでは、カスタム投稿タイプの編集で、『SWELL設定』が表示されません。
カスタムフィールドを使って、カスタム投稿でも、アイキャッチやサイドバーの表示 / 非表示を設定する方法を紹介しています。

クラシックエディタは時代遅れではない

テーマ『SWELL』では、ブロックエディタが推奨されていますが、クラシックエディタを使い続けても、何の問題もありません。

テキスト系ブログなら、メインのテキストと最低限の文字装飾だけで、十分読みやすいですし、吹き出しや、マーカーや、カラフルボックスなどを多用しても、かえって見づらいだけです。

テキストエディタ(クラシックエディタ)は、まだまだユーザーが多いですし、有志によってサポートも続けられているので、無理に切り替える必要もありません。

ブロックエディタに切り替えたからといって、検索結果が大幅に改善するわけではないし、必ずしもユーザーの満足に繋がるとも限らないからです。(吹き出しがうざい、という人もいる)

かえって、文字装飾に気を取られて、時間を無駄にするかもしれません。

商品レビューがメインのアフィリエイト・サイトならともかく、時事問題やエッセイを掲載しているテキスト系ブログに、ごてごてした文字装飾は不要ですし、読み物系のデザインなら、『バズ部 ~集客できるブログの作り方まとめ』を参考にするといいですよ。

シンプル+綺麗で、見やすいです。

WordPressのタグ :

Kindleストア

ジャンルはSFですが古典的なスタイルの長編小説です。海外翻訳文学が好きな方に向いています。
サイトで気軽に試し読みできます。

📔 無料で読めるPDFサンプルはこちら

TOP
目次 🏃
閉じる