
先日、フォーラムの方に「抜粋をビジュアルエディターにする方法」の質問がありました。
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」では、ビジュアルエディターにする恩恵がないのでしょうか?