vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

WordPressに「AddQuicktag」を導入してタグ入力を楽チンに!

      2015/10/11

LINEで送る
Pocket

wp-addquicktag
こんにちは、okutani(@okutani_t)です。WordPressで記事を書いていると、見出しでh2タグやh3タグ等をよく使うと思います。その際、いちいち手入力で<h2></h2>と打つのはめんどうだし、辛いですよね。

そんなときはAddQuicktagプラグインを導入してみましょう。ボタンひとつで設定したタグが簡単に記事内に挿入されて「非常」に便利です(本当に便利です)。

私はこのAddQuickTagがないと記事が書けないぐらい、かなり頻繁に使っています。

また、タグを挿入する以外にも+αの機能があるので、本記事で合わせてご紹介したいと思います。

では、さっそくAddQuicktagを導入してみましょう。

スポンサーリンク

AddQuicktagの導入

ダッシュボードから「プラグイン」→「新規追加」を選択します。

wp-plugin-install

右上の検索バーに「AddQuicktag」と入力して検索、「いますぐインストール」をクリック。

wp-addquicktag

インストールが完了したら「プラグインを有効化」を選択しましょう。

wp-addquicktag2

これでAddQuicktagの導入が完了しました。では、AddQuicktagに使いたいタグをどんどん設定していきましょう。

AddQuicktag設定方法

AddQuicktagを利用して、使いたいタグを設定していきます。

利用したいタグを設定する

管理画面から「設定」→「AddQuicktag」でAddQuickTagの設定画面を開きます。

wp-addquicktag3

「クイックタグの追加と削除」に設定を記述していきましょう。値は次のように入力します。

  • ボタン名
  • 記事投稿時に表示される名前

  • ラベル名
  • タグの説明です。未入力でもOK

  • 開始タグ&終了タグ
  • タグの開始と終了をそれぞれ入力します。開始タグのみでもOK

  • 順番
  • タグを表示する順番を入力

私は設定していませんが、「アクセスキー」はIEで使えるショートカットで、「Alt」+「アクセスキー」で簡単に入力できるようになります。お好みで設定してください。

h2タグを設定する場合は下記の通りです。入力が終わったら、一番右端のチェックをクリックします。

wp-addquicktag4

入力が終わったら「変更を保存」ボタンをクリックして反映させましょう。

設定の確認

設定が反映されたか確認してみます。記事作成画面を開きましょう。

wp-addquicktag5

h2ボタンを2回クリックすることで、h2タグをかんたんに記事内に入力することができました。

また、囲いたい文字を範囲指定してボタンを押すことで、先頭とおしりにまとめてタグを挿入することもできます。

既にあるタグボタンを非表示にする

AddQuicktagプラグインでは、既にWordPress側で用意してあるあるタグボタンを非表示にできる機能が備わっています。先ほどの設定画面にある「Remove Core Quicktag buttons」から設定してみましょう。

wp-addquicktag6

このように、削除したいタグの一番右端のチェックをクリックし、「変更を保存」ボタンを押せばデフォルトのタグを非表示にすることができます。

wp-addquicktag7

普段よく使うボタンだけを配置するようにすれば、今までより記事を書くスピードがアップすること間違いなしですね。

次の項目で、+αのおまけ項目を設定してみましょう。

HTMLタグ変換ボタンを追加

記事内でHTMLタグをそのまま表示させたい場合があるかと思います。その際、入力文字がタグとして認識されてしまい、うまく表示できない場面に出くわします。

記事内でタグをそのまま表示できるように変換する機能が、AddQuicktagには備わっています。利用してみましょう。

先ほどの設定画面から「Enhanced Code Quicktag buttons」項目の「htmlentities」右端にチェック、「変更を保存」をクリックします。

wp-addquicktag8

記事作成画面を開いてみると、「HTML entities」「Decode HTML」ボタンが追加されています。

変換したいタグを範囲指定して、HTML entitesボタンを押すと、記事で表示できる形に変換されます。逆に、Decode HTMLボタンを押すと、元の形に変換してくれます。

wp-addquicktag9

投稿して確認してみます。

wp-addquicktag10

そのままでは表示できなかったHTMLタグが記事内で表示できました。タグの説明がしたい場合なんかに使えるのではないでしょうか。

AddQuicktagの導入と設定は以上です。お疲れ様でした。

まとめ

普段使うタグは積極的に追加して、いらないタグはどんどん非表示にしていきましょう。かなり使い勝手がよくなるかと思います。

HTMLタグの変換挿入は、地味に便利なので有効化しておくことをオススメします。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
プチ技として、自分のtwitterやfacebookのリンクをタグボタンとして登録しておけば、ワンクリックで好きな場所にリンクを貼ることができます。お試しあれ。

 - WordPressプラグイン

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

All in One SEO PackのXML Sitemapで最低限行うべき設定項目

こんにちは、okutani(@okutani_t)です。WordPressでサイ …

「EWWW Image Optimizer」プラグインで画像の自動圧縮を行う

こんにちは、okutani(@okutani_t)です。WordPressで画像 …

WordPress Popular Postsで人気記事一覧を設置&CSS装飾

こんにちは、okutani(@okutani_t)です。 ブログのサイドバーに「 …

[WordPress]お問い合わせフォームを「Contact Form 7」で作成する

こんにちは、okutani(@okutani_t)です。サイトを運営していて必要 …

[WordPress] Amazonアソシエイトを綺麗に表示「AmazonJSプラグイン」導入方法

こんにちは、okutani(@okutani_t)です。Amazonアソシエイト …

[WordPress] 画像をあとから読み込んで表示速度アップ!「Lazy Load」プラグイン

こんにちは、okutani(@okutani_t)です。皆さんはブログ記事を書く …

All in One SEO PackでSNSのシェア設定をおこなう

vdeep管理人okutani(@okutani_t)です。WordPressで …

カテゴリーの順番を変更する「Category Order」プラグイン使い方

こんにちは、okutani(@okutani_t)です。今回は、かんたんにWor …

Table of Contents Plusで任意のページだけもくじ番号を非表示にする方法

WordPressのプラグイン「Table of Contents Plus」を …

DISQUSでWordPressのコメント欄をパワーアップしよう!

こんにちは、okutani(@okutani_t)です。WordPressサイト …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。