サブブログ|デスク環境構築サイト運営中

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のfunctionsカスタマイズWordPressのfunctions.phpで使える超カスタマイズコードまとめ

カゲサイーカゲオ

吹き出しを表示させたり
タイトル

こんなボックスや

ボタンも簡単に

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

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

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

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

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

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

AddQuicktag設定-6

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

ボタンのラベル

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

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

ビジュアルエディタ表示

AddQuicktagテキストエディタ表示

テキストエディタ表示

ダッシュアイコン

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

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

AddQuicktagダッシュアイコン

ラベル名

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

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

AddQuicktagラベル名設定

開始タグと終了タグ

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

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

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

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

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

AddQuicktag開始タグと終了タグ

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

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

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

AddQuicktagクイックタグ挿入方法

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

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

補足

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

アクセスキー

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

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

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

順番

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

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

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

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

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

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拡張コードクイックタグボタン設定

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;}

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【まとめ】

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

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

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

コメントはお気軽にどうぞ

※日本語が含まれていないコメントは投稿できません。(スパム対策)