未経験のITエンジニア転職【テックキャンプ】

【AddQuicktag】WordPressショートコードや装飾タグを一発挿入プラグイン

AddQuicktagアイキャッチ

WordPressプラグインAddQuicktag(アドクイックタグ)の「インストール方法」「設定」「使い方」を紹介していきます。

クイックタグを使えば、下記のように投稿・固定ページなどにオリジナルのボタンを追加できます。

WordPressプラグイン AddQuicktag とは

WordPressプラグイン AddQuicktag とは

ノーノちゃん

これはいいね。装飾タグを打ち込む手間がはぶけるね。
他にも「定型文」「HTMLタグ」「ショートコード」などをボタン一つで挿入できますので作業効率がアップしますよ。

ぶたさん

1. はじめに

WordPressの新エディタ(Gutenberg)ではAddQuicktagが非常に使いにくいです。

旧エディタに戻すために「Classic Editor」をインストールしましょう。
※新エディタに慣れている方は、インストールしなくてOKです。

それではインストール方法をご説明します。

1

新規追加する

WordPressプラグイン AddQuicktag インストール方法

2

「Classic Editor」で検索

WordPressプラグイン Classic Editor インストール方法

3

インストールする

WordPressプラグイン Classic Editor インストール方法

4

有効化する

WordPressプラグイン Classic Editor インストール方法

これで完了です。とくに設定をする必要はありません。

それではAddQuicktagのインストール方法を見ていきましょう。

2. インストール方法

1

新規追加する

WordPressプラグイン AddQuicktag インストール方法

2

「AddQuicktag」で検索

WordPressプラグイン AddQuicktag インストール方法

3

インストールする

WordPressプラグイン AddQuicktag インストール方法

4

有効化する

WordPressプラグイン AddQuicktag インストール方法

5

起動する

WordPressプラグイン AddQuicktag インストール方法

6

完了

WordPressプラグイン AddQuicktag インストール方法

3. 画面の見方

各項目を説明していきます。

クイックタグの追加と削除

WordPressプラグイン AddQuicktag 使い方

※ショートカットキーはIEでしか使えません。

クイックタグの表示場所

WordPressプラグイン AddQuicktag 使い方

必要な表示場所にだけチェックを入れましょう。

(よく分からない方は、すべてチェックしても構いません)

注意
クイックタグが反映されない場合、チェックを入れ忘れていたというケースが多いです。必ず確認しましょう。

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

WordPressプラグイン AddQuicktag 使い方

使わないものは非表示にする事をオススメします。

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

WordPressプラグイン AddQuicktag

pre

拡張コードボタンです。様々な言語のプルダウンメニューを追加できます。

通常では使わないのでチェックを入れなくて構いません。

htmlentities

下記のようにHTMLタグをそのまま表示させたい時に使います。

<span class=”red b”>文字を赤くする</span>
<span class=”small”>文字を小さくする</span>

こちらも通常では使わないのでチェックを入れなくて構いません。

エクスポート

WordPressプラグイン AddQuicktag 使い方

設定データを出して保存できます。

バックアップやサイト複製をしたい時に使いましょう。

インポート

WordPressプラグイン AddQuicktag 使い方

設定データを入れて使えるようにします。

エクスポートしたファイルを入れましょう。

4. 使い方

ここでは使い方の説明をしていきます。

まずはクイックタグの追加をしてみましょう。

クイックタグ追加方法

1

タグを入力する

WordPressプラグイン AddQuicktag 使い方
※アイコンとアクセスキーは入力しないで構いません。

①ボタン名

ボタンの名前を入力します。ボタンの幅を取らないように、できるだけ短い名前にしましょう。

②ボタンの説明

ボタン上にカーソルを合わすと出てくる説明です。

③開始タグ

左側のタグを入力します。

④終了タグ

右側のを入力します。

⑤ボタンが表示される順番

「1」にすると一番左、「2」すると左から2番目に表示されます。

2

タグを入力する

WordPressプラグイン AddQuicktag 使い方

3

保存して完了

WordPressプラグイン AddQuicktag 使い方


クイックタグの使い方

ここではテキストエディタでの使い方を説明していきます。

1

文字を入力する

WordPressプラグイン AddQuicktag 使い方

2

クイックタグをクリック

WordPressプラグイン AddQuicktag 使い方

3

完了

WordPressプラグイン AddQuicktag 使い方

1

クイックタグを表示する

WordPressプラグイン AddQuicktag 使い方

2

範囲を決める

WordPressプラグイン AddQuicktag 使い方

3

クイックタグをクリック

WordPressプラグイン AddQuicktag 使い方

4

完了

WordPressプラグイン AddQuicktag 使い方

5. エクスポート・インポート

ここではエクスポート・インポート方法を説明しています。

エクスポート方法

クイックタグの設定をエクスポート(保存)しましょう。

1

ファイルをダウンロードする

WordPressプラグイン AddQuicktag エクスポート

2

保存する

WordPressプラグイン AddQuicktag エクスポート

3

エクスポート完了

WordPressプラグイン AddQuicktag エクスポート

.jsonファイルは分かりやすい名前に変更してもOKです。
例)teilb-2019-06.json

ぶたさん

インポート方法

クイックタグの設定をインポート(復元)しましょう。

1

ファイルを選択する

WordPressプラグイン AddQuicktag インポート

2

ファイルを開く

WordPressプラグイン AddQuicktag インポート

3

インポート完了

WordPressプラグイン AddQuicktag インポート

6. カスタム投稿でも使いたい【応用】

ここからは応用編です。(カスタム投稿を利用していない方は読み飛ばしてOKです)

カスタム投稿でも使えるようにするには、functions.phpをカスタマイズする必要があります。

警告
functions.phpは一度編集に失敗するとサイトが表示されなくなります。必ずFTPツールを使ってphpファイルのコピーを保存しましょう。
 
※functions.phpは使用中テーマのフォルダにあります。
WordPressプラグイン AddQuicktag カスタム投稿
参考 FTPツール「FileZilla」の使い方とおすすめの設定HPcode

ではカスタマイズの方法を説明していきます。

1

テーマエディタを開く

WordPressプラグイン AddQuicktag カスタム投稿

2

functions.phpを開く

WordPressプラグイン AddQuicktag カスタム投稿

3

コードを挿入する

WordPressプラグイン AddQuicktag カスタム投稿

挿入するコード
//AddQuicktagをカスタム投稿で表示させる
add_filter( 'addquicktag_post_types', 'my_addquicktag_post_types' );
function my_addquicktag_post_types( $post_types ) {
	$post_types[] = 'onecolumn_lp';
	return $post_types;
}
赤文字部分にカスタム投稿名を入れましょう。
4

完了

WordPressプラグイン AddQuicktag カスタム投稿

参考サイト
参考 【Wordpress】カスタム投稿タイプでAddQuicktagを使えるようにするウェブの触手

7. SANGOユーザー専用クイックタグ

サルワカ(公式ページ)ではSANGOユーザーのために、2つのクイックタグが配布されています。

おすすめ版 よく使いそうなもの
フルバージョン 大半のショートコードを収録

1からクイックタグを作るのが面倒だという方は、下記の公式ページからダウンロードしましょう。

参考 SANGO専用のショートコードサルワカ  
1

ダウンロードする

WordPressプラグイン AddQuicktag SANGO
※ここでは「おすすめ版」をクリックしています

2

保存する

WordPressプラグイン AddQuicktag SANGO

3

zipファイルを選択する

WordPressプラグイン AddQuicktag SANGO

4

zipファイルを解凍する

WordPressプラグイン AddQuicktag SANGO

5

AddQuicktagを開く

WordPressプラグイン AddQuicktag SANGO

6

ファイルを選択

WordPressプラグイン AddQuicktag SANGO

7

フォルダを選択

WordPressプラグイン AddQuicktag SANGO

8

フォルダを開く

WordPressプラグイン AddQuicktag SANGO

9

ファイルを開く

WordPressプラグイン AddQuicktag SANGO

10

完了

WordPressプラグイン AddQuicktag SANGO

8. よくある質問

インストール済みプラグイン画面からaddquicktagを削除してから、再インストールしましょう。
クイックタグの表示場所に、チェックが入っているか確認しましょう
WordPressプラグイン AddQuicktag  表示されない
クイックタグの上限を超えている可能性があります。

クイックタグの表示場所を減らすか、削除しましょう。
WordPressプラグイン AddQuicktag  追加できない

403エラーが出る原因は、ファイアウォール(WAF設定)にあります。

解決するためにプラグインのSiteGuardを使って、WAF除外の設定を行いましょう。

1

新規追加をクリック

WordPressプラグイン AddQuicktag インストール方法

2

「SiteGuard」で検索する

WordPressプラグイン AddQuicktag 403エラー

3

インストールする

WordPressプラグイン AddQuicktag 403エラー

4

有効化する

WordPressプラグイン AddQuicktag 403エラー

5

WAFチューニングサポートを開く

WordPressプラグイン AddQuicktag 403エラー

6

新しいルール追加をする

WordPressプラグイン AddQuicktag 403エラー

7

名前を入力

WordPressプラグイン AddQuicktag 403エラー
シグネチャ:traversal-9
ファイル名:options.php

8

完了

WordPressプラグイン AddQuicktag 403エラー

参考サイト
参考 WAFで除外の設定をして装飾テキツヒ