WordPressカスタマイズまとめ←クリック

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

AddQuicktagの設定

AddQuicktagとは?

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

この記事では、「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テーマ「ストーク」 」の場合ですので、違うテーマの方はそれぞれの「カスタム投稿タイプ名」を入れてください。

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

AddQuicktagカスタム投稿タイプ追加-1

AddQuicktagカスタム投稿タイプ追加-2

AddQuicktagカスタム投稿タイプ追加-3

AddQuicktagの使い方③【クイックタグの追加と削除設定】

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

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

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

カゲサイーカゲオカゲオ
吹き出しを表示させたり

タイトル

こんなボックスや

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

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

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

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

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

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

AddQuicktag設定-6

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

3-1・ボタンのラベル

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

AddQuicktagビジュアルエディタ表示

ビジュアルエディタ表示

AddQuicktagテキストエディタ表示

テキストエディタ表示

3-2・ダッシュアイコン

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

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

AddQuicktagダッシュアイコン

3-3・ラベル名

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

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

AddQuicktagラベル名設定

3-4・開始タグと終了タグ

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

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

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

最初の<b>が「開始タグ

最後の</b>が「終了タグ

AddQuicktag開始タグと終了タグ

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

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

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

AddQuicktagクイックタグ挿入方法

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

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

補足

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

3-5・アクセスキー

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

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

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

3-6・順番

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

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

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

3-7・それぞれのチェック項目の説明

選択項目項目の意味
ビジュアルエディタ各投稿画面のビジュアルエディタにドロップダウンでタグを表示させる。

AddQuicktagビジュアルエディタ表示

post投稿編集のテキストエディタにタグを表示させる。

AddQuicktagテキストエディタ表示

page固定ページの編集にタグを表示させる。

AddQuicktag設定・固定ページ表示

attachmentメディア編集にタグを表示させる。

AddQuicktagメディア編集

commentコメント編集にタグを表示させる。

WordPressコメントの編集

edit-commentsコメント編集のクイック編集にタグを表示させる。

WordPressコメントクイック編集

widgetsウィジェットにタグを表示させる。
post_lpカスタム投稿ページにタグを表示させる。 post_lpWordPressテーマ「ストーク」 場合
✔︎クリックで全項目にチェック
もう一度クリックで全項目のチェック解除

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

補足

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

AddQuicktagの使い方④【デフォルトのクイックタグを非表示にする設定】

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

AddQuicktagクイックタグを非表示にする

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

AddQuicktagクイックタグ設定

クイックタグタグの意味
b<strong>重要性を示すタグ</strong>
i<em>イタリックにするタグ</em>
link<a href="飛ばしたいURL先">リンクを挿入するタグ</a>

AddQuicktag-linkタグ設定

b-qouote
<blockquote>引用タグ」</blockquote>
del<del>打ち消し線を引くタグ</del>
ins<ins datetime="2017-11-21T08:25:58+00:00"> 追加された文であることを示すタグ</ins>
img<img src="画像のURL" alt="なんの画像かわかる名前を入力" />画像を挿入できるタグ」

AddQuicktag-imgタグ設定-1

↓↓

AddQuicktag-imgタグ設定-2

ul<ul>黒ポチ)リストを作成するタグ</ul>
  • ・あ
  • ・え
  • ・お
  • ・い
  • ・う
ol<ol>数字)リストを作成するタグ</ol>
li<ul>タグと<ol>タグを<li>リスト表示にするタグ</li>
code<code>ソースコードであることを示すタグ</code>
more<!–more–>続きを読む」を表示するタグ
close複数の「開始タグ」に終了タグ」を一気に挿入できるタグ
テキストエディタ画面ではタグを閉じる

AddQuicktagの設定-closeタグの使い方

fullscree集中執筆モードにするタグ

AddQuicktag-集中執筆モードタグ設定

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

AddQuicktagの使い方⑤【拡張コードクイックタグボタンの設定】

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

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

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

5-1・preタグ

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

AddQuicktag-preタグ設定

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

 

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

AddQuicktag設定・preタグ

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

言語コード
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」タグをクリックすると、上記のコードが表示されます。

AddQuicktag設定・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」タグ内上部に言語を入力して、背景だけ「背景色タグ」で変える簡単な方法もあります。

WordPressテキスト背景色設定

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

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

5-2・htmlentitiesボタン

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

AddQuicktag-htmlentitiesタグ設定

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

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

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

AddQuicktag-HTML-entitiesの使い方

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

HTML特殊文字変換サンプル

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

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

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

AddQuicktagの使い方⑥【エクスポート&インポート設定】

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

注意

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

AddQuicktagエクスポート・インポート設定

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

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

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

まとめ

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

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

新しい文章力の教室 タリー式トレーニング
この記事のURLとタイトルをコピー
お使いの端末ではこの機能に対応していません。
下のテキストボックスからコピーしてください。
★Amazonは現金チャージがお得★
Amazonギフトチャージ

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。