15 Shares

AddQuicktagによく使うタグを登録して記事作成の効率を上げよう

キーボード

WordPress の管理画面から記事を書く場合、エディタに標準装備されているボタンを使って見出しの設定や文字の装飾ができますよね。

しかし、なかにはまったく使わないボタンもあるんじゃないでしょうか。逆に、オリジナルの CSS があるときは専用ボタンがほしくなると思います。

そこでAddQuicktag を使ってボタンを自分好みに変えてしまいましょう。記事を書くスピードが格段に上がりますよ!

それでは、設定方法と使い方を解説していきます。

AddQuicktag設定画面解説

インストールは公式サイトからプラグインファイルをダウンロードするか、管理画面の「プラグイン」から検索して行います。

AddQuicktag インストール

インストールが終わったら、忘れずに「有効化」しておきましょう。

有効化後、管理画面の「設定」に「AddQuicktag」が追加されます。ここから設定画面に入りましょう。

AddQuicktag設定

クイックタグの追加と削除

最初に「クイックタグの追加と削除」が出てきました。ここでタグを登録しておけば、投稿画面にボタンが表示される仕組みです。

クイックタグの追加と削除

Remove Core Quicktag buttons

その下には「Remove Core Quicktag buttons」という項目があります。ここで標準装備されているボタンを消すことができるので、要らないものはチェックしておきましょう。

Remove Core Quicktag buttons

Enhanced Code Quicktag buttons

つづいて「Enhanced Code Quicktag buttons」という項目が出てきます。

Enhanced Code Quicktag buttons

pre は、記事内でも <imag> のようにタグをそのまま表示させたいときに使うボタンです( < を &lt; のように置換してくれます)。

htmlentities はその逆ですね。

詳細は 文字参照の解説記事 をごらんください。

AddQuicktagが使える場所

チェックマークをいれる「post」や「page」は、どこで AddQuicktag のボタンを表示させるか、という設定です。

ビジュアルエディター 投稿画面・固定ページのビジュアルモード
post 投稿画面のテキストモード
page 固定ページのテキストモード
attachment メディア編集ページ(※1)
comment 管理画面のコメント返信
edit-comments 管理画面のコメント編集
widgets ウィジェット(※2)

カスタム投稿タイプを使っている場合は、functions.php に以下を追記すれば OK です。

※ 1

メディア編集ページは「添付ファイルのページ」を編集するものです。記事内に画像を追加するさい、「リンク先」に出てくるあれです。

添付ファイルのページ

自動生成されるページですが、通常は使わないと思います。

※ 2

ウィジェットエリアでビジュアルエディターを使うには、別途 WP Editor Widget というプラグインが必要です。

インストールすると、利用できるウィジェットに「Rich Text」が追加されます。

ウィジェット-リッチテキスト

エクスポートとインポート

一番下には「エクスポート」と「インポート」の項目があります。

エクスポートとインポート

バックアップしたいときや複数サイトで使いたいときは、この機能を使いましょう。

さらさらりさんが Gush2 専用のファイルを作成・配布してくれています!

Gush2 専用 AddQuicktag

タグの登録方法

実際にタグを登録してみましょう。

おしゃれな強調文字 で使用した .sample08 を使ってみたいと思います。

ボタン名とラベル名

「ボタン名」はそのままボタンの名前で、「ラベル名」はマウスオーバーしたときに出てくる説明文です。

ボタン名とラベル名

エクスポートファイルを配布したり、複数人で運営しているときはラベル名があると親切ですね。

開始タグと終了タグ

つぎは「開始タグ」と「終了タグ」です。

開始タグと終了タグ

今回使用するのは strong なので、以下のように入力します。

開始タグ <strong class=”sample08″>
終了タグ </strong>

これで特定の文字列を選択してボタンを押せば、自動的にタグで囲まれるというわけです。

なお、定型文を登録することもできます。この場合はすべて「開始タグ」にいれておきましょう。

Twitter アカウントへのリンクやショートコードを登録しておくと、ボタン一発で呼び出せるので便利だと思います。

アクセスキーと順番

最後はアクセスキーと順番を入力すれば終わりですが、必須項目ではないのでとくに設定しなくてもかまいません。

アクセスキーと順番

「Access Key」というのはショートカットキーのことです。が、サポートフォーラムや Codex を見ていろいろ試したものの動きませんでした。どうやって使うんでしょう…?

あまり知られていませんが、WordPress ではいくつかのショートカットキーが用意されています。

たとえば Windows なら、「Alt」+「Shift」+「a」でリンク挿入ができます。

参考キーボードショートカット(Codex)

「順番」は、エディタの上に並べるボタンの順番を指定するものです。空白のまま登録すると、登録順でボタンが並びます。

ボタンを使う場所をチェック

最後は、どこで使うかの指定です。

AddQuicktagボタン登録

とりあえず全部チェック! でも問題ありませんが、記事と固定ページで使用するだけなら以下の 3 つをチェックしておきましょう。

  • ビジュアルエディター
  • post
  • page

チェックマークがひとつも入っていないとボタンが表示されないので注意してくださいね。

登録が終わったら、「変更を保存」で完了です。

AddQuicktag登録完了

登録したタグを削除する方法

タグを削除する方法は設定画面上部にも説明があるとおり、各項目の記述をすべて消して「変更を保存」します。

各項目を削除して変更を保存する

各項目を削除して変更を保存する

なお、右のチェックマークは外さなくても大丈夫です。

AddQuicktagの使い方

登録が終わったので、投稿でボタンを使ってみましょう。

使い方は標準ボタンと同じです。

ビジュアルモードでは「Quicktags」という選択欄が追加されていて、ここから登録したタグを呼び出せます。

AddQuicktagビジュアルモード

テキストモードでは、ボタンで表示されています。

AddQuicktagテキストモード

テキストを選択して適用する方法

ボタンの使い方は 2 通り。

ひとつめは、テキストを選択してからあとから適用する方法です。

まずはテキストを入力して選択。

テキスト選択

そのまま「Quicktags」から「強調」をクリック。

Quicktags選択

選択したテキストが太字になりました。

テキストが太字になった

エディタ上では蛍光ペンが表示されていませんが、プレビューで確認してみるとちゃんと反映されていますね!

プレビューで確認

CSS をビジュアルエディタでも反映させる場合は add_editor_style を使います。

参考関数リファレンス/add editor style(Codex)

先にボタンを押してテキストを入力する方法

ふたつめは、先にボタンを押してからテキストを入力する方法です。

「Quicktags」から「強調」をクリック。

Quicktags選択

ビジュアルモードの場合、下に p » strong と表示されます。

p >> strong

そのままテキストを入力すると、強調文字になります。

強調文字入力

テキストモードの場合は、ボタンをクリックすると開始タグのみ挿入され、ボタンはスラッシュがついた終了タグに切り替わります。テキストを入力したら、再度ボタンを押しましょう。

ボタンが終了タグに切り替わる

効率良く作業するなら、まず本文をだーっと書いて、あとから装飾したほうが良いと思います。

いちいちプレビューで確認しながら記事を書いているとなかなか進みませんからね。。。

まとめ

装飾は標準装備のボタンで十分! という場合でも、定型文やショートコードを登録しておけば執筆がかなり楽になります。

ちなみに「開始タグ」に登録できる文字数に制限はありません。アドセンスのコードを丸ごと登録しておく、なんていうことも可能です。

ぜひ AddQuicktag でオリジナルボタンを作ってみてください。

それでは、また。