WordPressのエディタにタグを挿入するボタンを追加するプラグイン「Visual Editor Custom Buttons」の使い方

Visual Editor Custom Buttonsの概要

Visual Editor Custom ButtonsはWordPressのエディタ画面にオリジナルタグを追加するためのボタンを設置できるプラグインだ。

ビジュアルエディタ、テキストエディタの両方に対応している。

同様のプラグインで有名なものにAddQuicktagがある。

Visual Editor Custom Buttonsのほうが設定がシンプルに感じられたが、使い勝手等も含めて好きなほうを使えばいい。

Visual Editor Custom Buttonsの設定

設定画面の表示

Visual Editor Custom Buttonsをインストールし、プラグインを有効化する。

ダッシュボードに「Visual Editor Custom Buttons」という項目が追加される。

Visual Editor Custom Buttons 設定の場所

その下の「Settings」で設定画面を表示できる。

Visual Editor Custom Buttons 設定画面

ビジュアルエディタでボタンを表示する場所の設定

「Display buttons on row」という項目でビジュアルエディタの何段目にボタンを表示するか設定できる。

好みで設定するといいだろう。

3段目(Row 3)に設定してもボタンの設定が存在しなければ表示されない。

なお、ビジュアルエディタのみ設定が反映されるため、テキストエディタでは無関係。

例として3段目に設定した画像を用意した。

Visual Editor Custom Buttons ビジュアルエディタでのボタンの位置

見慣れないボタンが確認できるが、それがVisual Editor Custom Buttonsで追加したボタンだ。

ボタンを表示する権限の設定

「Allow other user roles to administer buttons」でボタンを表示させる権限を設定できる。

WordPressは複数のユーザーに異なる権限を持たせることが可能だが、多くのユーザーは管理者(administer)の権限を持つ一人だけで運用している。

この設定は変更しなくても問題ないだろう。

一人で運用しているなら意味のない設定項目だ。

Visual Editor Custom Buttonsにボタンを追加する

「Visual Editor Custom Buttons」>「Add New」で新たなボタンを追加できる。

設定する項目はいくつかあるが、その中でも使うであろうものを説明する。

なお、最後に「公開」ボタンで設定を保存して反映させることを忘れないように。

管理用の名称

一番上の欄に管理用の名称を入力する。

項目名はないが「ここにタイトルを入力」とあるところだ。

分かりやすいような名称にしておこう。

ボタンの挙動の選択

ボタンの挙動は「Wrap Selection」か「Single Block」のどちらかを選択する必要がある。

どういった違いがあるのか次に示す。

Wrap Selection

「Wrap Selection」は文字列を選択している場合としていない場合で異なる動作をする。

文字列を選択していれば、文字列を囲うように前後に設定した内容が挿入される。

文字列を選択していないなら、1回目にボタンを押せば「Before」に設定した内容が挿入され、2回目にボタンを押せば「After」に入力した内容が挿入される。

Single Block

「Single Block」はカーソルの位置に設定した内容が挿入される。

設定できる文章も「Content」に入力した一つだけになる。

エディタでのボタン表示の設定

Display In Editor

「Display In Editor」ではボタンを表示させるエディタを指定する。

「Visual Editor」ならビジュアルエディタで表示される。

「Text Editor」ならテキストエディタで表示される。

どちらか片方のみでも、両方でも指定可能。

なお、ここの指定により入力できる項目が変化する。

これは不具合なのかもしれないが、「Text Editor」のみにチェックを入れておいたがビジュアルエディタでもボタンが表示されてしまった。

不具合かもしれないし仕様なのかもしれないし解釈が間違っているのかもしれない。

特に支障はないので気にしないでおこう。

Button Icon

「Display In Editor」で「Visual Editor」を選択すると「Button Icon」の設定が表示される。

これでビジュアルエディタで表示される際、どういったアイコンで表示されるかを指定する。

Visual Editor Custom Buttons ボタンアイコンの設定

「None」を指定するとアイコンが表示されないがボタンは存在するという使いにくい表示になってしまう。

気に入ったものがなくても何かしらは指定しておいたほうがいい。

Custom Icons

自分でアップロードした画像をアイコンとして使うための設定。

もしかしたらVisual Editor Custom Buttonsの特徴的な機能かもしれない。

しかし個人的に使う気がしなかったので詳しくは調べていない。

Quicktag Label

テキストエディタでボタンを表示する際に使用される。

通常はここで設定した名称のボタンになるが、何も入力しない場合は管理用の名称で入力したものになる。

長すぎても邪魔になるので簡潔かつ分かりやすいものにしたほうがいいだろう。

エディタでのVisual Editor Custom Buttonsの使い方

Visual Editor Custom Buttonsは設定の部分が重要だ。

それらが適切に行われていれば、エディタでの使い方も説明不要なくらいだ。

一応説明すると、基本的に任意の位置でボタンを押せば設定した内容が挿入される。

「Wrap Selection」を設定している、かつ、文字列を選択している場合、選択範囲の前後に挿入される。

「Wrap Selection」を設定している、かつ、文字列を選択していない場合はボタンを押す度に入力される内容が切り替わる。

文字で説明するよりも実際に使ってみたほうが分かりやすいだろう。

そして作業の効率化に貢献してくれていることにも気付くはず。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です