ワードプレスの記事作成を効率化する『AddQuicktag』
近年、WordPressの記事編集では『
ブロックエディターはブロックごとにデザインや機能が異なるので、まるでパズルのように記事を組み立てられます。
HTMLやCSSの知識がなくても直感的に操作できるので、ブログ初心者の方でも安心です。
一方『 』はHTMLコードを直接編集できるため、デザインの細かな調整・複雑なレイアウトも自由自在。
中・上級者にとっては、思い通りに記事を仕上げられる頼もしいツールです。
テキストエディターで培ったHTMLの知識は、WordPress以外の環境でも役立ちます。例えば他のブログサービスや、自分で作成したホームページなどにも。
ただしテキストエディターはデザインを細かく調整できる分、自分でコード編集を行う必要があります。ですので『時短』という観点からは中々厳しいものがあるかも知れません。
そんな手作業の多いテキストエディターユーザーのため、執筆欄の上部に短縮ボタンが設置。常用するであろう装飾コードや文言が予め設定されています。
ですが、出来ればここも自分用にカスタムしたくなるもの。
そこで重宝するのが、短縮ボタン作成プラグイン『 』です。
短縮ボタン作成プラグイン『AddQuicktag』の主な機能
は、主に以下の機能を有しています。
- ●
- 見出し・太字・箇条書きなど記事作成で頻繁に使う装飾をボタン一つで挿入できる。タグやショートコードをいちいち入力する必要がなくなり、作業時間を大幅に短縮できます。
- ●
- 『会社概要』『プロフィール』、よく使うフレーズなど記事に何度も挿入する定型文を登録しておけば、呼び出すだけで簡単に挿入できます。コピペの手間から解放され、ミスも減らせます。
- ●
- よく使うショートコードやHTMLコードをボタンとして登録すれば、自分だけのオリジナルエディターを作れます。使い慣れたツールで作業すれば効率もアップし、記事作成がもっと楽しくなります。
この他、拡張コードクイックタグボタンについて』にて解説)。
で、あなただけの快適な記事作成環境を手に入れましょう。
では、早速『AddQuicktag』の導入方法を解説します。
AddQuicktagのダウンロード
まずはWordPress管理画面メニュー左下の『
検索窓に『 』と入力、『 』をクリック。完了後に『 』をクリックします。
に成功すると、メニュー左下の『 』に『 』が追加されていますので、こちらをクリック。
メインとなる『
』のページに移ります。『AddQuicktag』クイックタグの追加と削除
設定の詳細については後ほど解説します。AddQuicktagの基本操作は非常にシンプル。以下の画像を参照しながら、項目をご確認下さい。
番号 | 項目 | 内容 | 推奨設定 |
1 | ボタン名 | ボタン上に表示される名称 | 任意の名称 |
2 | 開始タグ | 『開始タグ』を入力する | 例:<p> |
3 | 終了タグ | 『閉じタグ』を入力する | 例:</p> |
4 | ラベル名 | オンマウス時に設定した副題が表示される | 通常は不要 |
5 | アクセスキー | 『Alt+任意のキー』のショートカットが設定できる (InternetExplorerのみ) |
不要 |
6 | 並び順 | AddQuicktagの設定画面上でのタグの並び順を設定半角英数字を入力 | 通常はそのまま |
7 | 表示するページ | 『固定ページ』『投稿ページ』など、AddQuicktagで設定したボタンを表示するページを選択 | 一番右側をチェック |
のチェックボックスは、右端のチェックのみでOK。自動的に全てのチェックが入ります。
また を設定するとオンマウス時、以下の様に表示されます。
今回は例として、以下の様な簡単な『
』を短縮ボタンに設定します。上図のコードは下記の通り。
<div style="pudding: 10px; border: 2px dotted #000f94; background-color: #f4f6f8;">● これはテストです</div>
このコードを
に入力します。ボタン作成の際、私は何故か『一度目の登録は必ず弾かれる』不具合(?)に。各項目を入力完了後『変更を保存』をクリックしても一度目は必ず弾かれてしまいます。
『開始タグ』『終了タグ』以外が空白に戻っている状態なので、『ボタン名』『ラベル名』『表示するページ』のチェック欄を再度入力。『変更を保存』を再クリックして無事完了といった流れです。
この時、新しく項目を作り直すのではなく『開始タグ』『終了タグ』が残っている枠に『ボタン名』『ラベル名』『表示するページ』を追加する事で登録できます。
今回はボタン名に『
』、ラベル名に『 』と命名しました。短縮ボタンの設定が完了したら、先述『
始めに記事投稿画面より『 』と入力。プレビュー画面には当然そのまま表示されます。
テキストの前にカーソルを合わせ『
』ボタンをクリック。続いて『テスト』ボタンが閉じタグ(タイトル前に『/』)に変わっている事を確認し、記事の後ろにカーソルを移動・挿入します。
プレビューを確認して完了です。
更に効率的な短縮ボタンの活用方法
この他、
テキストが短い場合、こちらの方法が効率的かも(今回はリストタグの例)。この方法を使用する際、以下の点にご注意下さい。
- ●
- 長いテキストに適用すると、ドラッグする範囲を間違えやすいです。 の様な短い箇条書きテキストに限定するのがベスト。
- ●
- 長いテキストの文中に使う事が多い 等にこの方法を使うと、ドラッグする範囲を間違えた際、修正箇所を見つけるのが結構面倒です。
この場合、囲むテキストの前後を確認しながら別々にタグを挿入する方がベストかと思います。
この事を踏まえて活用すれば、テキスト入力が更に快適になるでしょう。
次に、下の『 』の設定に移ります。
デフォルトのクイックタグを非表示にする
ワードプレスには、初期状態でいくつかの短縮ボタンが登録されています。
常用するボタンもありますが、カスタムする上では消したいボタンも。自身が登録したボタンを含め、短縮ボタンが執筆画面の大半を覆ってしまうのは中々なストレスですからね。
『クリア』ボタンは存在せず、項目の内容を削除し『変更を保存』をクリックする事でボタンを削除できます。
初期状態からあるボタンを非表示にするには、AddQuicktagの『 』項目を使用します。
使用方法は、 するのみ。
削除ではなく『 』にするだけなので、後に再表示させたい場合も安心です。
『拡張コードクイックタグボタン』について
記事作成画面にてテキストを入力後、プレビューチェックの際
その原因の一つとして、 事が挙げられます。
例えばHTMLの段落タグ『<』をプレビュー画面で表示するには『 ><』と『 > 』に変換しての入力が必要。
コードに限らず半角英数字の使いどころを間違えてしまうと、ブラウザ側が『不完全なプログラムコード』と判定して表示しない場合もあります。
こういった場合、『 』の『 』ボタンが重宝するかも知れません。
以下より、図解を交えた『設定と使い方の一例』を解説します。
※『pre』ボタンについては別トピックにて解説します。
『HTML Entities』の設定と使い方
まずは項目『
』右端のチェックボックスをONにして『 』をクリック。記事作成画面に『
』ボタンが追加されます。左下の『 』は、変換した特殊文字を元に戻すボタンです。例として、記事作成画面で『<p>が表示されていません。これはブラウザが<p>をコードと認識したためです。
』と入力。プレビュー画面では次に、記事作成画面でテキストをドラッグ(<p>の部分だけでも可)。ここで『<>』の部分を特殊文字に変換。
プレビュー画面では、正常に表示されています。
いったん変換された特殊文字は、同様にドラッグして『
』を選択すると元に戻ります。特殊文字変換が必要となるケースはこの他にもあります。テキストの半角英数字が表示されない時は、まず『
』ボタンを試してみるのも良いかも知れません。短縮ボタンの『インポート』『エクスポート』について
AddQuicktagは、WordPress間で短縮ボタンファイルの一括インポート・エクスポートが可能です。
ですがプラグインのバージョン違い等の理由から、うまくインポートできない事例も散見します。いずれにしても、念のため事前のバックアップは必須なようです。
『Custom Field Template』と連携して更に作業効率アップ!
AddQuicktagは、タグを始めClass要素等を短縮ボタンに登録する事で作業効率が上がる使い勝手の良いプラグイン。
ですが、複雑なテキストを埋め込むと使い勝手が悪くなることがあります。
例えば『 』の場合
- ●
- ●
といった使いづらさが。
こういった場合、『 』との連携がベストです。
複雑な表やPHPコードを含むテキストも、 であれば問題無く動作します。
また作成した表を記事に埋め込む際は、 を挿入するだけでOK。 事もありません。
『
『 』にショートコードを登録すれば、更に作業効率がアップします。
『 』のインストールと設定方法については、以下のリンクをご確認ください。
WordPressで表作成をもっと簡単に!カスタムフィールドを活用しよう WordPressで表を頻繁に作成する方にとって、決まったフォーマットの表を簡単に作成できたら作業効率がグッと上がりますよね。 従来の方法では …