【AddQuicktag】WordPress記事編集に役立つ短縮ボタン作成の超入門

ワードプレスの記事作成を効率化する『AddQuicktag』

　近年、WordPressの記事編集では『ブロックエディター（Gutenberg）』が主流となっています。

　ブロックエディターはブロックごとにデザインや機能が異なるので、まるでパズルのように記事を組み立てられます。

　HTMLやCSSの知識がなくても直感的に操作できるので、ブログ初心者の方でも安心です。

　一方『テキストエディター』はHTMLコードを直接編集できるため、デザインの細かな調整・複雑なレイアウトも自由自在。

　中・上級者にとっては、思い通りに記事を仕上げられる頼もしいツールです。

　テキストエディターで培ったHTMLの知識は、WordPress以外の環境でも役立ちます。例えば他のブログサービスや、自分で作成したホームページなどにも。

　ただしテキストエディターはデザインを細かく調整できる分、自分でコード編集を行う必要があります。ですので『時短』という観点からは中々厳しいものがあるかも知れません。

　そんな手作業の多いテキストエディターユーザーのため、執筆欄の上部に短縮ボタンが設置。常用するであろう装飾コードや文言が予め設定されています。

　ですが、出来ればここも自分用にカスタムしたくなるもの。

　そこで重宝するのが、短縮ボタン作成プラグイン『AddQuicktag（アド・クイック・タグ）』です。

短縮ボタン作成プラグイン『AddQuicktag』の主な機能

　AddQuicktagは、主に以下の機能を有しています。

● 手間のかかる装飾をボタン一つで完了

見出し・太字・箇条書きなど記事作成で頻繁に使う装飾をボタン一つで挿入できる。タグやショートコードをいちいち入力する必要がなくなり、作業時間を大幅に短縮できます。

● 定型文を瞬時に挿入

『会社概要』『プロフィール』、よく使うフレーズなど記事に何度も挿入する定型文を登録しておけば、呼び出すだけで簡単に挿入できます。コピペの手間から解放され、ミスも減らせます。

● オリジナルボタンを作成して自分だけのエディターに

よく使うショートコードやHTMLコードをボタンとして登録すれば、自分だけのオリジナルエディターを作れます。使い慣れたツールで作業すれば効率もアップし、記事作成がもっと楽しくなります。

　この他、ブラウザに表示できない半角英数字を特殊文字に変換・表示させるボタンも設定できます（後述『拡張コードクイックタグボタンについて』にて解説）。

　AddQuicktagで、あなただけの快適な記事作成環境を手に入れましょう。

　では、早速『AddQuicktag』の導入方法を解説します。

AddQuicktagのダウンロード

　まずはWordPress管理画面メニュー左下の『プラグイン』から『新規プラグインを追加』を選択します。

　検索窓に『addquicktag』と入力、『今すぐダウンロード』をクリック。完了後に『有効化』をクリックします。

　有効化に成功すると、メニュー左下の『設定』に『AddQuicktag』が追加されていますので、こちらをクリック。

　メインとなる『クイックタグの追加と削除』のページに移ります。

『AddQuicktag』クイックタグの追加と削除

　設定の詳細については後ほど解説します。AddQuicktagの基本操作は非常にシンプル。以下の画像を参照しながら、項目をご確認下さい。

⑤『アクセスキー』は、IE（InternetExplorer）のみで機能するようです。

⑦『表示するページ』のチェックボックスは、右端のチェックのみでOK。自動的に全てのチェックが入ります。

　また ④『ラベル名』を設定するとオンマウス時、以下の様に表示されます。

　今回は例として、以下の様な簡単な『囲みタグ』を短縮ボタンに設定します。

　上図のコードは下記の通り。

<div style="pudding: 10px; border: 2px dotted #000f94; background-color: #f4f6f8;">● これはテストです</div>

　このコードをAddQuicktagに入力します。

MEMO
　ボタン作成の際、私は何故か『一度目の登録は必ず弾かれる』不具合(?)に。各項目を入力完了後『変更を保存』をクリックしても一度目は必ず弾かれてしまいます。

『開始タグ』『終了タグ』以外が空白に戻っている状態なので、『ボタン名』『ラベル名』『表示するページ』のチェック欄を再度入力。『変更を保存』を再クリックして無事完了といった流れです。

　この時、新しく項目を作り直すのではなく『開始タグ』『終了タグ』が残っている枠に『ボタン名』『ラベル名』『表示するページ』を追加する事で登録できます。

　今回はボタン名に『テスト』、ラベル名に『Test』と命名しました。

　短縮ボタンの設定が完了したら、先述『囲みタグ』を試してみましょう。

　始めに記事投稿画面より『● これはテストです』と入力。プレビュー画面には当然そのまま表示されます。

　テキストの前にカーソルを合わせ『テスト』ボタンをクリック。

　続いて『テスト』ボタンが閉じタグ（タイトル前に『/』）に変わっている事を確認し、記事の後ろにカーソルを移動・挿入します。

　プレビューを確認して完了です。

更に効率的な短縮ボタンの活用方法

　この他、テキストをドラッグし短縮ボタンをクリック、『開始タグ』『終了タグ』を一回の操作で適用する方法もあります。テキストが短い場合、こちらの方法が効率的かも（今回はリストタグの例）。

　この方法を使用する際、以下の点にご注意下さい。

● 短いテキストのみに限定する

長いテキストに適用すると、ドラッグする範囲を間違えやすいです。リストタグ（<li>～</li>）の様な短い箇条書きテキストに限定するのがベスト。

● <span>タグには使用しない

長いテキストの文中に使う事が多い<span>タグ等にこの方法を使うと、ドラッグする範囲を間違えた際、修正箇所を見つけるのが結構面倒です。

　この場合、囲むテキストの前後を確認しながら別々にタグを挿入する方がベストかと思います。

　この事を踏まえて活用すれば、テキスト入力が更に快適になるでしょう。

　次に、下の『デフォルトのクイックタグを非表示にする』の設定に移ります。

デフォルトのクイックタグを非表示にする

　ワードプレスには、初期状態でいくつかの短縮ボタンが登録されています。

　常用するボタンもありますが、カスタムする上では消したいボタンも。自身が登録したボタンを含め、短縮ボタンが執筆画面の大半を覆ってしまうのは中々なストレスですからね。

　自身で登録した短縮ボタンに関しては、項目の内容を空白にすることで削除が可能。『クリア』ボタンは存在せず、項目の内容を削除し『変更を保存』をクリックする事でボタンを削除できます。

　初期状態からあるボタンを非表示にするには、AddQuicktagの『デフォルトのクイックタグを非表示にする』項目を使用します。

　使用方法は、非表示にしたい短縮ボタンの一番右側のボックスにチェックを入れ『変更を保存』をクリックするのみ。

　削除ではなく『非表示』にするだけなので、後に再表示させたい場合も安心です。

『拡張コードクイックタグボタン』について

　記事作成画面にてテキストを入力後、プレビューチェックの際半角英字（英数字）が消える・勝手に改行されるといった現象が起こる事はないでしょうか？

　その原因の一つとして、テキスト内に直接入力できない半角英数字を使用してしまっている事が挙げられます。

　例えばHTMLの段落タグ『<p>』をプレビュー画面で表示するには『&lt;p&gt;』と『特殊文字』に変換しての入力が必要。

コードに限らず半角英数字の使いどころを間違えてしまうと、ブラウザ側が『不完全なプログラムコード』と判定して表示しない場合もあります。

　こういった場合、『拡張コードクイックタグボタン』の『HTML Entities』ボタンが重宝するかも知れません。

　以下より、図解を交えた『設定と使い方の一例』を解説します。

※『pre』ボタンについては別トピックにて解説します。

『HTML Entities』の設定と使い方

　まずは項目『htmlentities』右端のチェックボックスをONにして『変更を保存』をクリック。

　記事作成画面に『HTML Entities』ボタンが追加されます。左下の『Decode HTML』は、変換した特殊文字を元に戻すボタンです。

　例として、記事作成画面で『段落タグは<p>です。』と入力。プレビュー画面では<p>が表示されていません。これはブラウザが<p>をコードと認識したためです。

　次に、記事作成画面でテキストをドラッグ（<p>の部分だけでも可）。ここで『HTML Entities』ボタンをクリックすると、『<>』の部分を特殊文字に変換。
　プレビュー画面では、正常に表示されています。

　いったん変換された特殊文字は、同様にドラッグして『Decode HTML』を選択すると元に戻ります。

　特殊文字変換が必要となるケースはこの他にもあります。テキストの半角英数字が表示されない時は、まず『HTML Entities』ボタンを試してみるのも良いかも知れません。

短縮ボタンの『インポート』『エクスポート』について

　AddQuicktagは、WordPress間で短縮ボタンファイルの一括インポート・エクスポートが可能です。

　ですがプラグインのバージョン違い等の理由から、うまくインポートできない事例も散見します。いずれにしても、念のため事前のバックアップは必須なようです。

『Custom Field Template』と連携して更に作業効率アップ！

　AddQuicktagは、タグを始めClass要素等を短縮ボタンに登録する事で作業効率が上がる使い勝手の良いプラグイン。

　ですが、複雑なテキストを埋め込むと使い勝手が悪くなることがあります。

　例えば『表』の場合

• ● 展開したコードで編集画面が見づらくなる
• ● 入力個所が探しづらい

　といった使いづらさが。

　こういった場合、『カスタムフィールドテンプレート』との連携がベストです。

　複雑な表やPHPコードを含むテキストも、カスタムフィールドテンプレートであれば問題無く動作します。

　また作成した表を記事に埋め込む際は、ショートコードを挿入するだけでOK。記事編集画面がコードだらけで見づらくなる事もありません。

『カスタムフィールドテンプレート』で表など複雑なテンプレートを作成。

『AddQuicktag』にショートコードを登録すれば、更に作業効率がアップします。

『カスタムフィールドテンプレート』のインストールと設定方法については、以下のリンクをご確認ください。