ワードプレス(WordPress)の投稿ページや固定ページの作成じに利用するショートコードや、タグ、文章のボタンを作成して記事作成の効率を上げてくれるプラグイン AddQuicktag を解説します。
- AddQuicktagの使い方と設定方法がわかります
- 長いコードやタグを挿入できるボタンの作成方法がわかる
AddQuicktagで実現できること
AddQuicktagプラグインを入れると実現できることは主に次の2つです。
記事作成スピードが上がる
- 長いショートコードやタグ、定型文を入力できるボタンを作成できるので入力作業が効率化できる
長いHTMLコードもでワンクリックで記事に挿入することができるようになるので作業効率が上がります。
AddQuicktagのインストール方法
AddQuicktagプラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”AddQuicktag”と入力すると下に検索結果が表示されます
- ”AddQuicktag”の「今すぐインストール」ボタンをクリックします
“AddQuicktag”のインストール完了画面↑AddQuicktagのインストールが完了すると有効化ボタンが表示されるのでクリックします。
“AddQuicktag”を有効化すると表示される画面これでAddQuicktagのインストールと有効化は完了です。
AddQuicktagの設定と使い方
AddQuicktagをインストールして有効化した後はタグやショートコード、定型文をボタンに設定します。
AddQuicktagの設定
AddQuicktagの設定画面はダッシュボード(管理画面)の設定の中にある「AddQuicktag」です。
WordPressのダッシュボード(管理画面)↑AddQuicktagの設定画面はWoredPressのダッシュボード(管理者画面)の「設定」内の「AddQuicktag」をクリックします。
AddQuicktagは4つの設定項目がある
AddQuicktagには新規のタグやコードをワンクリックで挿入できるボタンを作る機能を含めて4つの設定項目があります。
- タグやコードをワンクリックで挿入できるボタンを作成
- デフォルトのボタンを非表示にする
- preコードやエスケープ文字を挿入できる拡張コードボタン
- 他のブログサイトのAddQuicktagの設定をエクスポート・インポートする機能
これらの項目は1つの設定画面内に収まっています。
次項で各項目を解説しますが、実際に利用頻度が多いのは❶のボタン作成です。
ショートコードのボタン設定と編集画面でのボタンの利用方法を後述しています。
①タグやコードをワンクリックで挿入できるボタンを作成
AddQuicktag設定のクイックタグの追加と削除画面各項目の意味は下記のとおりです。太文字は必須設定
- ボタン名
ボタンに付ける名前 - ダッシュアイコン
ボタン名の前にアイコンを付けることができる - ラベル名
マウスカーソルをフォーカスした時に表示される説明文 - 開始タグ
HTMLの開始タグやショートコード、定型文を入力 - 終了タグ
HTMLタグの終了タグを入力※ショートコードや定型文には終了タグの入力は不要 - アクセスキー
Altキーと登録したアクセスキーでショートカットキーを作成できるがChromeでは動作しない - 並び順
登録した順にプルダウンメニューに表示されるが、当項目に番号を入力することで任意の順番に並び替えることができる - ボタンの表示場所
作成したボタンを表示する箇所を指定できます。
右端のチェックボックスにチェックマークを入れると全ての項目にチェックマークがはいります - すべての項目に入力した後に変更を保存ボタンを押すと設定が反映されます
❶ボタン名と➍開始タグの2つは必ず入力します。
❺終了タグはHTMLタグ以外のショートコードや文章には不要です。
➏アクセスキーはInternet Explorer以外のWebブラウザでは使用できないので設定不要です。
➐良くつかうボタンは若い番号を指定するとプルダウンメニューの上に表示されます。
➑ボタンの表示場所は右端のチェックボックスにチェックマークを入れて全ての箇所に表示させます。
➒変更を保存を最後に押してボタンの新規作成は完了です。
➁デフォルトのボタンを非表示
AddQuicktag設定のデフォルトのクイックタグを非表示にする画面↑この表には初期設定でテキストエディタに既に存在しているボタンの一覧が表示されているので、不要なボタンにチェックマークを入れることで非表示にすることができます。
③preコードやエスケープ文字を挿入できる拡張コードボタン
AddQuicktag設定の拡張コードクイックタグボタン画面↑記事にHTMLタグの改行タグ等を記載したい場合は勝手に改行に変換してタグ自体を記述することができません。その場合は改行タグ<pre>タグで囲むことで改行コードを文字列として表示させることができます。その<pre>タグを挿入してくれるのがpreボタンです。
記事内に「<」や「”」を表示させたい場合、編集画面でそのまま入力しただけでは勝手に変換されるので表示されません。その場合はエスケープ文字を挿入することで表示することができます。そのエスケープ文字を挿入するのがhtmlentitiesボタンです。
④AddQuicktagの設定をエクスポート・インポート
AddQuicktag設定のエクスポート・インポート画面別のブログサイトで使っていたAddQuicktagのボタン設定をエクスポートし、違うブログサイトにインポートすることで設定の移植ができます。
設定をエクスポート・インポートする方法は簡単です。
移植元のブログサイトでエクスポートファイルのダウンロードボタンを押してファイルを保存します。
次に移植先のブログサイトで先ほどのエクスポートファイルをファイルを選択ボタンを押して指定した状態で、隣のファイルのアップロード・インポートボタンを押すだけです。
AddQuicktagの使い方
ショートコードをボタンに登録する方法と実際の編集画面でボタンの使い方を解説します。
WordPressのテーマ「JIN」オリジナルアイコンのショートコードを登録する方法です。
AddQuicktag設定のクイックタグの追加と削除画面各項目に入力した値は次のとおりです。
- JINアイコン(内部リンク)
- dashicons-admin-links
- JINアイコン(内部リンク)
- [jin_icon_link]
- 右端のチェックボックスに☑を入れる
最後に変更を保存ボタンを押します。
今回作成するボタンはショートコードなので終了タグは不要です。HTMLタグの場合は必要です。
アイコン一覧画面
➋dashicons-admin-linksのダッシュアイコンは直接テキスト入力して良いのですが右側の青いボタンをクリックするとアイコン一覧から選択できます。
ダッシュアイコンの一覧画面編集画面でのボタンの使い方
投稿ページ編集画面↑投稿ページの編集画面にQuicktagが表示されているのでクリックすると前項で作成したJINアイコン(内部リンク)が表示されるので、マウスカーソルを合わすと、その下にラベル名が表示されます。
ショートコードを入力する箇所を選択した状態でQuicktagのJINアイコン(内部リンク)をクリックするとショートコードが挿入されます。
投稿ページ画面にショートコードが挿入される以上でAddQuicktagのボタンの設定と使い方です。
HTMLタグや定型文もまったく同様の手順で設定し使うことが可能です。
まとめ
AddQuicktagは記事の生産性を高めることができる非常に便利なプラグインです。
WordPressのテーマに元々備わっているツールバーにあるボタンだけでは足らずに、ショートコードやHTMLタグを入力する場面は必ず訪れます。
そんな時こそ、AddQuicktagプラグインの真価を発揮する場面です。
ブログサイトの記事を作成するのに良く使うコードや定型文は片っ端からAddQuicktagのボタンで挿入できるように設定しておくと、コードを入力する時間が不要になるので時短に大きく貢献してくれます。
言い換えるとAddQuicktagはショートカット機能を実装するプラグインとも言えます。
ツールバーを改善するプラグインの中でも1、2を争うほどの便利さなので導入することをおすすめします。
併せてツールバーのボタンを増やすことができる「Advanced Editor Tools」プラグインも導入することをおすすめします。
「Advanced Editor Tools」の詳しい解説はこちらの記事を参考にしてください↓
Advanced Editor Tools 記事編集画面のツールバーをカスタマズするプラグイン 設定方法と使い方
