管理ページの「テーマエディター」では4.9以降「CodeMirror」が利用されている。今回はこの「CodeMirror」をプラグインで活用できないか調べた話である。ソースコードを眺める「テーマエディター」のページを開くと、テーマのstyles.cssの内容を表示し、少し間をおいて行番号を表示しなおしている。このことからJavaScriptを使用していることが予想でき、そのあたりに着目して/wp-admin/theme-editor.phpを見ていくと、wp_enqueue_code_editor関数が見つかった。wp_enqueue_style関数を使って'code-editor'を出力用のキューに入れている。この'code-editor'は/wp-includes/script-loader.phpで次のように指定されている。);どうやら'wp-codemirror'の名前で定義されている「CodeMirror」がエディターの本体で、関連するスクリプトも定義されているようだ。「CodeMirror」はfromTextAreaメソッドを使用してエディターの初期化を行う。「テーマエディター」では/wp-admin/js/code-editor.jsで以下のように指定している。);WordPressの管理ページ内にあるtextarea要素を変更する場合、wp_enqueue_code_editor関数を使用するのが手っ取り早いが、今回は下位レベルの'wp-codemirror'として登録されているものを使用して基本的な使い方を理解しようと思う。最終的には自身のプラグインで「CodeMirror」を使いたいのだが、まずは身近にあるダッシュボードの「クイックドラフト」で試してみる。「クイックドラフト」のtextarea要素を「CodeMirror」に変更するため、スクリプトとスタイルの組み込みには'admin_enqueue_scripts'アクションを使用するのだが、その前段階として'wp_dashboard_setup'アクションを使用し、ほかのページに影響を与えないようにする。);}実際にスクリプトとスタイルを組み込むtextarea2_enqueue関数の内容は次の通り。'wp-codemirror'の名前で登録されているものを、それぞれwp_enqueue_script関数とwp_enqueue_style関数を使って出力キューに入れる。);}wp_add_inline_script関数で追加しているスクリプトでは、loadイベントを使用し、CodeMirrorインスタンスを生成する。連想配列で指定しているパラメータは多いため、ここでは主なパラメータのみを紹介する(あくまで主観的)。falseextraKeysにはキーの組み合わせとそのアクションを複数指定できる。上記の指定は、Ctrl+Fキーおよびcommand+Fキー押下時にエディター内のワード検索ボックスを表示する指定となる。CodeMirrorインスタンスを生成した後にblurイベントについて記述している。これはCodeMirrorインスタンスで編集した内容と元のtextarea要素を同期するための「おまじない」で、フォーカスが外れたタイミングで同期を行い、「下書きとして保存」ボタンをクリックした際に正しく保存できるようにした。wp_add_inline_style関数で追加したスタイルは、CodeMirrorエディターの外観用である。標準では少し高すぎるので、ここで高さと下マージンなどを調整している。実際に上記のコードを適用した画面がこちらである。もとのtextarea要素のプレースホルダーが引き継がれ、行番号が表示されている。最後に「CodeMirror」を使ってみて気づいたことを1つ紹介。それは非表示のtextarea要素に対してCodeMirrorインスタンスを生成すると、行番号の表示が乱れてしまうことだ(この症状はブラウザ依存かもしれない)。これはtextarea要素が非表示の場合、行番号部分を表示する幅を正しく取得できないことが原因。対象のtextarea要素を表示状態に変更してからCodeMirrorインスタンスを生成することでこの問題は回避できる。「CodeMirror」はcssやJavaScriptのLINT機能も備えており、必要に応じて追加可能である。今回はお試しということで基本機能のみを使ってみたが、実際に実装する際はそれらも検討したい。)パラメータ$dで指定したフォーマットで投稿日を取得する。)PHPバージョンの互換性を調べる。)投稿情報が指定したカテゴリーに属しているか調べる。)IDを指定してカテゴリー情報を取得する。)WordPressシステムの関数にアクション関数を追加する。©12NetWordPress私的マニュアル主にjQueryのメモPHPExcelのノートWebの。