よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

  • 14897
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WordPressでブログを書く上で、<strong> や<code>、<img>、<!–more–> などのタグを利用することも多いと思います。

記事の投稿画面では、上記のような基本的なタグは「ボタン」として最初から用意されていますが、「頻繁に使う他のタグもここに置きたい!」という場合に便利なプラグインが AddQuicktag です。

例えば、AddQuicktag の設定画面で <pre> タグを登録しておくと、記事の投稿画面に <pre> タグ挿入用のボタンが新たに追加される、という感じです。

タグの他に「ショートコード」なども登録できますので、頻繁に使うコードを AddQuicktag で管理しておくことで記事の編集が捗ります。

なお、AddQuicktag はカスタム投稿タイプには対応していないので、今回はその辺りの対応方法も含めて紹介致します。

AddQuicktag のインストール

管理画面のプラグイン新規追加より AddQuicktag を検索するか、以下のページからプラグインファイルをダウンロードします。


AddQuicktag で「タグ」を登録

AddQuicktag プラグインを有効化し、設定画面へ移動します。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

よく使うタグなどを登録できますので、試しに <pre> タグ挿入用のボタンを作ってみます。

ボタン名やラベル名、開始と終了タグを入力し、投稿画面にボタンを表示させるのであれば「post」、固定ページであれば「page」にチェックを入れます。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

「変更を保存」ボタンをクリックして投稿ページに遷移すると、今回作った <pre> タグ用のボタンが追加されています。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

不要なタグを消す時は、テキストボックスやチェックボックスを空値にして「変更を保存」ボタンをクリックします。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

AddQuicktag で「ショートコード」を登録

AddQuicktag は「ショートコード」も登録できますので、例として お問い合わせメールフォーム(Contact Form 7)のショートコードを入れてみます。

タグと異なり、ショートコードの場合は「終了タグ」は不要です。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

投稿画面に遷移すると「フォーム」のボタンが現れます。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

「フォーム」ボタンをクリックすると、ショートコードが貼付けられます。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

「ビジュアルエディタ」にも対応

ビジュアルエディタに対応する場合は、「ビジュアルエディター」にチェックを入れます。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

ビジュアルエディタ拡張用のプラグイン「TinyMCE Advanced」を使うか、「全ツール表示切り替え」ボタンをクリックすることで「Quicktags」のボタンが出てきます。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

「カスタム投稿タイプ」にも対応させる

AddQuicktag は投稿や固定ページ、コメント編集には対応していますが、カスタム投稿タイプには対応していません。

そこで functions.php を編集してカスタム投稿タイプでもAddQuicktag を利用できるようにします。
//カスタム投稿タイプ「items」のAddQuicktag設定
add_filter( 'addquicktag_post_types', 'my_addquicktag_post_types' );
function my_addquicktag_post_types( $post_types ) {
    $post_types[] = 'ポストタイプ名';
    return $post_types;
}
※$post_types[] = ‘ポストタイプ名’; はご利用環境に合わせてカスタム投稿タイプ名を入れてください。

管理画面に戻ると、AddQuicktag のページに以下のようなカラムが出現します。
以下は、functions.php で $post_types[] = ‘sample’; にした場合のサンプルです。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

AddQuicktag のカラム(表示項目)を制御

AddQuicktag を複数のカスタム投稿タイプに対応させたり、コメントのカラムは不要なので消す、なんて場合は functions.php を以下のように編集します。
add_filter( 'addquicktag_post_types', 'my_addquicktag_post_types' );
function my_addquicktag_post_types( $post_types ) {
	//複数カスタム投稿タイプに対応して、コメントのカラムを消す
	$post_types = array('post','page','ポストタイプ名1','ポストタイプ名2');
    return $post_types;
}

試しに「ポストタイプ名2」を「sample2」にしてやってみたところ、カスタム投稿タイプの投稿画面でも正常に <pre> タグ挿入ボタンが現れました。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

タグボタンもちゃんと効いてます。
よく使うタグやショートコードを登録して、投稿画面で自動入力できるプラグイン「AddQuicktag」

独自のクラスを持たせたタグ(例えば、文字を赤色にしたい場合の <span class=”red”></span>など)も登録できます。

ブログやサイトに合わせて AddQuicktag に必要なタグをどんどん登録すれば、記事の編集が楽になりますね。

  • 14897
    views
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

この投稿と関連する記事一覧

この記事に関するコメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください