【WordPress】HTMLコードをエスケープするショートコード

2018.8.3

【WordPress】HTMLコードをエスケープするショートコード

このブログを始めた当初、WordPressエディターを使ってソースコードを載せる時は毎回HTMLコードの括弧などをエスケープしていたのですが、さすがに面倒だったので何とかならないか調べた結果、ショートコードが一番楽そうということで採用しました。

また、WordPress標準エディターのクイックタグに追加する方法も載せています。

ショートコード

ショートコードの追加

下記コードをfunctions.phpに追加してください。

function sc_html_escape( $arg, $code="" ) {
    return htmlspecialchars($code, ENT_QUOTES, 'UTF-8', false);
}
add_shortcode('html_escape', 'sc_html_escape');

phpの「htmlspecialchars」を使って変換しています。

使い方

WordPressのエディター（テキスト）で、下記のように使います。


[html_escape]
<!-- ソースコード -->
[/html_escape]

実際使う時は、上記を<pre><code>とかで囲みますね。

クイックタグ

毎回[html_escape]を打つのは大変なので、クイックタグに登録します。

クイックタグへの追加については、寝ログさんの記事を参考にさせていただきました。

参考元：
プラグイン不要！WordPressのテキストエディタにタグ挿入クイックタグボタンを追加する方法

https://nelog.jp/add-quicktags-to-wordpress-text-editorより

コード

下記をfunctions.phpへ追加してください。


// add_quicktags_in_editorは任意の関数名
function add_quicktags_in_editor() {
    if (wp_script_is('quicktags')){ ?>
        <script>
        // 'qt-code' の部分は他のid名と被らないようにする
        // 'エスケープ'の部分は任意の名前（エディター上に表示されます）
        QTags.addButton('qt-code','エスケープ','[html_escape]','[/html_escape]');
        </script>
        <?php
    }
}
add_action( 'admin_print_footer_scripts', 'add_quicktags_in_editor' );

QTags.addButtonの引数は以下のとおり。

第1引数：WordPressのエディター画面のHTMLに追加されるid名。
第2引数：WordPressのエディター上で表示される名前。
第3引数：開始タグ。<a href="">など。
第4引数：閉じタグ。</a>など。

クイックタグはこんな感じで追加されます。

関連記事

▲