WordPress Gutenberg エディタブロックにCSSクラスとIDを追加する方法

FacebookさえずりredditPinterestのLinkedInのmail

ワードプレスは、バージョン5.0に更新され、デフォルトのエディタが古典的なエディタでグーテンベルクエディタ(Gutenberg editor)に変わりました。 ブロックエディタとも呼ばれるグーテンベルクは、初期に不安面があったが、ワードプレスが数回更新され多くの安定化された機能も改善されました。

使用しているワードプレスのテーマやプラグインがグーテンベルクエディタと問題を起こす場合の古典エディタ(Classic Editor)をインストールして有効にすると、問題が解決されています。

ワードプレスの古典エディタのプラグイン

古典的なエディタのプラグインは、現在、500万個以上のサイトに設置されて使用されています。 まだ古典的なエディタをインストールして使用している場合、ワードプレスは、最新のバージョンであり、テーマ、プラグインなどもすべて最新バージョンにアップデートしたら、古典エディタの代わりにグーテンベルクエディタを使ってみることを検討してください。

ワードプレスのバージョン4以下では、古典的なエディタがデフォルトのエディタであるが グーテンベルクのプラグインをインストールして利用することができます。 しかし、このプラグインのユーザー評価は薄い方です。 ワードプレスの創設者であるマットミュルロンバーグ(Matt Mullenweg)が率いるオートマチック(Automattic)は、多くのユーザーの反対にもかかわらず、Gutenbergプロジェクトをプッシュするつけながら、多くのユーザーがグーテンベルクエディタに拒否感を持っています。

グーテンベルクエディタブロックにCSSクラスを追加する

ブロックエディタでは、すべてのブロックにCSSクラスを追加することができます。 CSSクラス(class)を追加するには、ブロックを選択し、右側の ブロック 属性の一番下にある「高級「セクションをクリックします。

ワードプレスクテンベルクエディタブロックにCSSクラスを追加する

その後、上記の図のようにCSSクラスを入力することができる入力フィールドが表示されます。 Additional CSS Class(es)にクラスを入力します。 複数のクラスを入力する場合は、空白(スペース)で区切ります。

グーテンベルクエディタブロックにCSS IDを追加する

グーテンベルクエディタのブロックの中で「ヘディングの要素」のブロック以外CSS IDを追加するためのオプションが提供されません。 ヘディング要素(小見出し)ブロックを選択し、右側のブロック属性の一番下「上級」のセクションに移動すると、CSS IDを追加することができるフィールドがあります。

ワードプレスブロックエディタヘディング要素ブロックにCSS IDとCSSクラスを追加する

HTMLリンク 下にIDを入力します。 ご存知のようにCSS IDは一意であります。

他の要素にCSS IDを入力する場合は、手動で入力することを検討することができます。 手動でIDを入力するには、ブロックを選択して、右上の点の3つのアイコンをクリックし、「HTML編集」をクリックすると、HTMLでそのブロックを編集することができます。

手動でCSS IDを追加する

おわりに

以上で、ワードプレスグーテンベルクブロックにCSS IDとクラスを追加する方法について説明しました。 CSSクラスは、すべてのブロックに追加することができますが、CSS IDはヘディング要素にのみ追加することができるオプションが提供されます。

たとえば、段落のブロックにCSSを追加して、次 カラーテキストボックスのように背景色などの書式を適用することができます。

参考までに ああ、海, 円フォールド, ディビ などのページビルダーを利用するテーマを使用している場合は、ページを作成するときにはページビルダーを使用することができますが 文(ポスト)を作成するときにはページビルダーを使用していないことが望ましいします。 もしア海のテーマのFusion Builderで文を作成する場合、後日ああ海のテーマを無効にすると文に多くのタグが表示されるようになります。

注:



コメントを残す