先日、フォーラムの方に「抜粋をビジュアルエディターにする方法」の質問がありました。
WP編集画面の「抜粋」でビジュアルエディタを装備することは無理でしょうか?
それで、調べてみたら良いカスタマイズ方法があったので、メモがてら紹介です。
WordPressデフォルトだと「抜粋入力フォーム」は、以下のように表示されます。
今回紹介するカスタマイズを行うことで、以下のような「抜粋入力フォーム」となり、HTML編集もある程度容易になります。
目次
カスタマイズ方法
特に、仕組み等を気にしないのであれば、カスタマイズ方法は簡単です。
以下のコードを親テーマか子テーマの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 ( '<', '>', '"', '&', ' ', '&nbsp;' ) , array ( '<', '>', '"', '&', ' ', ' ' ) , $str ); } }
参考 Adding a rich text editor to Excerpt – WordPress Development Stack Exchange
動作確認
試しに「ビジュアルエディター型の抜粋」にHTMLを入力してみると、以下のようになります。
ボタンでHTMLを挿入できるので、HTML編集をする必要がある場合には、はかどります。
まとめ
こんな感じで、手順だけなら結構簡単にカスタマイズすることが可能でした。
ただしこの、「抜粋をビジュアルエディターにする恩恵」を受けるには、以下の条件が必要かと思います。
- 抜粋をHTML出力するテーマを使用する
- 自分でテーマ側の抜粋出力をカスタマイズする
もっと簡単に、「抜粋のビジュアルエディター化」を行うのであれば、以下のプラグインを利用すればインストールするだけで実装できます。
余計な手間をかけたくない場合は、上記プラグインを利用した方が楽かと思います。
こんにちは。
抜粋をPOP調にデザインしたいので、早速試してみた。
上手く行きませんでした。
テーマ「simplicty2」では、ビジュアルエディターにする恩恵がないのでしょうか?