AddQuicktagの使い方と設定【隠れた機能も全て解説】

AddQuicktagとは？

「よく使う言葉(文章)、コード、タグ」などをボタン１つで呼び出せるようできるプラグインです。

この記事では、「AddQuicktag」のあまり知られていない機能まで全て解説しています。

目次・読みたい所へタップできます

AddQuicktagのインストール方法

AddQuicktag設定1

「管理画面」

↓

「プラグイン」

↓

「新規追加」をクリック

↓

「AddQuicktag」を検索

↓

「今すぐインストール」

↓

「有効化」をクリック

AddQuicktag設定-2

「管理画面」

↓

「設定」

↓

「AddQuicktag」をクリック

ここから設定をしていきます。

AddQuicktagのカスタム投稿設定

カスタム投稿タイプを使っていない方、またはカスタム投稿タイプがわからない方は次項へ進んでください。

例えば、当サイトと同じ「WordPressテーマ「ストーク」」を使っている方は「ランディングページ」というカスタム投稿タイプが最初から用意されています。

普通にブログを書くだけなら「カスタム投稿機能」はほとんど使わないと思いますが、サイトをホームページとしても使う場合はこういった機能は便利です。

もし使う場合は、忘れないうちに以下のコードをfunctions.phpにコピペしてください。

functions.php
// ランディングページでAddQuicktagを利用
add_filter( 'addquicktag_post_types', 'my_addquicktag_post_types' );
function my_addquicktag_post_types( $post_types ) {
 $post_types[] = 'post_lp';
 return $post_types;
}

post_lpの箇所は「WordPressテーマ「ストーク」」の場合ですので、違うテーマの方はそれぞれの「カスタム投稿タイプ名」を入れてください。

これで以下の３箇所に「カスタム投稿タイプ」も表示されます。

AddQuicktagのクイックタグの追加と削除設定

「AddQuicktag」を導入する一番のメリットはこの部分です。

ここにタグとして登録すると、ボタン１つで以下のような表示を簡単にできます。

WordPressのfunctions.phpで使える超カスタマイズコードまとめ

吹き出しを表示させたり

タイトル

こんなボックスや

ボタンも簡単に

例えば吹き出しの場合、実際には以下のようなコードを入力します。

[voice icon="https://kagesai.net/wp-content/uploads/profile.svg"  type="l big"]ここに文章を入力[/voice]

こんなコードを毎回手打ちしていたら、面倒でしゃーないのでこのプラグインがあります。

※上記のコードはWordPressテーマ「ストーク」の場合に使えるコードです。

他にも定型文などを登録できます。

こんにちは。カゲオです。

基本的に入力する箇所は上記(赤枠部分)だけで、十分ですが一応全項目の解説をします。

ボタンのラベル

ここに入力したものが、各投稿画面(投稿・固定・カスタム投稿)の「ビジュアルエディタ」のドロップダウンの箇所と「テキストエディタ」の上部に表示されますので自分がわかりやすい名前をつけましょう。

ビジュアルエディタ表示

テキストエディタ表示

ダッシュアイコン

ここで選択したアイコンが各投稿画面のビジュアルエディタのドロップダウンに表示されます。

ボタン名が表示されていればわかるので、基本は入力不要です。

ラベル名

ここに入力したものが、各投稿画面のビジュアルエディタのドロップダウン項目にマウスオーバーした時に表示されます。

ボタン名を入力しておけばわかるので、基本は入力不要です。

開始タグと終了タグ

ここはすごく重要なので必ず覚えましょう。

「開始タグ」と「終了タグ」は、「太字」であれば以下のようなタグを指します。

<b>ここに文章</b>

最初のが「開始タグ」

最後のが「終了タグ」

記事作成をテキストエディタで行なっている場合

・「開始タグ」にと登録すると１クリックで両方のタグが挿入されます。

・「開始タグ」にと「終了タグ」にと登録した場合は以下のようになります。

慣れればどちらでも問題ありませんが、初心者の方は「終了タグ」を閉じ忘れることが多々あります。(閉じ忘れると記事のレイアウトが崩れます。)

その為、心配なら「開始タグ」に両タグを登録しておき、タグ同士の間に文章を書いていったほうが確実かと思います。

補足

「ビジュアルエディタ」で使用する場合は、タグを分けても分けなくてもワンクリックで両方のタグが挿入されます。

アクセスキー

「WindowsのInternet Explorer(インターネットエクスプローラー)」環境だと、「ショートカットキー」として登録できるみたいです。

登録するとALTボタン+設定したアクセスキーボタンで、指定したタグを表示できるってことだと思います。

私は「Mac」なので、確認できていませんが「Windows」環境で試す機会があれば追記します。

順番

ビジュアルエディタ・テキストエディタ共にここに入力した順番通りに表示されます。

順番は「０〜」指定できます。

指定しない場合は、登録順に上から表示されます。

それぞれのチェック項目の説明

選択項目	項目の意味
ビジュアルエディタ	各投稿画面のビジュアルエディタにドロップダウンでタグを表示させる。
post	投稿編集のテキストエディタにタグを表示させる。
page	固定ページの編集にタグを表示させる。
attachment	メディア編集にタグを表示させる。
comment	コメント編集にタグを表示させる。
edit-comments	コメント編集のクイック編集にタグを表示させる。
widgets	ウィジェットにタグを表示させる。
post_lp	カスタム投稿ページにタグを表示させる。 `post_lp`はWordPressテーマ「ストーク」の場合
✔︎	クリックで全項目にチェックもう一度クリックで全項目のチェック解除

基本は「投稿・固定・カスタム投稿タイプ」くらいしか使いませんが、面倒なので右端のチェックマークをクリックして、全項目にチェックをつけちゃいましょう。

補足

ウィジェットにタグを表示させたい場合は、別途「WP Editor Widget」というプラグインが必要です

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

各投稿編集画面のテキストエディタにあるデフォルトのクイックタグ(以下の赤枠箇所)を非表示にできます。

必要ないものがあれば、チェックを入れてください。

クイックタグ	タグの意味
b	`<strong>`「重要性を示すタグ」`</strong>`
i	`<em>`「イタリックにするタグ」`</em>`
link	`<a href="飛ばしたいURL先">`「リンクを挿入するタグ」`</a>`
b-qouote	`<blockquote>`「引用タグ」`</blockquote>`
~~del~~	`<del>`「~~打ち消し線を引くタグ~~」`</del>`
ins	`<ins datetime="2017-11-21T08:25:58+00:00">` 「追加された文であることを示すタグ」`</ins>`
img	`<img src="画像のURL" alt="なんの画像かわかる名前を入力" />`「画像を挿入できるタグ」 ↓↓
ul	`<ul>`(黒ポチ)リストを作成するタグ`</ul>` ・あ・え・お・い・う
ol	`<ol>`(数字)リストを作成するタグ`</ol>` あいうえお
li	`<ul>`タグと`<ol>`タグを`<li>`リスト表示にするタグ`</li>`
code	<code>`ソースコードであることを示すタグ`</code>
more	<!–more–>「続きを読む」を表示するタグ
close	複数の「開始タグ」に「終了タグ」を一気に挿入できるタグテキストエディタ画面では「タグを閉じる」
fullscree	集中執筆モードにするタグ

クイックタグボタンに関しては、完全に任意です。

AddQuicktagの拡張コードクイックタグボタンの設定

ここから少し難しくなるので中級者以上の方だけ読んでもらえれば

以下の２箇所に「チェック」して「変更を保存」してください。

preタグ

チェックを入れた箇所のテキストエディタに「pre」タグと「言語指定コードのドロップダウン」が表示されます。

「pre」タグというのはコードなどを記述する際に使う、以下のボックス(※テーマによりカラーは違う)のことです。

ちなみに「ビジュアルエディタ」にも「pre」タグはあります。

ドロップダウンで表示できる言語は以下の７つです。

言語	コード
blank	<code class=”language-blank”>
html	<code class=”language-html”>
javascript	<code class=”language-javascript”>
css	<code class=”language-css”>
bash	<code class=”language-bash”>
php	<code class=”language-php”>
vb	<code class=”language-vb”>

言語を指定してドロップダウン右側にある「code」タグをクリックすると、上記のコードが表示されます。

ただし「pre」タグ内に「指定した言語名」を表示させるには、それぞれ「CSS」で指定する必要があります。

例えば、言語を「CSS」とした場合、以下のようなコードをスタイルシート (style.css)に入力しておくと、左上に「CSS」と表示できます。(他の書き方でもできる)

style.css
pre{
position:relative; 
}
.language-css{
position: absolute;
top: 0;
left: 0;
color:#ff0000;
font-size:25px; 
background:#000; 
}

ブラウザ上での表示

「テキストエディタ」には以下のように入力します。

HTML
<pre>
<code class="language-css">css</code>
ここにコードを書く
}
</pre>

注意点としては<pre>タグの下で</code>タグを閉じることです。

「language-css」の「css(緑字の箇所)」の部分がそれぞれの「言語指定コード」になります。

「css(青字の箇所)」の箇所は好きな文字に変更できます。

注意

ただし、「Prism.js」などで、すでに言語指定するコードがある場合はそちらのコードが優先されます。

CSSはようわからんけど「pre」タグ内に言語を表示させたい場合は、以下のように「pre」タグ内上部に言語を入力して、背景だけ「背景色タグ」で変える簡単な方法もあります。

そうすると、以下のようにできます。

CSS
/* サイトマップバグ直し */
#sitemap_list li:before {
width: 0;
height: 0;}

htmlentitiesボタン

ブラウザ上(記事内)に「HTMLコード」をそのまま表示したい時に使う項目です。

「ビジュアルエディタ」で「HTMLコード」を書く分には太字タグ←こんな感じでブラウザ上にコードも表示されます。

ですが「テキストエディタ」で「HTMLコード」を書くと、そのままコードの内容が適用されてしまい、ブラウザ上では太字タグ(コードが適用された状態)で表示されます。

そこで「HTML Entities」タグを使うと「特殊文字変換」してくれるんですね。

上記のように「HTMLコード」を選択後に「HTML Entities」をクリックすると以下のように変換してくれます。

これでブラウザ上でも以下のようにコードが表示されます。

<form id="form5" action="自分のサイトのURL">
<input id="sbox5" name="s" type="text" placeholder="キーワードを入力" />
<input id="sbtn5" type="submit" value="検索" />
</form>

もう１つの「Decode HTML」は、上記の「HTML Entities」で「特殊文字変換」したタグを元に戻すことができます。

AddQuicktagのエクスポート＆インポート設定

「AddQuicktag」で設定した内容を、別のサイトにコピーできます。

注意

固有のテーマ内にあるショートコードに関してはコピーはされますが、使用することはできないので邪魔なら手動で消してください。

「エクスポートファイルのダウンロード」をクリックして「現サイト」のデータをダウンロードします。

↓

「新サイト」でインポート「ファイルを選択」で先ほどダウンロードしたファイルを選択します。

↓

「ファイルのアップロード・インポート」をクリックすれば、「現サイト」のデータが「新サイト」にアップロードされます。

AddQuicktag【まとめ】

最近の有料テーマはショートコードを多用しているので、「AddQuicktag」は必須プラグインといってもいいですね。

ガッツリ理解しようとすると難しく感じると思いますが、とりあえず「コード」「定型文」「タグ」などを登録できる機能だけでも使いこなせば作業効率はグンとアップするので、まだの方はぜひ導入してみてください。

WordPressのおすすめプラグイン・新旧19個を紹介