管理メニュー

JavaScriptPHP

【WordPress】テキストエディタにボタンを追加する方法

更新日:2023/04/04

エディターがブロックエディタに移行してしばらく経ちましたが、僕はいまだにテキストエディタを使っています。
ブロックエディタの第一印象がメンドクサイだったので…

そんなテキストエディターですが、装飾ボタンを追加するためにAddQuicktagというプラグインを使用していました。
しかし設定しても表示されなくなったので、ボタンを追加する機能を自作しました。

簡単なコードなので紹介します。

 

テキストエディタにボタンを追加するコード

まずは、今回作成した『テキストエディタにボタンを追加するコード』を掲載します。
独自プラグインを作成して、貼り付けてください。

class Option_My_Add_Qtag{
    private const group = 'settings-group-my-add-qtag';
    private const option_name = 'my_add_qtag';
    private const name = 'Qtag設定';
    private const slug = 'option_menu_my_add_qtag';

    function __construct(){
        add_action('admin_menu', 
              function() {

                add_menu_page($this::name,$this::name, 'manage_options' ,$this::slug,
                    array($this,'echo_option_menu_page'));
                
                add_action( 'admin_init', array($this,'register_option_menu') );
              },99);

            add_action('update_option_'.$this::option_name,array($this,'update_option'),10,3);
            add_action('admin_enqueue_scripts',array($this,'admin_enqueue_scripts'));
    }
        // ボタン追加スクリプトの出力
    function admin_enqueue_scripts(){
       
            $option = trim(get_option($this::option_name,''));
            if( $option==='') return;
            $script = '<script>'.$option.'</script>';
            wp_add_inline_script('quicktags',$script);
            
    }
        // スクリプトデータの自動読み込みをオフ
    function update_option($old_value, $value, $option){
            global $wpdb;
            $wpdb->update( $wpdb->options, array('autoload'=>'no')
                , array( 'option_name' => $option ) );

    }
        // 管理画面の表示処理
    function register_option_menu() {
        register_setting( $this::group, $this::option_name );
    }
        // 管理画面の表示処理
    function echo_option_menu_page($data) {
        
        $group = $this::group;
        $id = $this::option_name;

        ?>
            <div class="wrap">
                <h2><?php echo $this::name; ?></h2>
                <form method="post" action="options.php">
                 <?php 
                    settings_fields( $group );
                    do_settings_sections( $group );
                ?>
                <table class="form-table">
                    <?php
                    echo '<tr><th scope="row" >'.$this::name.'</th><td>'
                        .'<textarea id="'.$id.'" name="'.$id.'" cols="160" rows="7">'
                        .esc_textarea( get_option($id,'')).'</textarea>'
                        .'</td></tr>';
                    ?>
                </table>
                <?php submit_button(); ?>
            </form>
        </div>
    <?php
    }
}
new Option_My_Add_Qtag();

必要最小限な処理だけなので、意外と短いコードに収まりました。

 

解説

コードを適用すると、管理画面に『Qtag設定』メニューが追加されます。
このメニューを選択すると、次のような画面が表示されます。

『Qtag設定』メニュー

この画面の入力欄に、テキストエディタにボタンを追加するスクリプトを記述します。
記述したスクリプトは投稿画面にそのまま出力されて、実行されます。

今回は個人使用が前提なので、AddQuicktagのようにユーザーインターフェイスに力を入れる必要がありません。
しかしスクリプトをノーチェックで出力しているので、仮にプラグインとして配布するなら問題ですね。
もし配布するなら、AddQuicktagのような画面になりそうです。

 

スクリプトの解説

スクリプトで使用する QTags.addButton() の構文は、次のようになっています。

QTags.addButton()の構文

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance , attr)
  • id: 重複しない文字列
  • display: ボタンに表示する文字列
  • arg1: 開始タグまたはコールバック関数
  • arg2: 終了タグ
  • access_key: ショートカットアクセスキー(非推奨)
  • title: title属性(ボタン上にマウスを置いたときに表示される)
  • priority: 表示する順番1~(優先度)
  • instance: ボタンを追加するインスタンスの名前
  • attr: { ariaLabel: ボタンラベル, ariaLabelClose: 閉じたときのボタンラベル }

instanceは具体的な値は不明です。

attrは、ariaLabelとariaLabelCloseプロパティを持つオブジェクトです。
生成されるinputタグにaria-label属性が追加され、ボタンを押すごとに属性値がariaLabelとariaLabelCloseの値に入れ替わります。

aria-label属性があると、その値を音声読み上げソフトなどで読んでくれるようです。

 

使用例

入力例です。
次のようなボタンを追加します。

ボタン追加例

  // 最低限での追加
QTags.addButton('qt-black','黒','<span class="black">','</span>');
  // いろいろ設定して追加
QTags.addButton('qt-green','green','<span class="green">','</span>',''
   ,'緑色で装飾します'  , 1 , ''
   , { ariaLabel: "緑タグ" // 緑
     , ariaLabelClose: "緑閉じタグ" 
  }
);

  // コールバックで追加
const colorRed = (button,textarea)=>{
    const {selectionStart,selectionEnd} = textarea;
    if( selectionStart === selectionEnd ) return;

    const text = textarea.value.substring(selectionStart,selectionEnd)
    QTags.insertContent('<span class="red">' + text + '</span>');
};
QTags.addButton('qt-red','赤',colorRed);

コールバック関数の第一引数はボタン要素で、第二引数はテキストエリア要素です。
テキストエリアから選択済みの文字を取得する方法は、次のページを読んでみてください。

テキストエリアに、文字を挿入するときはQTags.insertContent()を使用します。

WordPressはHTMやCSSの知識も必要。総合的な知識を身につけよう。

更新日:2023/04/04

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。