WordPress投稿管理画面の「抜粋」をビジュアルエディターにするカスタマイズ方法

先日、フォーラムの方に「抜粋をビジュアルエディターにする方法」の質問がありました。

WP編集画面の「抜粋」でビジュアルエディタを装備することは無理でしょうか?

それで、調べてみたら良いカスタマイズ方法があったので、メモがてら紹介です。

WordPressデフォルトだと「抜粋入力フォーム」は、以下のように表示されます。

Wordpressデフォルトの抜粋入力エリア

今回紹介するカスタマイズを行うことで、以下のような「抜粋入力フォーム」となり、HTML編集もある程度容易になります。

Wordpress投稿管理画面の抜粋をビジュアルエディターにした状態

スポンサーリンク
レクタングル(大)広告

カスタマイズ方法

特に、仕組み等を気にしないのであれば、カスタマイズ方法は簡単です。

以下のコードを親テーマか子テーマのfunctions.phpにコピペするだけです。

add_action( 'add_meta_boxes', array ( 'VisualEditorExcerptDemo', 'switch_boxes' ) );
class VisualEditorExcerptDemo{
  public static function switch_boxes()
  {
    if ( ! post_type_supports( $GLOBALS['post']->post_type, 'excerpt' ) )    {
      return;
    }

    remove_meta_box(
      'postexcerpt' // ID
    ,   ''      // スクリーン、空だと全ての投稿タイプをサポート
    ,   'normal'    // コンテキスト
    );

    add_meta_box(
      'postexcerpt2'   // Reusing just 'postexcerpt' doesn't work.
    ,   __( 'Excerpt' )  // タイトル
    ,   array ( __CLASS__, 'show' ) // 表示関数
    ,   null          // スクリーン
    ,   'normal'      // コンテキスト
    ,   'core'        // 優先度
    );
  }


  //メタボックスの出力
  public static function show( $post )  {
  ?>
    <label class="screen-reader-text" for="excerpt"><?php
    _e( 'Excerpt' )
    ?></label>
    <?php
    //デフォルト名の'excerpt'を使用
    wp_editor(
      self::unescape( $post->post_excerpt ),
      'excerpt',
      array (
      'textarea_rows' => 15
    ,   'media_buttons' => false
    ,   'teeny'     => true
    ,   'tinymce'     => true
      )
    );
  }

  //エスケープ解除
  public static function unescape( $str )  {
    return str_replace(
      array ( '&lt;', '&gt;', '&quot;', '&amp;', '&nbsp;', '&amp;nbsp;' )
    ,   array ( '<',  '>',  '"',    '&',   ' ', ' ' )
    ,   $str
    );
  }
}

参考 Adding a rich text editor to Excerpt – WordPress Development Stack Exchange

動作確認

試しに「ビジュアルエディター型の抜粋」にHTMLを入力してみると、以下のようになります。

ビジュアルエディター型抜粋の動作確認

ボタンでHTMLを挿入できるので、HTML編集をする必要がある場合には、はかどります。

まとめ

こんな感じで、手順だけなら結構簡単にカスタマイズすることが可能でした。

ただしこの、「抜粋をビジュアルエディターにする恩恵」を受けるには、以下の条件が必要かと思います。

  • 抜粋をHTML出力するテーマを使用する
  • 自分でテーマ側の抜粋出力をカスタマイズする

もっと簡単に、「抜粋のビジュアルエディター化」を行うのであれば、以下のプラグインを利用すればインストールするだけで実装できます。

A WordPress plugin which enables Rich Text editing in excerpts for any post type which supports them.

余計な手間をかけたくない場合は、上記プラグインを利用した方が楽かと思います。

『WordPress投稿管理画面の「抜粋」をビジュアルエディターにするカスタマイズ方法』へのコメント

  1. 名前:香香 投稿日:2017/10/04(水) 16:51:51 ID:9d66f99ce

    こんにちは。

    抜粋をPOP調にデザインしたいので、早速試してみた。
    上手く行きませんでした。
    テーマ「simplicty2」では、ビジュアルエディターにする恩恵がないのでしょうか?

  2. 名前:わいひら 投稿日:2017/10/05(木) 23:46:16 ID:4888ce0fd

    こんにちは。

    そうです。Simplicityは抜粋のタグなどを取り除いて表示させているので、ビジュアルエディターにする恩恵を受けないテーマとなっています。
    Simplicityの場合、メタディスクリプションとしても利用しているので、取り除いていました。
    恩恵を受けるには、インデックスリストのエントリーカードのスニペット部分で、直接抜粋を出力するようにカスタマイズするしかないかもしれません。