PHP Wordpress

[WP] ソースコード編集画面が見やすくする「Advanced Code Editor」導入＋カスタマイズ

こんな感じのソースコード編集画面が、
screenshot.82

こうなります。
screenshot.84

まずは、プラグイン＞新規追加より以下のプラグイン追加
Advanced Code Editor

インストール
プラグインの有効で完了です。

ここからちょっとカスタマイズです。
必要な方だけ設定してみてください。
※ただ、ほかのプラグインの影響を検証していません。。

ソースコードのフォントがちょっと嫌だったので、
「font-family: Consolas,'Courier New',Courier,Monaco, monospace !important;」
に変更します。

codemirror.cssファイルの以下の部分を変更
/wp/wp-content/plugins/advanced-code-editor/css/codemirror.css

変更前

.CodeMirror {
  font-family: monospace;
}

変更後

.CodeMirror {
  font-family: Consolas,'Courier New',Courier,Monaco, monospace!important!important;
}

デフォルトテーマを使う場合、default.cssファイルの以下の部分を変更
/wp/wp-content/plugins/advanced-code-editor/themes/default.css

.CodeMirror {
  font-family: Consolas,'Courier New',Courier,Monaco, monospace !important;
}

wp-multibyte-patchプラグインのフォントが優先されるため、
強制的にコメントアウト。かなり強引です。
/wp/wp-content/plugins/wp-multibyte-patch/ext/ja/admin.css

変更前

body *:not(textarea) {
     font-style: normal !important;
     font-family: sans-serif !important;
}

変更後

body *:not(textarea) {
     /*　font-style: normal; !important*/
     /*　font-family: sans-serif; /*!important*/
}

以上です。wp-multibyte-patchのＣＳＳ編集は、
ほかへの影響はいまのところないようですが、
調査不十分なところもあるので、さらにもっと良い方法が
ありましたら、ご報告お願いします。

-PHP, Wordpress
-, , , ,