WordPressの投稿の編集画面に独自の入力欄を追加することってあります。例えば下のような感じです。

何でも書く用の入力欄を追加

ここに入力する内容は、html,CSS,画像などを使ってある程度装飾したい。

でも、htmlやCSSのことはよくわからないし、できれば文字以外の入力はもうちょっと感覚的にやりたい。

その場合は、この入力欄に対して普段WordPressの投稿の編集画面で使っているエディターを使えるようにしておくと便利です。

エディターを有効にする方法

例えば、下のような記述を「functions.php」ファイル内に追記します。

<?php
add_action( 'edit_form_after_editor', 'original_editor' );
function original_editor(){
 $content = ''; //あらかじめ表示させておきたい内容
 $editor_id = 'original'; //エディターを区別するために、IDを指定する

 echo '<h2>何でも書いてね</h2>';
 wp_editor( $content, $editor_id );
}
?>

すると、投稿の編集画面には下のように表示されます。

エディターが追加された

同じようなエディターが投稿の編集画面に2つある状態ですね。

コードがやっていること

アクションフック「edit_form_after_editor」を使って、通常用意されているエディターの下に新しくもう1つエディターを追加しています。

エディターは「wp_editor」を使って表示させています。

オプションを追加するとname属性などの指定もできるよ

name属性を個別に指定したい場合は、オプションで行えばOKです。

<?php
add_action( 'edit_form_after_editor', 'original_editor' );
function original_editor(){
 $content = ''; //あらかじめ表示させておきたい内容
 $editor_id = 'original'; //エディターを区別するために、IDを指定する
 $settings = array( 'textarea_name' => 'input[0][original]' ); //配列としてデータを渡すためname属性を指定する
 echo '<h2>何でも書いてね</h2>';
 wp_editor( $content, $editor_id, $settings );
}
?>

コードがやっていること

「wp_editor」の第3引数のオプションを指定することで、エディター内のtextarea要素のname属性を「input[0][original]」に指定しています。配列としてデータを渡すための指定もできるので、これはいいですね。

指定できるオプションは他にもあるので、詳細はCodexをご参考ください。

まとめ

エディターを使えるようにすると、より感覚的に入力が行えるのでWordPressの操作にあまり慣れていない方でも使ってもらえそうです。

これはおすすめのカスタマイズ・・・！

エディター内で、CSSの装飾に必要なidやclass属性を入れるなら、AddQuicktagプラグインを使うとさらにいいかもです。

ちなみにですが、入力した内容を独自のテーブルなどに保存する方法は「pre_post_update」などを使っています。

以上、何かのご参考となりましたら幸いです。