WordPressの記事中にhtmlタグをそのまま表示させるプラグイン「AddQuicktag」

記事内に山括弧をそのまま表示させたい！

WordPressの記事内でhtmlタグをそのまま表示させたい場合は、タグの括弧「<」「>」実体参照で書けばよいです。

直接実体参照を書いてもよいのですが、「AddQuicktag」というプラグインを使用すると、「HTML Entities」というクイックボタンがあるので、手軽にエスケープできるようになります。
[adsense]

概要

WordPressの記事作成画面の上部に、HTMLタグをクイック入力するためのボタン（「b」「i」「link」とか）があるのですが、「AddQuicktag」をインストールすると、ここに独自のボタンを追加したり、既存のボタンを削除したりすることができます。

その中にある「HTML Entities」ボタンが、HTMLタグで使用する括弧を実体参照に変換してくれます。変換してくれるのは、「<」「>」「&」の3つの文字です。

インストール

他のプラグインと同じようにインストールします。

1. ワードプレスの管理ページを開きます。
2. 「プラグイン」＞＞「新規追加」画面を開きます。
3. 「プラグインの検索」窓で「AddQuicktag」と検索します。
4. 「いますぐインストール」をクリックし、インストールが完了したら「プラグインを有効化」します。


AddQuicktagのインストール画面

インストール後の設定は、サイドバーの「設定」＞＞「AddQuicktag」で行ないます。

HTMLタグを記事で直接表示する設定

とりあえず、HTMLタグを実体参照にするためのボタンを設定します。

設定変更する箇所は１つです。

1. サイドバーの「設定」＞＞「AddQuicktag」を開きます。
2. 画面を下の方にスクロールすると「Enhanced Code Quicktag buttons」という箇所があります。


AddQuicktag設定画面を下の方にスクロールしたところ「Enhanced Code Quicktag buttons」

3. 「htmlentitis」の一番右側にあるチェックボックスにチェックを入れ、「変更を保存」します。


「htmlentities」欄にチェック

記事作成画面を開くと、２つのクイックタグが表示されています。

記事作成画面に「HTML Entities」「Decode HTML」ボタン出現

記入したタグや実体参照を選択した状態で、それぞれボタンを押すと変換されます。

• 「HTML Entities」：HTMLタグをエスケープします。
• 「Decode HTML」：実体参照を元のタグに戻します。

変換後に記事のプレビューを見てみると、HTMLタグがそのまま表示されてること、タグとして認識されていることが確認できます。

設定項目

「AddQuicktag」の設定項目の説明です。

クイックボタンの使い方

作成画面にカーソルがある状態でクイックボタンを押すと、開始タグ（もしくは閉じタグ）が入力されます。

文章などを選択（反転）した状態でクイックボタンを押すと、その文章を挟む形で開始タグと閉じタグが入力されます。

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

ボタン名

画面に表示されるクイックボタン名を入力します。

ラベル名

ボタンの説明文です。マウスポインターをあてると表示されます。

開始タグ

HTML開始タグを入力します。
例：<h3>

終了タグ

HTML閉じタグを入力します。
例：</h3>

アクセスキー

ショートカットキーを指定できます。
accesskey属性にセットされるようですが、動作確認は取れませんでした。
一応、AddQuicktagのサポートフォーラムに問い合せ中。

順番

独自ボタン内での表示順を指定します。
のちのちボタンの追加を考えると、100番単位くらいで指定しておくとよいかもしれません。

表示箇所

独自ボタンを表示する画面を指定します。表示させたい画面にチェックを入れます。基本、一番右の「全チェック」でよいと思います。

その他

ボタンの削除：「ボタン名」～「順番」までを空欄にし、「表示箇所」のチェックを全て外します。
ボタンの非表示：「表示箇所」のチェックを外します。（ボタンの設定は残ります。）

Remove Core Quicktag buttons

既存のクイックボタンの表示・非表示を設定できます。

Enhanced Code Quicktag buttons

「pre」：半角スペースや改行をそのまま表示してくれるタグです。
「htmlentities」：「HTML Entities」「Decode HTML」２つのボタンが表示されます。
<>&の3つの文字を実体参照に変換したり、元に戻したりします。

エクスポート

JSON形式の設定ファイルとしてダウンロードできます。

インポート

JSON形式の設定ファイルをインポートできます。
複数のWordPressサイトを運営している場合に、AddQuicktag環境を手軽に統一できます。

Q&A

ボタンを設定したけど、ボタンが記事作成画面に表示されない

「表示箇所」のチェックをお忘れなく。

おまけ

括弧の呼び方

（ ）丸括弧（まるかっこ）、小括弧（しょうかっこ）
｛ ｝波括弧（なみかっこ）、中括弧（ちゅうかっこ）
［ ］角括弧（かくかっこ）、大括弧（だいかっこ）、ブラケット
〈 〉山括弧（やまかっこ）

ショートコード、ショートタグをそのまま表示

ブラケットを2つ記述します。
記入例：[[toc]]
表示例：[toc]

参考

AddQuicktagサポートフォーラム
https://wordpress.org/plugins/addquicktag/