In Japanese, ruby is used to add pronunciations to difficult-to-read kanji. I tried implementing it because it can be made into a shortcode with a fairly simple code.
According to the ruby annotation element, the following is the basic tag structure:
<ruby>Kanji here<rp>(</rp><rt>reading kana here</rt><rp>)</rp></ruby>The styles are set in major browsers, so you can use it immediately by adding this tag.
As a specification of this HTML tag, in browsers that cannot display it, the reading kana is displayed in parentheses () after the kanji.
Add the following program to output shortcodes to functions.php of the enabled theme.
function pwcn_ruby_shortcode( $atts ){
$atts = shortcode_atts( array(
'text' => '',
'furigana' => '',
), $atts );
$text = $atts['text'];
$rubi = $atts['furigana'];
if(isset( $text )){
$tx = esc_html( $text );
}else{
$tx = '';
}
if(isset( $rubi )){
$rb = esc_html( $rubi );
}else{
$rb = '';
}
return '<ruby>'.$tx.'<rp>(</rp><rt>'.$rb.'</rt><rp>)</rp> </ruby>';
}
add_shortcode('pwcn-ruby','pwcn_ruby_shortcode');After adding the code, use the following shortcode in the body.
[pwcn-ruby text="" furigana=""]If you put the kanji in the parameter “text” and the reading kana (ruby) in the parameter “furigana”, the ruby will be displayed above the kanji.
By the way, it looks like this (I will post it as an image since it may have stopped functioning).
If you try to add ruby to the entire text, it will get quite messy with short codes, so it may be better to limit it to difficult-to-read kanji or things that have a special reading method.
As a side note, you can’t create blocks in WordPress. ．． Many people may think that, but the advantage of using a block is that it can be displayed in the editor in the same way as the front end, and can be edited using buttons, etc. Other than that, shortcodes are sufficient. You can make it work.
I don’t think you’ll ever be able to use shortcodes in WordPress, so if you learn how to create a shortcode program by referring to the pages below, I think you’ll be able to expand your range of content creation.
