[WordPress] AddQuicktagの使い方【Gutenbergで使ってみる】
Nプログラマ(@Nprog128)です。
WordPressのプラグインであるAddQuicktagの使い方のメモリアです。
最近のWordPressではエディタがGutenbergになっておりこのプラグインは対応していません、、、（悲壮）
が、しかし。
ClassicEditor（クラシックエディタ）プラグインを使えば、もうしばらくの間は使えるようになります。
ちなみにGutenbergの再利用ブロックでも似たようなことができます。
ブロックエディタを使っている場合は、こちらを試してみてもいいかもしれませんね。
インストールから使うまでの流れ（ざっくり）
ざっくりとした流れはこんな感じです。
（１）AddQuicktagのインストール
（２）登録と設定をする
（３）設定した内容を使ってみる
まずはAddQuicktagをインストールする
それではインストールをしていきましょう。
まずはWordPressの管理画面にログインをします。
そこから左のメニューの中から、プラグイン > 新規追加をクリックします。
プラグインの追加の画面が表示されているので、キーワードと表示されているトコロにAddQuicktagと入力しましょう。
マウスでコピペしやすいようにコピペ用の文字を置いておきますね。
【 コピペ用: AddQuicktag 】
キーワードの入力してEnterを押すと検索結果が表示されるので、AddQuicktagを探します。
見つけることができたら今すぐインストールをクリックしてインストールを開始します。
インストールが完了すると、今すぐインストールが有効化に変わるので、この有効化のボタンをクリックすればインストールが完了となります。
AddQuicktagの設定
それではインストールしたAddQuicktagの設定を行っていきましょう。
まずはWordPressの管理画面に移動して、左メニューにある 設定 > AddQuicktag をクリックします。
メニューに表示されていない場合は、AddQucktagプラグインが有効化になっていないかもしれません。
プラグインの管理画面で有効になっているか確認してみましょう。
AddQuicktagの設定画面が表示されると、こんな感じになります。
スクロールしていくとズラズラっと項目が表示されますが、使う項目は上の方だけで十分だと思います。
ここで設定する項目は以下の通りです。
- ボタン名
- 開始タグ
- 利用箇所のチェック
それ以外にも色々（アクセスキーとかラベル名とか）とありますが、あまり使わないので必要になったら使うくらいでいいと思います。
ボタン名の入力
ボタン名はエディタ（記事の編集画面）で表示される名前です。
太字とかマーカー（赤）とか、自分で使う時に分かりやすいような名前にしておくといいです。
開始タグの入力
ここの入力欄は開始タグの名前を書くための入力欄になります。
開始タグとはなんぞや？と思いますが、これはHTMLタグのことです。
ちょっと話が逸れますが、HTMLははいぱーてきすとまーくあっぷらんげーじというマークアップ言語です。
そのhtmlタグの開始タグをここに入力していきます。
ちなみに、その下にある終了タグの入力欄は基本的に入力しなくてもオッケーです。
（開始タグを元に自動的に補完される）
一見すると開始タグと終了タグのセットだけしか使い道がないような気がします。
が、しかし、、、！
タグのみだけでなく、htmlで記述した要素のかたまりを入力することも可能です。
1<span class="bold marker-yellow">ここに文字を入力する</span>
これはspanタグにcssのboldクラスとmarker-yellowクラスを指定したコードです。
タグのみの入力だけでなく終了タグ込みで記述していますが、こういう使い方もできるようです。
これをまるっと開始タグに入力しておき、投稿エディタで使う時に呼び出せばこの内容が入力されます。
あとは必要に応じて、呼び出した内容のテキストなどを書き換えて使っていきます。
今回のコード例でいえば、ここに文字を入力するという部分を色々な文言に書き換えるというような感じですね。
太字とマーカーのcss
ちょっと余談になりますが、先程のspanタグのcssクラスにはboldとmarker-yellowを指定していました。
cssファイルに追加すれば、太字 + 黄色マーカーのCSSが使えるようになります。
1/* 太字 */
2.bold {
3 font-weight: bold;
4}
5
6/* 黄色のマーカー風 */
7.marker-yellow {
8 background: linear-gradient(transparent 50%, yellow 50%);
9}
WordPressのテーマのcssクラス名と被っている場合は、読み込みの優先順位の関係で有効にならないことがあります。
その時は、cssクラスの名前を重複しないような別の名前にすれば有効になるはずです。
またCSSを追加するファイルによっては管理画面では有効にならず、プレビュー画面でのみ有効になる場合もあります。
WordPressのテーマによっては追加する場所が決まっている場合があるので、そちらに従って追記してみてください。
利用箇所にチェックを入れる
先程入力したボタン名や開始タグがあるところのみぎ隣には、たくさんのチェックボックスが並んでいます。
これはWordPressの中でどの箇所でAddQuicktagを使う（有効にする）かの設定するモノです。
とりあえず、一括で全てにチェックを入れておくといいと思います。
一括チェックは一番みぎにあるこの部分をチェックすればオッケーです。
これでひだり側全てにチェックが入ります。
最後の重要な設定
最後に、、、
ものすごーく重要な設定が残っています、、、！
それは、、、
せっかく設定した内容がムダにならないように、忘れずに保存しておきましょう！
登録したクイックタグを削除する方法
タグの追加は簡単ですが、削除する方法がちょっと分かりづらいのでメモしておきます。
AddQuicktagの設定画面に書いてあるとおり、タグを削除する場合は全ての入力する項目を空にして保存ボタンを押せば、削除することが可能です。
先程サンプルで作ったタグは、ボタン名と開始タグに入力をしましたよね？
その中身を全部バックスペースなどで削除して変更を保存を押せばそのタグの項目が削除されます。
「クラシックエディタ」プラグインの準備
2020年10月現在、GutenbergではAddQuicktagが利用できません。。。
利用するためにはClassicEditor（クラシックエディタ） プラグインを導入する必要があります。
インストール方法は別記事に書いてありますので、まだインストールしていない場合は こちら（準備中） で準備をしましょう！
すでにClassicEditorプラグインをインストール済みの場合は、この章を読み飛ばして次へ進んでください。
GutenbergでAddQuicktagを使う
ここではGutenbergのブロックエディタ上でAddQuicktagを使ってみます。
まずはブロックの追加をするために＋マークをクリックして、クラシックというブロックを探します。
一覧に表示されていない場合はすべて表示をクリックすれば、利用できるブロックが全て表示されるのでそこから探してみましょう！
ちなみに、ブロックの検索から探すことも可能です。
画像のように検索欄にクラシックと入力すれば、バシッと一発で見つけることができるはずです。
これをブロックに追加すると、ちょっと見慣れたブロックが表示されます。
Quicktagsが表示されているので、ここをクリックすると登録したボタン名が表示されます。
これをクリックすると先程開始タグに登録した内容が入力されます。
あとは必要に応じて文言を書き換えていきましょう。
ClassicEditorで使う
今度はClassicEditor（旧エディタ）でAddQuicktagを使ってみます。
ビジュアルエディタ編
投稿エディタではこのように表示されていると思います。
ここでツールバーの切り替えを押します。
そうすると、Quicktagsという項目が表示されるようになるはずです。
という場合は、quicktagsプラグインの有効化、ボタンの登録の2点を確認してみましょう。
特に、AddQuicktagに登録されていないと項目が表示されない、というのは盲点なので要注意です。
その項目をクリックすると登録した太字マーカー（黄）が表示されるので、それをクリックすれば登録したコードが挿入されます。
CSSについては記事をプレビューをすれば、黄色いマーカーっぽく表示されているのが確認できると思います。
テキストエディタ編
今度はテキストエディタモードで使ってみます。
投稿エディタを開くと、これまた先程登録したquicktagsの太字マーカー（黄）が表示されています。
これをクリックすると、登録した内容のコードが表示されるようになります。
こちらはビジュアルエディタと違ってhtmlタグが見えているので、quicktagsに登録した内容がエディタに入力されていることがより分かりやすいですね。
おわりに
今回は、WordPressのAddQuicktagプラグインをGutenbergで使ってみる、という内容でした。
クラシックエディタプラグインを入れる必要がありますが、引き続きGutenbergのWordPressでも使うことが出来るので便利だと思います。
ちなみに冒頭でも書きましたが、Gutenbergの再利用ブロックでもAddQuicktagと似たようなことができます。
こちらの使い方を覚えてしまえば、AddQuicktagプラグインをインストールする必要がなくなります。
プラグインの管理する数が減るので、Gutenbergを使っている場合は再利用ブロックを使ってみてはいかがでしょうか？
それでは、このへんで。
バイナリー！
