WordPress メタボックスでビジュアルエディタを追加
Rev.4を表示中。最新版はこちら。
概要
記事編集ページに、ビジュアルエディタを追加する処理の説明。
サンプルコードは以下。
https://github.com/kztomita/wordpress-plugin-sample-metabox
全体の説明は「WordPress メタボックス追加サンプルコード」を参照。
処理の説明
sample-metabox-admin-editor.phpの説明。
sample-metabox-admin-editor.phpは図1のようにビジュアルエディタを追加する。処理は主にメタボックスの表示処理と保存処理の二つに分かれる。
図1 sample-metabox-admin-editor.phpが追加するエディタ
ビジュアルエディタ表示処理
function sample_metabox_add_editor() { wp_nonce_field('sample_metabox', 'sample_metabox_editor_nonce'); $id = get_the_ID(); $content = ''; $post_meta = get_post_meta($id, SAMPLE_METABOX_METAKEY_EDITOR, true); if ($post_meta) { $content = $post_meta; } $settings = array(); wp_editor($content, SAMPLE_METABOX_NAME_EDITOR, $settings); } function sample_metabox_add_meta_boxes_editor() { add_meta_box('id_sample_metabox_editor', 'エディタ', 'sample_metabox_add_editor', 'post', 'normal', 'high'); } add_action('add_meta_boxes', 'sample_metabox_add_meta_boxes_editor');
メタボックスの表示処理はチェックボックスのものとほぼ同じ。エディタ自体はwp_editor()を呼び出すことで出力できる。
エディタ入力内容の保存処理
function sample_metabox_save_editor($post_id) { if (!isset($_POST['sample_metabox_editor_nonce'])) { return; } if (!wp_verify_nonce($_POST['sample_metabox_editor_nonce'], 'sample_metabox')) { return; } if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return; } /* 権限チェック */ if (isset($_POST['post_type']) && 'page' == $_POST['post_type']) { if (!current_user_can('edit_page', $post_id)) { return; } } else { if (!current_user_can('edit_post', $post_id)) { return; } } /* 保存 */ $content = $_POST[SAMPLE_METABOX_NAME_EDITOR]; update_post_meta($post_id, SAMPLE_METABOX_METAKEY_EDITOR, $content); } /* * save_post_{$post_type}のactionを使用 * 全post_typeを対象にするなら、save_post actionを使用 */ add_action('save_post_post', 'sample_metabox_save_editor');
保存処理の前半では、他のメタボックスの時と同じく、nonce、自動保存、権限のチェックを行う。チェックが終わったら、コンテンツをupdate_post_meta()で保存する。