記入時にはテキストとして開いていて、サイトの表示時点でrubyタグへ置換される感じ。
編集画面上でルビ化すっと、マウス操作でも小せぇ的をゴチャゴチャ弄らないといけないので若干苛ってするから。
漢字≪かんじ≫ → 漢字
漢《kan》字《ji》 → 漢字
本文内からclass=”ruby”の付いたspanタグを探し、タグ内の二重山括弧を置換するので、ルビとして構造が成り立つ囲い方であれば割と柔軟に振り仮名がつけられます。
ルビの構造的におかしくないかどうかのチェックはしていないので、塩梅良くやってください。
function krwts_furigana_span_to_ruby($content){
$pattern = '/<span class="ruby">(.+?)<\/span>/';
$content = preg_replace_callback($pattern, function($matches) {
$esc_text = esc_html($matches[1]);
$table = array(
'≪' => '<rp>(</rp><rt>',
'《' => '<rp>(</rp><rt>',
'≫' => '</rt><rp>)</rp>',
'》' => '</rt><rp>)</rp>'
);
$search = array_keys($table);
$replace = array_values($table);
$ruby_content = str_replace($search,$replace,$esc_text);
return '<ruby>'.$ruby_content.'</ruby>';
}, $content);
return $content;
}
add_filter('the_content','krwts_furigana_span_to_ruby');一々タグの手打ちとかしてらんないので、編集画面へ「ルビ」という名のマーカーを実装するべく、JavaScriptを登録して呼びだします。
add_action('enqueue_block_editor_assets',function(){
wp_enqueue_script(
'ruby-format',
plugin_dir_url(__FILE__).'/ruby-format.js',
array(
'wp-rich-text',
'wp-block-editor',
'wp-element',
'wp-components'
),
null,
true
);
});んで、これが呼びだすJavaScriptです。
const{registerFormatType,toggleFormat}=wp.richText;
const{RichTextToolbarButton}=wp.blockEditor;
registerFormatType('krwts/ruby',{
title:'ルビ',
tagName:'span',
className:'ruby',
edit:function(props){
return wp.element.createElement(
RichTextToolbarButton,
{
icon:wp.element.createElement('span',{
className:'dashicons dashicons-edit'
}),
title:'ルビ',
onClick:function(){
props.onChange(
toggleFormat(props.value,{
type:'krwts/ruby'
})
);
},
isActive:props.isActive
}
);
}
});「読めない人が居そうだから難しい漢字使うのやめよう」と諦める位なら、好きな漢字をたらふく使ってルビを振りまくろうぜ!