WordPressがバージョン5.0に更新され、デフォルトのエディタが古典的なエディタで Gutenberg エディタ（Gutenberg editor）に変わりました。 ブロックエディタとも呼ばれる Gutenbergは、初期に不安面があったが、 WordPressが数回更新され多くの安定化された機能も改善されました。
古典的なエディタ
使用している WordPress テーマやプラグインが Gutenberg エディタと問題を起こす場合の古典エディタ（Classic Editor）をインストールして有効にすると、問題が解決されています。
古典的なエディタのプラグインは、現在、500万個以上のサイトに設置されて使用されています。 まだ古典的なエディタをインストールして使用している場合 WordPress最新バージョンでテーマ、プラグインなどもすべて最新バージョンにアップデートしたらクラシックエディタの代わりに Gutenberg エディタを使ってみることを検討してください。
WordPress バージョン4以下では、古典的なエディタがデフォルトのエディタであるが Gutenberg プラグインをインストールして利用することができます。 しかし、このプラグインのユーザー評価は薄い方です。 WordPress 創始者であるマット Mullenweg（Matt Mullenweg）が率いるオートマチック（Automattic）は、多くのユーザーの反対にもかかわらず、Gutenbergプロジェクトをプッシュするつけながら、多くのユーザーが Gutenberg エディタに拒否感を持っています。
Gutenberg エディタブロックにCSSクラスを追加する
ブロックエディタでは、すべてのブロックにCSSクラスを追加することができます。 CSSクラス（class）を追加するには、ブロックを選択し、右側の ブロック プロパティの下部にある '高級'セクションをクリックします。
その後、上記の図のようにCSSクラスを入力することができる入力フィールドが表示されます。 Additional CSS Class（es）にクラスを入力します。 複数のクラスを入力する場合は、空白（スペース）で区切ります。
Gutenberg エディタブロックにCSS IDを追加する
Gutenberg エディタのブロックのうち「ヘッダ要素」ブロック以外には、CSS IDを追加するオプションはありません。 ヘディング要素（サブタイトル）ブロックを選択して右側のブロックプロパティの下部にある「詳細」セクションに移動すると、CSS IDを追加できるフィールドがあります。
HTMLリンク 下にIDを入力します。 ご存知のようにCSS IDは一意であります。
他の要素にCSS IDを入力する必要がある場合は、手動で入力することを検討してください。 手動でIDを入力するには、対応するブロックを選択し、右上の3つの点のアイコンをクリックしてから「HTMLで編集」をクリックすると、HTMLでそのブロックを編集できます。
更新 - すべてのブロックにCSS IDを割り当てることができます
Gutenbergが更新されると、「段落」、「ボタン」など、すべてのブロックにCSS ID（アンカー）を割り当てることができます。
最後に、
以上で WordPress Gutenberg ブロックにCSS IDとクラスを追加する方法について説明しました。 CSSクラスは、すべてのブロックに追加することができますが、CSS IDはヘディング要素にのみ追加することができるオプションが提供されます。
たとえば、段落のブロックにCSSを追加して、次 カラーテキストボックスのように背景色などの書式を適用することができます。
参考までに Avada, Enfold, Divi などのページビルダーを利用するテーマを使用している場合は、ページを作成するときにはページビルダーを使用することができますが 文（ポスト）を作成するときにはページビルダーを使用していないことが望ましいします。 もし Avada テーマのFusion Builderで文を作成する場合、後日 Avada テーマを無効にすると文に多くのタグが表示されるようになります。
コメントを残す