WordPressのHTMLエディターにカスタムクイックタグを追加して投稿画面を使い易くカスタムしよう！【CMS・WEBプログラミング・WEB制作・wordpress・カスタマイズ・テキストエディター・リファレンス】

posted on 2019.5.19

WordPress では投稿画面のエディタのテキスト(HTML)モードへオリジナルのカスタムボタンを追加するQuicktags APIを用意しています。デフォルトのタグ以外で自分がWordPressで使用したいオリジナルのタグを追加でき、WordPressでブログやメディアなどを運営し頻繁に投稿してきたいと考えている方にはとても便利な機能だと思うのでここで紹介したいと思います。

Quicktags APIとパラメーター

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );

id	（文字列）（必須）ボタンの html の id をいれる値。ボタンを認識させる為の一意の識別子。初期値：なし
display	（文字列）（必須）ボタンの html の value に入れる値。初期値：なし
arg1	（文字列）（必須） “” のような開始タグ、もしくはボタンをクリックしたときに実行されるコールバック。初期値：なし
arg2	（文字列）（オプション） “” のような終了タグ。終了タグが不要な場合は空にします。(例えば開始タグが “ “)。初期値：なし
access_key	（文字列）（オプション）ボタンのショートカットアクセスキー。初期値：なし
title	（文字列）（オプション）ボタンの html の title に入れる値。初期値：なし
priority	（整数）（オプション）ツールバー内にボタンを置きたい位置を表す数値。1 – 9 = 1行目, 11 – 19 = 2行目, 21 – 29 = 3行目, など。初期値：なし
instance	（文字列）（オプション）指定すると　Quicktags の特定のインスタンスだけにボタンを追加する。省略するとすべてのインスタンスに追加する。初期値：なし

WordPress Quicktags APIの使用例

WordPressのfunction.phpファイルに記述するか、プラグインとして実装します。

<?php
function add_quicktags() {
    if (wp_script_is('quicktags')) {
        ?>
        <script type="text/javascript">
            QTags.addButton('p-center', 'p.c', '<p class="center">', '</p>');
            QTags.addButton('p-left', 'p.l', '<p class="left">', '</p>');
            QTags.addButton('p-right', 'p.r', '<p class="right">', '</p>');
        </script>
        <?php
    }
}
add_action('admin_print_footer_scripts', 'add_quicktags');
?>

<?php

function add_quicktags() {

if (wp_script_is('quicktags')) {

QTags.addButton('p-center', 'p.c', '<p class="center">', '</p>');

QTags.addButton('p-left', 'p.l', '<p class="left">', '</p>');

QTags.addButton('p-right', 'p.r', '<p class="right">', '</p>');

</script>

<?php

}

add_action('admin_print_footer_scripts', 'add_quicktags');

デフォルトのエディターはP tagもdiv tagも一種類しかないですが、画像と文章の組み合わせがいつも同じだとブログが味気ないから少し味付けしたいと考えているようなクライアントさんにカスタムのクイックタグで変化をつけるご提案をしたい時には上記のようにすれば簡単に実装できまし、クライアントさんに説明するのもとても楽チンです。あとはcssでデザインするだけで済みます。

Quicktags API ここだけの話　内緒の使い方

Quicktags API は基本HTML tag を挿入するために考えられたものだとは思いますが、実際はいろんなものが挿入できます。その中からいくつかピックアップしてご紹介します。

WordPress Quicktags APIでHTMLエスケープ用特殊文字を挿入する

HTML tag は通常の文章内ではHTML tag として認識される為そのままでは文字として文章内に書くことができません。文字としてHTML tagを文章内におさめるにはそれ用の特殊文字(>と<)を必要とします。

WordPress Quicktags APIは特殊文字もカスタムタグとしてテキストエディターに追加することができ、HTML tag をストレスなく文章内に挿入することができます。コードを記述します。

function add_quicktags() {
    if (wp_script_is('quicktags')) {
        ?>
        <script type="text/javascript">
            QTags.addButton('html_tag', 'ht', '&lt;', '&gt;');
        </script>
        <?php
    }
}

add_action('admin_print_footer_scripts', 'add_quicktags');

function add_quicktags() {

if (wp_script_is('quicktags')) {

QTags.addButton('html_tag', 'ht', '<', '>');

</script>

<?php

}

add_action('admin_print_footer_scripts', 'add_quicktags');

WordPress Quicktags APIでUnicodeを挿入する。

WordPress Quicktags APIでUnicodeもテキストエディターにカスタムタグとして追加することができます。

<?php

function add_quicktags() {
    if (wp_script_is('quicktags')) {
        ?>
        <script type="text/javascript">
            QTags.addButton('html_tag', 'ht', '&#x2391;', '&gt;');
        </script>
        <?php
    }
}

add_action('admin_print_footer_scripts', 'add_quicktags');
?>

<?php

function add_quicktags() {

if (wp_script_is('quicktags')) {

QTags.addButton('html_tag', 'ht', '⎑', '>');

</script>

<?php

}

add_action('admin_print_footer_scripts', 'add_quicktags');

例

⎑PASSIVE-PULL-DOWN-OUTPUT SYMBOL

電気関係のクライアントさんのブログに特殊記号を挿入したらそれらしくて良いと思うのは私だけでしょうか？

Unicodeに関しては記事にしていますので伏せてお読みください。

Unicode ホームページ制作で使えそうなものをピックアップ！

今回の記事はいかがだったでしょうか？WordPress Quicktags APIでのテキスト(HTML)エディタへのカスタムタグの追加は繰り返しになりますが本当に便利な機能だと思います。皆さんも自分もしくはクライアント様が使い易いよう、投稿画面のテキスト(HTML)エディタをオリジナルにカスタムしてみて下さい。それではまた。