AddQuicktagは、予め任意のコードを登録することで、記事内に簡単に登録したコードを挿入することができます。
一度登録すれば再編集、削除しない限り、何度でも使えますし、他の記事にも使えるようになるのでかなり便利な機能ですね。
クラシックエディタを利用しているのであれば、ぜひインストールしてほしいプラグインです。
AddQuicktagはHTML エディター・ビジュアルエディターへのクイックタグの追加を容易にします。クイックタグの設定をJSONファイルとしてエクスポートすることが可能です。エクスポートしたファイルは他の WordPress にインポートすることができます。
https://ja.wordpress.org/plugins/addquicktag/
AddQuicktagは、予め任意のコードを登録することで、記事内に簡単に登録したコードを挿入することができます。毎回HTMLやCSSコードを入力しなくても良くなるのでかなり便利な機能です！
一度登録すれば再編集、削除しない限り、何度でも使えますし、他の記事にも使えるようになるのでかなり便利な機能ですね。
クラシックエディターを利用しているのであれば、ぜひインストールしてほしいプラグインです!
クラシックエディターに関しては前回紹介しておりますので、そちらもご参考下さい！
インストールと設定
インストール
ダッシュボード > プラグイン 新規追加から「AddQuicktag」を検索し「今すぐインストール」をクリック。インストール完了後「有効」をクリック。
設定
任意のソースコードをAddQuicktagに登録する必要があります。
ダッシュボードの「設定」から「AddQuicktag」をクリック
AddQuicktagが表示されます。
ここでは例として、文字の大きさと色を設定してましょう。
設定するソースコードは<span class=”fsl_fcr”></span>になります。
開始タグに<span class=”fsl_fcr”>を入力し、終了タグに</span>を入寮します。
ボタン名には自分でわかりやすい名前を設定しましょう。ここでは「大きい赤文字」としています。右側のチェックボックス全てにチェックを入れて「変更を保存」をクリック。
AddQuicktagでの設定はこれでOKです。他にも追加したいクイックタグがあればどんどん追加していってください。
CSSの設定
AddQuicktagで登録してもCSSを設定していないのでは意味がありません。
任意のCSSを追加していきましょう。
外観 > カスタマイズ をクリック
追加CSSをクリック
先程クラス名を「fsl_fcr」としたので「fsl_fcr」のCSS設定をします。
下記のCSSコードを追加CSSに記述し「公開」をクリックします。
.fsl_fcr {
font-size: 30px; /*文字の大きさ*/
color: #ff0000; /*文字の色*/
}
これでOKです。
それでは記事投稿でテストしてみましょう！
記事投稿での使用方法
ブロックエディターで使う場合は「クラシック」のブロックが必要になります。
クラシックをクリックし、ブロックを表示させます。
ツールバーに「Quicktags」というツールが追加されていますのでそちらをクリックすると、先程追加した「大きい赤文字」が表示されているかと思います。
あとは反映させたい文章を選択し、Quicktagsから大きい赤文字をクリックすればOKです。
編集画面ではそのままですが、プレビューを見てみると先程設定したCSSが反映されているかと思います。
HTML編集で見るとわかりやすいかと思いますが、
AddQuicktagで設定したソースが追加されているのが分かるかと思います。
AddQuicktagはブロックエディターではなくクラシックエディターで利用することを前提に作られているプラグインですので、本来の活躍の場はクラシックエディターになるかと思います。
クラシックエディター
クラシックエディターでの編集画面を少しご紹介します。
ビジュアルタブの場合は段落下あたりにQuicktagsがあるので、そちらをクリックすると設定した「大きい赤文字」が表示されます。
テキストタブの場合は「大きい赤文字」のツールが追加されます。
使い方はブロックエディター同様に、反映させたい文字を選択して「（ここでは）大きい赤文字」をクリックすればOKです。
editor-style.cssにCSSを追加していないので、ビジュアルタブで見ても反映はされておりません。ですがテキストタブを確認するとソースが追加されております。
ビジュアルタブでCSSを反映させたい場合は「editor-style.css」にカスタマイズで追加したCSSをコピーする必要があります。
ただ、お使いのテンプレートやテーマが更新されると、editor-style.cssも更新される可能性がありますのでご注意ください。
最後に
如何でしたか？
今回は自分で設定したHTMLを挿入することが出来るAddQuicktagをご紹介させて頂きました。
今までのプラグインと違い、HTMLやCSSといった少し専門的な知識が必要になりますが、かなり便器な機能を追加出来るプラグインだと思っています。
私は実際に他のブログはクラシックエディターで運用しているので、AddQuicktagは必ずといっていいほどお世話になっているプラグインです。
もし貴方がクラシックエディターを利用していて、HTMLやCSSをルール化したいと言う方はインストールを検討してみては如何でしょうか？
