プラグインAddQuicktagの使い方!タグ・ショートコードを一発入力で記事作成効率化

どうも。葉です。

あなたは、記事を作成する際に、タグやショートコードを毎回入力しなければならないのを面倒だと感じたことはありませんか?

ブログ記事を綺麗に見せるためとはいえ、そのために労力がかかると、ついつい手を抜きたくなってしまいますよね?

しかし、それで、ブログ記事作成の手を抜くと、訪問者には、簡単にバレてしまいます。それでは、訪問者は、きっと他のブログに飛んでしまうでしょう。

そこで、この記事では、面倒なタグやショートコードの入力をクリックひとつで簡単に使用可能にするプラグイン「AddQuicktag」の使い方を丁寧に解説していきます。

普段、タグやショートコードを使用する人は、このプラグインを導入することで、記事作成時間を5分以上は縮めることができますよ。

1.AddQuicktagでできること

AddQuicktag

まずは、プラグイン「AddQuicktag」を使用するとどんなことができるのかを解説していきます。

1-1.任意のタグやショートコードを登録できる

1つ目の機能は、タグやショートコードを登録できる機能です。例えば、次のようなタグ、コードを登録することができます。

  • 見出しタグ
  • アドセンス広告コード
  • 文字を囲む枠線
  • etc

ただ、もちろんタグやショートコードを登録しただけでは、特に意味が無いですよね。そこで、活躍するのが次の機能です。

1-2.登録したタグやショートコードを簡単に呼び出すことができる

プラグイン「AddQuicktag」では、登録したタグやショートコードを簡単に呼び出し使用することができます。

例えば、アドセンス広告などは、毎回ソースコードを記事に入力するのは面倒ですよね?でも、「AddQuicktag」であれば、クリックひとつで登録してあるアドセンス広告コードを呼び出すことができるのです。

この他にも、あなたが頻繁に使用するタグやショートコードを登録しておけば、いつでも簡単に呼び出すことができるのです。

これにより、記事作成効率がグッと増します。

タグとは?
・タグ=<>で囲まれいているもの
例.<h3></h3>、<b></b>など

    

ショートコードとは?
・ショートコード=[]で囲まれているもの
例.[char no=1 char="葉(よう)"]ショートコードだぜ![/char] 
このコードは、次のように表示されます。   
葉(よう)葉(よう)

ショートコードだぜ!

2.AddQuicktagのインストール

プラグイン「AddQuicktag」がわかったところで、実際にインストールを行っていきましょう。

WordPress管理画面の左メニューより「プラグイン→新規追加」をクリックします。

AddQuicktagのインストール手順1

プラグインの検索窓に「AddQuicktag」と入力し、キーボードのエンターボタンをを押します。

AddQuicktagのインストール手順2

「AddQuicktag」の「今すぐインストール」をクリックします。

AddQuicktagのインストール手順3

「プラグインを有効化」をクリックします。

AddQuicktagのインストール手順4

「AddQuicktag」が有効化されていることを確認します。

AddQuicktagのインストール手順5

以上で、プラグイン「AddQuicktag」のインストール・有効化は完了です。

3.AddQuicktagの使い方

ここでは、プラグイン「AddQuicktag」の使い方を解説していきます。

3-1.タグやコードを登録してみよう!

WordPress管理画面の左メニューより「設定→AddQuicktag」をクリックします。

AddQuicktagの使い方1-1

すると「クイックタグの追加と削除」のページに移動します。

AddQuicktagの使い方1-2

簡単に、それぞれの入力窓の意味を解説しておきます。

①ボタン名 ボタン名(任意のわかりやすい名前をつけてください)
②ラベル名 ボタンにマウスオーバー時に表示される説明(入力しなくても良い)
③開始タグ 開始タグ(入力必須)
④終了タグ 終了タグ(開始タグを閉じるタグ)
⑤順番

クイックタグに順番を指定できます。数字の若い順にクイックタグが並びます。(入力すると管理が簡単です。)

⑥クイックタグ使用箇所 クイックタグを使用できる場所を指定できます。基本的には、すべてにチェックを入れてください。

「⑥クイックタグ使用箇所」の各項目について解説しておきます。下の表を参考にしてください。

AddQuicktagの使い方1-3

ビジュアルエディター ビジュアルモードでも表示できます。ここは、チェックを入れてください。
post 投稿で使用可
page 固定ページで使用可
attachment メディア編集で使用可
comment コメントで使用可
edit-comments コメント編集で使用可
widgets ウィジェットで使用可
チェックマーク ここにチェックをいれると全てにチェックが入ります。

では、タグの登録作業に戻ります。今回は、文字を太文字にする<b>タグの登録を行います。下図のように入力し、「変更を保存」をクリックします。

  • ボタン名:太文字
  • 開始タグ:<b>
  • 終了タグ:</b>
  • 順番:0

AddQuicktagの使い方1-4

これで、タグの登録は完了です。

3-2.登録したタグを使ってみよう!

次に、登録したタグを実際に使用してみましょう。

WordPress管理画面の左メニューより「投稿→新規追加」をクリックし、記事作成画面に移動します。

AddQuicktagの使い方2-1

3-2-1.ビジュアルモードで使ってみる!

記事投稿画面にてビジュアルタブを選択したら、記事作成部分に任意の文字列を入力します。

AddQuicktagの使い方2-1-1

次に、入力した文字を選択した状態で、「Quicktags」にある太文字を選択します。

AddQuicktagの使い方2-1-2

すると次のように、文字が太文字に変わります。

AddQuicktagの使い方2-1-3

3-2-2.テキストモードで使ってみる!

テキストタグを選択したら、記事作成部分に文字列を入力します。

AddQuicktagの使い方2-2-1

次に、入力した文字を選択した状態で、先ほど作成した「太文字」のクイックタグをクリックします。

AddQuicktagの使い方2-2-2

すると次のように文字列が<b>タグに囲まれています。

AddQuicktagの使い方2-2-3

これで、「AddQuicktag」の基礎的な使い方の解説は終わりです。

3-3.いろんなタグを登録してみる

この他にも、次のようなクイックタグを登録することで、ブログ作成をぐっと効率化できますよ。

3-3-1.アドセンスをクイックタグ登録

ブログでアドセンス広告を使用している方は、広告コードをクイックタグに登録しておくことで、簡単に広告を貼り付けることができます。

下図を参考に設定してみてください。

AddQuicktagの使い方3-1-1

広告コードをは、こちらを参考にしてください。
※【アドセンス広告のコードを入力】には、AdSenseより取得した広告コードを入力してください。

<p style="text-align: center;">【アドセンス広告のコードを入力】</p>

3-3-2.賢威のキャラクター設定をクイックタグに登録

この他にも、吹き出しで会話できるキャラクター設定をクイックタグに登録しておくのも便利ですよ。賢威のキャラ設定機能をクイックタグに登録してみました。

下図を参考に設定をし、「変更を保存」をクリックします。

AddQuicktagの使い方3-2-1

使ってみる!

入力した文字列を選択した状態で、作成した「葉の吹き出し(左)」をクリックすると、次のように吹き出しのショートコードで囲まれています。

AddQuicktagの使い方3-2-2

AddQuicktagの使い方3-2-3

AddQuicktagの使い方3-2-4

プレビューで確認すると次のように文字列が吹き出しになっています。

AddQuicktagの使い方3-2-5

こうやって使うと、賢威のキャラ設定機能も簡単に使用できますね。

3-4.デフォルトで登録されている不要なタグやコードを非表示にする!

「AddQuicktag」では、テキストモードにデフォルトで表示されているタグで不要だと思うものを非表示にできます。

AddQuicktagの使い方4-1

では、タグボタンを非表示にする手順を解説していきます。
「Remove Core Quikctag buttons」にて不要だと思うタグにチェックを入れてください。

AddQuicktagの使い方4-2

  下にスクロールして「変更を保存」をクリックすれば、テキストモードにて選択したタグボタンが非表示になっているはずです。

AddQuicktagの使い方4-3

3-5.preタグのON/OFF、htmlentitiesの表示/非表示

「Enhanced Code Quicktag buttons」では、preタグのON/OFF、htmlentitiesの表示/非表示を選択できます。こちらは、「3-4.デフォルトで登録されている不要なタグやコードを非表示にする!」とは、逆でチェックをいれると表示されます。

AddQuicktagの使い方5-1

  • preタグ:スペースや改行などをそのまま表示してくれます。チェックを入れるとスペースや改行がそのまま表示されます。
  • htmlentities:htmlをそのまま表示できるように変換してくれるボタンを表示します。「HTML Entitiesボタン」と「Dedode HTMLボタン」を表示します。それぞれのボタンの機能を解説します。
HTML Entities HTMLをそのまま表示できるように変換。
Dedode HTML そのまま表示できるように変換したものをHTMLに戻す。

HTML Entitiesボタンを使ってみた!

実際に「HTML Entitiesボタン」使用してみました。

まずは、次のようにテストと言う文字「h3タグ」で文字を囲み、「HTML Entitiesボタン」をクリックします。

AddQuicktagの使い方5-2

すると、h3タグが、そのまま表示される形式に変換されています。「プレビュー」で確認してみましょう。

AddQuicktagの使い方5-3

すると、記事上では、h3タグがそのまま表示されています。

AddQuicktagの使い方5-4

なお、変換されたh3タグを選択し、「Decode HTMLボタン」をクリックするとHTML形式のh3タグに戻ります。

AddQuicktagの使い方5-5

AddQuicktagの使い方5-6

3-6.設定をエクスポートし、他のWordPressでコピーする

複数のWordPressを運営する場合等は、1つのWordPressの設定を他のWordPressにコピーすることが可能です。手順としては、

  1. 1つのWordPressで「AddQuicktag」の設定をする
  2. 設定したデータをエクスポート
  3. 他のWordPressにインポート

の順になります。実際に作業してみましょう。

設定をエクスポート

エクスポートより、「エクスポートファイルのダウンロード≫」をクリックします。すると「設定(json)ファイル」がダウンロードされます。

AddQuicktagの使い方6-1

これで、「設定(json)ファイル」のエクスポートは完了です。

設定をインポート

次に、ダウンロードした設定ファイルのインポートを行います。

「ファイルを選択」をクリックし、ダウンロードした「設定(json)ファイル」を選択した状態で「開く」をクリックします。

AddQuicktagの使い方6-2

「設定(json)ファイル」が選択されていることを確認したら、「ファイルのアップロード・インポート」をクリックします。

AddQuicktagの使い方6-3

すると、「設定(json)ファイル」に書き込まれていた情報と同じ設定になっているはずです。

4.まとめ

この記事では、

  • AddQuicktagでできること
  • AddQuicktagのインストール
  • AddQuicktagの使い方

について解説しました。

この記事内で解説した使い方はあくまでも一例に過ぎません。あなたが、自分自身で登録したいタグやコードがあれば、どんどん登録して、WordPressをあなた色に染め上げてください。

独自のカスタマイズは、あなたにちょっとした優越感を感じさせてくれますよ(^^)

 

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

最新情報をお届けします