投稿ページの入力画面に複数のビジュアルエディタを追加する:メモ

Cat WEBサイト構築Tag by cubismer
メモ
メモ

以前に作成した「WordPressの投稿エディタを増やして特定のページテンプレートを選択したページにのみ表示:メモ」を利用して、投稿ページ（single）の入力画面のみに複数追加する際のメモ。

以前のコードをほぼ流用しているため不安な部分もありますが、とりあえずこちらも動いたので個人的な記録用に残す次第です。

[2016.4.10 追記あり]

実現したいこと

実現したいことは以下の通りです。

  • ビジュアルエディタを複数追加
  • 投稿ページ入力画面だけが対象

コード

先に作成したコードを記載します。


add_action('current_screen','add_editors');
function add_editors() {
  global $current_screen;
  if ($current_screen->post_type == 'post') {
    add_action('edit_form_after_editor', 'add_custom_form' );
    add_action('save_post', 'my_box_save');

    function add_custom_form() {
      global $post;
      wp_nonce_field(wp_create_nonce(__FILE__), 'my_nonce');
      $content_1 = get_post_meta($post->ID,'custom_contents_1',true);
      $content_2 = get_post_meta($post->ID,'custom_contents_2',true);
      $args = array(
        'textarea_rows'=> 14,
        'teeny'=> false,
        'quicktags'=> true
      );
      echo '<h2>追加エディタ1</h2>';
      wp_editor( $content_1, 'my_extend_editor_1',$args );
      echo '<h2>追加エディタ2</h2>';
      wp_editor( $content_2, 'my_extend_editor_2',$args );
    }

    function my_box_save($post_id) {
      global $post;
      $my_nonce = isset($_POST['my_nonce']) ? $_POST['my_nonce'] : null;
      if(!wp_verify_nonce($my_nonce, wp_create_nonce(__FILE__))) {
        return $post_id;
      }
      if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return $post_id; }
      if(!current_user_can('edit_post', $post->ID)) { return $post_id; }
       update_post_meta($post->ID, 'custom_contents_1', $_POST['my_extend_editor_1']);
       update_post_meta($post->ID, 'custom_contents_2', $_POST['my_extend_editor_2']);
    }
  }
}

細かい部分は、以前の「WordPressの投稿エディタを増やして特定のページテンプレートを選択したページにのみ表示:メモ」を参照のこと。

functions.phpで出力する場合[2016.4.10 追記]

Table of Contents Plusなどの、通常のエディタ入力部に作用するタイプのプラグインにも対応するため、出力方法を見直しました。

具体的には、single.phpなどのテンプレートではなく、functions.phpに以下を記載します。


function custom_contents($the_content) {
  if (is_singular()) {
    global $post;
    $return  = $the_content;

    if(post_custom('custom_contents_1')){
      $return .= wpautop(do_shortcode(get_post_meta($post->ID,'custom_contents_1',true)));
    }
    if(post_custom('custom_contents_2')){
      $return .= wpautop(do_shortcode(get_post_meta($post->ID,'custom_contents_2',true)));
    }
    return $return;
  } else {
    return $the_content;
  }
}
add_filter('the_content','custom_contents');

the_contentのフックを使って、追加したエディタで入力した内容の入ったカスタムフィールドを結合している形です。

wpautop()を使うことで、通常のエディタで反映されるようなpタグや改行を追加エディタ部分でも反映させることが可能です。

テンプレートファイルで出力する場合

テンプレートファイル（今回はsingle.php）での出力は以下のとおり。


<?php if(post_custom('custom_contents_1')): ?>
 <?php echo nl2br(do_shortcode(get_post_meta($post->ID,'custom_contents_1',true)));?>
<?php endif; ?>
<?php if(post_custom('custom_contents_2')): ?>
 <?php echo nl2br(do_shortcode(get_post_meta($post->ID,'custom_contents_2',true)));?>
<?php endif; ?>

改行の反映とショートコードへの対応のためにnl2br()とdo_shortcode()を用いています。

Add Quicktag

プラグインのAdd Quicktagは、追加したエディタにも効果があることを確認しました。

ビジュアルとテキストの切替

本来のものと追加したものを含めたどれか一つでもテキストとビジュアルを切り替えると、記事保存後に再度投稿画面に戻った時に、すべてのエディタが切り替えた方に統一されてしまいました。

wp_editorに渡す値で変えられそうにみえましたが、分からずです。

「投稿ページの入力画面」か否かで分岐

「投稿ページの入力画面」と書くと少々ややこしいかもしれませんので、「固定ページではない方の入力画面」という理解でもよいかと。

さて、投稿ページといえばis_single()ですが、管理画面内での分岐のため当然使えません。

どうやって分岐すれば良いのか探し、最終的には以下のようなものを利用しました。


add_action('current_screen','my_check_post_type');
function my_check_post_type() {
  global $current_screen;
  if ($current_screen->post_type == 'post') {
//投稿ページの入力画面の時に表示させる内容を記載
  }
}

参考にしたのは以下のページ。$current_screenというのは初めて知りました。

結び

そういえば、post_type == ''というのはカスタム投稿タイプでも見た形だなと後で思いだしました…。

current_screenを使わなくても別の方法があったのかもしれません。

0人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄