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」などを使っています。
以上、何かのご参考となりましたら幸いです。
このページを共有する