WordPress記事投稿のHTMLエディタでのクイックタグを完全にカスタマイズする

最終更新日:2016年1月12日 / 作成日:2012年09月26日

WoedPressの記事投稿をちょっと楽にできる(かもしれない)方法。

記事の編集時のHTMLタグ入力を短縮して記事をいっぱい書こう!

タグエディタとは

WordPressで記事投稿をする際、完全に自分の意図した表示の形を求める場合HTMLエディタを使います。

ただ、HTMLエディタでいちいちHTMLタグを打って作成するのは非常に大変なので「クイックタグ」というHMTLタグ自動挿入ボタンを使いますが、いらないボタンもあれば追加したいボタンもあります。

そこでこのHTMLタグ自動挿入ボタンをカスタマイズをしたいと思います。

クイックタグのカスタマイズ

カスタマイズの方法を2つご紹介します。

Custom Quicktags

いくつか方法のある中で、最もわかり易いと思われるのが「Custom Quicktags」というプラグインを使用する方法。
自動挿入ボタンの追加・削除・変更ができるようです。
ただし現在はWordPressダッシュボード内のプラグイン追加では見つからない模様。

WordPress Plugins/JSeriesで日本語版が配布されています。(ダウンロード、インストールは自己責任で)
※自分は違う方法でカスタマイズをしたので、このプラグインを使用しませんでした。

WordPress構成ファイルを直接カスタマイズ

WordPress構成ファイルへ直接変更を加えるので、

  • 無駄なファイルも増えずに容量を抑えられる
  • しかも新しくWordPressサイトを作成する場合はこのファイル1つをコピペするだけというお手軽さ!

ではカスタマイズ説明。
目的のファイルは

WordPressルートフォルダ/wp-includes/js/quicktags.js

このquicktags.jsソースコードの下記部分(一番下の方にあります)がボタン設定をする場所です。
ソースコードが整形されてないので、jsコード自動整形サービスなどで自動整形する。

[JavaScript]
edButtons[10] = new c.TagButton(“strong”, “b”, ““, ““, “b”);
edButtons[20] = new c.TagButton(“em”, “i”, ““, ““, “i”),
edButtons[30] = new c.LinkButton(),
edButtons[40] = new c.TagButton(“block”, “b-quote”, “\n\n”, “\n\n”, “q”),edButtons[50] = new c.TagButton(“del”, “del”, ‘‘, ““, “d”),

 :
 :

edButtons[130] = new c.SpellButton(),
edButtons[140] = new c.CloseButton()
[/JavaScript]

(「\」は半角の¥マークです。「¥n」で改行の意味)
上記ソースコード内のいらないボタンをコメントアウト(もしくは削除)していきます。
自分は上記ソースコードを全部コメントアウトし、新しく直後に追加しました。

[JavaScript]
/*コメントアウトした上記デフォルトソース
 :
 :
*/
edButtons[10] = new c.SpellButton(),
edButtons[20] = new c.CloseButton(),
edButtons[30] = new c.LinkButton(),
edButtons[40] = new c.ImgButton(),
edButtons[70] = new c.TagButton(“ul”, “ul”, “

    \n

  • \n

\n”, “”, “u”),
edButtons[80] = new c.TagButton(“ol”, “ol”, “

    \n

  1. \n

\n”, “”, “o”),
edButtons[90] = new c.TagButton(“li”, “li”, “

  • \n”, “”, “l”),

     :
     :
    [/JavaScript]

    「edButtons[**] = new c.TagButton」とある部分がHTMLタグ自動挿入ボタンの設定部分になります。以下説明。

    edButtons[] = new c.TagButton(““, ““, ““, ““, ““)

    • A … HTMlエディタ上部のボタン配置順番
    • B … ボタン名
    • C … ボタンの表示名
    • D … ボタン押した時の動作1
    • E … ボタン押した時の動作2
    • F … 

    A の設定数値は10から始まり、10ずつ増えていきます。(本来の意味は”配置順番”とは違うのですが、この解釈でいいと思います。)
    C はHTMLエディタ上に表示されるボタンのラベルです。
    D、E はスイッチ式になっています。Eに何も入力されてない場合、Dの動作のみを繰り返します。

    ”HTML”タグや”任意の文字”の自動挿入ボタンを追加したいだけの場合、この方法だけで対処できます。

    おまけ

    「フルスクリーン」ボタンの表示を消す
    以下をコメントアウト

    [JavaScript]
    if (d && d.indexOf(“,fullscreen,”) != -1) {
    o.fullscreen = new c.FullscreenButton();
    m += o.fullscreen.html(e + “_”)
    }
    [/JavaScript]