Add RichText Toolbar ButtonはGutenbergエディタのツールバーに文章修飾用のボタンを追加するプラグインです。

＞＞Gutenberg用の文章修飾プラグインを開発しました

 

WordPress Gutenbergには文章装飾のための機能が少ない

WordPress Gutenbergには、昔のWordPressのように、指定した範囲にアンダーラインを引いたり、背景色を置いたり、フォントカラーを変えたりする機能がありません。それらはすべてブロック要素に紐付けられて行われるため、文章中の特定箇所を装飾することができません。

クラシック機能のように、選択した範囲を装飾できるようになるのが、Add RichText Toolbar Buttonです。

 

Add RichText Toolbar Button動作環境

• PHP 5.6 以上
• WordPress 5.0.3 以上

※2019年5月22日にリリースされたWordPress5.2.1は、PHP5.3.xからでは、アップグレードすることができません。セキュリティ的も問題があるため、PHPは常にアップグレードできる環境を用意しておきましょう。

Add RichText Toolbar Buttonは基本的にWordPressの記事ページ、固定ページのみに適応され、その他のページ（アーカイブページなど）には適応されません。

 

Add RichText Toolbar Button導入方法

Add RichText Toolbar ButtonはWordPress内の「プラグイン＞新規追加＞検索機能」から追加することができません。GitHubより最新版をダウンロードし、「プラグイン＞新規追加＞プラグインのアップロード」から追加します。

追加後、プラグインを有効可します。

 

Add RichText Toolbar Buttonの基本的な使い方

導入した時点で以下の機能がすでに使えるようになっています。

文字色を変える

文字に背景色をつける

フォントサイズを変える

蛍光ペンで色をつける

なお、装飾したい箇所を選択すると、右サイドバーに「インラインテキスト設定」が出るようになっています。インラインテキスト設定では、上記3つの装飾が一括でできるようになっています。

 

Add RichText Toolbar Buttonのカスタマイズ

ダッシュボードからAdd RichText Toolbar Buttonをカスタマイズすることができます。

できることは以下のとおりです。

• 各装飾の有効、無効
• 各装飾のボタンのアイコン変更（デフォルトではダッシュアイコンから選択。メディアからアップロードしたアイコンを選択することも可能です）
• 設定管理（装飾コンテンツの追加、削除）
• 詳細設定（基本的に操作する必要はありません）

 

Add RichText Toolbar Buttonの設定追加

ダッシュボードからAdd RichText Toolbar Button＞設定管理をクリックすると、以下のような画面が現れます。このページの「新規追加」をクリックすると、テキスト装飾コンテンツを増やすことができます。

新規追加をすると以下のようなページに遷移します。

タグ名

基本はspanですが、code（コンピューターコードの短い断片の文字列であると示す）、sup（下付き文字）、sub（上付き文字）などを指定することができます。いわゆる「記述コンテンツ」と言われる要素を挿入します。

記述コンテンツについてはこちら。「MDN web docs」

 

クラス名

装飾のクラス名です。数値を利用する時は他装飾コンテンツとかぶらないようにしましょう。

 

グループ名

「ペン」がデフォルトで入っていますが、以下がそのグループになります。

仮に他、「ストライプペン」を作ると、以下のようになります。

 

アイコン

グループにアイコンをつけてわかりやすくすることができます。

 

スタイル

プリセットがありますので、活用しながら装飾するCSSスタイルを入力します。手打ちも可能ですので、ここで自由に装飾を施すことができます。

適応するスタイルはプレビューで確認することができます。

 

ツールバーボタンが有効かどうか

有効にチェックを入れていると、実際の編集画面で利用することができます。使わなくなった機能や、今の所利用予定がない機能はチェックを外して、保存していおくことができます。

 

優先度

他、装飾コンテンツと重複した場合、該当するコンテンツがどの程度の優先度にあるのかを設定できます。数字が大きいと優先度が低くなります。

 

***

 

効率的に装飾できなくなってしまったWordPress Gutenbergですが、このように大変便利なプラグインが開発されています。ぜひ有効活用して、よりよいコンテンツづくりをしていきましょう！