HOME  /WordPress(応用)
 /ブロックエディタ時代にビジュアルエディタを使う方法
2020年03月23日

ブロックエディタ時代にビジュアルエディタを使う方法

WordPress5.0以前は「ビジュアルエディタ(TinyMCE)」が標準エディタでした。

よって記事投稿画面とHTML表示を一致させる事が比較的容易でした。

 

しかし、2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりました。

その結果、記事投稿画面とHTML表示を一致させる事より、ドキュメント構造が重視されるようになりました。

 

プロの方は「ブロックエディタ」の方が良いとの意見もありますが、素人には「ビジュアルエディタ」の方が判り易いと思います。

私は「ビジュアルエディタ」時代にWordPressを始めたので問題なく理解できましたが、今、WordPressを始める人は、「あれ!どの様に文書を書いたら良いのか?」でつまずくのではないか?と心配しています。

 

そこで私は、WordPressは最新版を使うが、エディタは「ビジュアルエディタ」を使い続けたいと思っています。

そこでこれらの「エディタ」の現状を色々調べた結果を下記に報告します。

 

1.WordPressのデフォルトテーマでのエディタの取り扱い

<テーマ毎のビジュアルエディタ一覧>

テーマ名 年度 editor-style.cssの場所 クラス
twentytwelve 2012年版 テーマディレクトリの直下 .entry-content
twentythirteen 2013年版 CSSフォルダの中 .entry-content
twentyfourteen 2014年版 CSSフォルダの中 .entry-content
twentyfifteen 2015年版 CSSフォルダの中 .entry-content
twentysixteen 2016年版 CSSフォルダの中 .entry-content
twentyseventeen 2017年版 assets/cssフォルダーの中 .entry-content
twentynineteen 2019年版

ビジュアルエディタのファイル名が「style-editor.css」に変更になりました。

場所はテーマディレクトリの直下

.entry-content

twentytwenty 2020年版

ビジュアルエディタのファイル名が「editor-style-classic.css」に変更になりました。

場所はassets/cssフォルダーの中

.entry-content

­ ­解説

従来のビジュアルエディタのCSSファイル名は「editor-style.css」でした。

しかし「twentynineteenテーマ」や「twentytwentyテーマ」ではCSSのファイル名が変更されました。

ビジュアルエディタが無くなった訳ではありません。

確認方法:何が使われているのか?はfuncitions.phpを「add_editor_style()」で検索すると判ります。

またビジュアルエディタのCSSに対応するhttp表示のCSSは「style.css」で、クラスは全テーマで「entry-content」です。

確認方法:ビジュアルエディタで作成されたコンテンツがどの様なクラス名で表示されているのかは「EmEditor」の「ファイルからの検索」で「the_content()」で検索すると判ります。

 

一方、旧テーマでもブロックエディアが使える様にする為に「editor-blocks.css」というCSSファイル名が追加されました。

しかし「twentynineteenテーマ」や「twentytwentyテーマ」は上記と異なり下記になります。

■twentynineteen:style-editor-customizer.css

■twentytwenty:editor-style-block.css

確認方法:何が使われているか?はfuncitions.phpを「wp_enqueue_style()」で検索するとが判ります。

 

いづれにしても、WordPressのデフォルトテーマは「ビジュアルエディタ」でも「ブロックエディタ」でも使える様になっています。

 

1.ビジュアルエディタ(TinyMCE)のみを利用する方法

ビジュアルエディタを使うか?否かは、下記のプラグインを入れるか?否かで決まります。

入れた場合は「ビジュアルエディタ(TinyMCE)」、入れない場合は「ブロックエディタ(Gutenberg)」になります。

 

Classic Editorプラグインをインストールする。

下記のプラグインをインストールして有効化して下さい。

 

■ビジュアルエディタのCSSをカスタマイズする方法

①ビジュアルエディタのCSSを親テーマから子テーマにコピーする

項番1の表に記載したCSSファイルを子テーマフォルダにフォルダ構造毎コピーします。

 

②ビジュアルエディタの修正

このCSSを修正すると、ビジュアルエディタの表示が変わります。

例)

p{font-size: 16px;}

 

③http表示のCSSの修正

子テーマの「style.css」に上記の修正内容を追加します。

クラスは「.entry-content」です。

例)

.entry-content p{font-size: 16px;}

以上でhttp表示もビジュアルエディタと同様に修正されます。

 

2.TinyMCE Advancedを追加利用する場合

TinyMCE Advancedを利用する場合、親テーマが「editor-style.css」か否かで使い方が異なります。

親テーマの種類により下記ドキュメントを参照してください。

 ­親テーマが「editor-style.css」の時のスタイル機能の使い方

 親テーマが「editor-style.css」以外の時のスタイル機能の使い方

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

このドキュメントではビジュアルエディタ(TinyMCE)の見出し、本文、URLの設定を解説しています。

TinyMCEのデフォルト設定ではインデントが使えない。またCSSを更新した時にスーパリロードしないと画面が更新されない等との問題があります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。
以前のサイトはあまり意味もわからず作成しましたが、この辺の意味が判ってきたのでここで解説します。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってリンクBOXを作成する方法を解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法を解す津指定ます。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタに幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。