【wordpress】テキストエディタをカスタマイズする

こんにちは!chi-taraです。

投稿(以下記事)を書く際に「たいへんだなー」とか「めんどくさいなー」って思うようになると、記事を更新しなくなり運営が滞りがちですよね。。。

Wordpressのエディタを使いやすくするって結構重要なことなんです。

今回は、『テキストエディタのカスタマイズ』についての記事を書いていきます。

本記事は以下のような人をターゲットにして書きますので、当てはまらない方は別の記事を参考にしてください。

  • Wordpressで「ビジュアルエディタ」ではなく「テキストエディタ」を使用する人
  • htmlで記事を書きたい人
  • phpのテンプレートファイルを編集する自信がある人

プラグイン『HTML Editor Syntax Highlighter』をインストールする

html editor

まずは『HTML Editor Syntax Highlighter』というプラグインをインストールしましょう。

このプラグインは有効化するだけで以下のようなことができます。

  • 『ctrl-s』で記事の保存ができる
  • コードが色付けされる(色付けのテーマは自分で選ぶことができます)
  • 行番号が記載される
  • 自動でインデントがつく
  • 行間、文字サイズを設定できる
  • 編集中の行がハイライトされる

これだけで立派なエディタになった感がすごいです。プラグイン自体も設定がほとんどなく、テーマや文字サイズを設定するくらいです。

html editor

こちらの記事では詳しい使い方は省略いたします。使い方が知りたい方は、google検索で調べて見てください。(すぐに出てきます)

自作のボタンを設置しよう!

htmlで記事を書きたい人は、独自のcssを使用している方も多いと思います。

決まったクラスのついたタグを毎回毎回入力するのはとても不便ですよね。

今回はそれを改善するべく、押すと独自のタグがエディタ内に挿入されるボタンを作っていきます。

行う作業は以下の2つです。

  • Wordpressにもともと用意されているボタンを削除する(不必要なものだけ)
  • 独自のタグを挿入するボタンを設置する

Wordpressにもともと用意されているボタンを削除する

まずはこちらから見ていきましょう。

Wordpressには以下のボタンがもともと用意されていると思います。今回は『img』と『link』以外のボタンを削除してみましょう。

button

やることはとても簡単で、使用しているWordpressのテーマの functions.php に以下のコード追加するだけです。

削除したいものは適宜指定してください。

/* editorの不要なボタンを削除 */
function remove_html_editor_buttons( $qt_init) {
    // ここに削除したいものを記述
    $remove = array('strong', 'em', 'block', 'del', 'ins', 'ul', 'ol', 'li', 'code', 'more');
    $qt_init['buttons'] = implode(',', array_diff(explode(',', $qt_init['buttons']), $remove));
    return $qt_init;
}
add_filter( 'quicktags_settings', 'remove_html_editor_buttons' );

独自のタグを挿入するボタンを設置する

次に独自のボタンを作成していきましょう!

こちらも先程と同様に使用しているWordpressのテーマの functions.php に以下のコード追加します。

/* editorにボタンを追加 */
function themes_add_quicktags () {
    if ( wp_script_is( 'quicktags' ) ) {
        $html  = '<script>';
        /*
            ボタン名: pタグ
            書き方:QTags.addButton( ID, ボタンテキスト, 開始タグ, 終了タグ, アクセスキー, タイトル, 優先順位(1が先頭) );
        */
        $html .= 'QTags.addButton( "df_p", "p", "<p>", "</p>", "p", "df_p", 1 );';
        $html .= '</script>';

        echo $html;
    }
}

IDはString型(文字列)で自由に設定することができます。

アクセスキーとタイトルは何使用しているのか分かりませんが、上記の設定で問題ありませんでした。

まとめ

いかがだったでしょうか?走り書きで書いてしまったので、わかりづらい部分があったかもしれません。

記事に対する希望や質問はチャットボットや、コメントで受け付けていますのでどんどんご連絡ください!

※ 実装に使用した環境はWordpress 4.9.4です。