左坊のメモ帳

WordPress など

*

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

      2015/07/13

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

このブログでもすでに使っているのですが、記事中HTMLタグ直接表示させたい場合があります。

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

スポンサーリンク

概要

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

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

インストール

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

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

    AddQuicktagのインストール画面

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

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

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

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

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

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

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

    「htmlentities」欄にチェック

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

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

記事作成画面に「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」2つのボタンが表示されます。
<>&の3つの文字を実体参照に変換したり、元に戻したりします。

エクスポート

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

インポート

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

Q&A

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

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

おまけ

括弧の呼び方

( )丸括弧(まるかっこ)、小括弧(しょうかっこ)
{ }波括弧(なみかっこ)、中括弧(ちゅうかっこ)
[ ]角括弧(かくかっこ)、大括弧(だいかっこ)、ブラケット
〈 〉山括弧(やまかっこ)

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

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

参考

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

 - WordPress