日本語だと難読漢字などに読み仮名を入れるものとして使われるルビ。結構簡単なコードでショートコード化できるので実装してみました。
ルビ注釈要素によると、以下が基本的なタグの構造になっています。
<ruby>ここに漢字<rp>(</rp><rt>ここに読み仮名</rt><rp>)</rp></ruby>主要なブラウザではスタイルが設定されていますので、このタグを入れればすぐに使えます。
このHTMLタグの仕様として、表示できないブラウザでは漢字の後ろに括弧()書きで読み仮名が表示されるようなっています
コードを使用する前に、ここをクリックして注意事項をご確認ください
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
ルビ（読み仮名）を入れるショートコードの作成方法
ショートコードを出力するための以下のプログラムを、有効化しているテーマのfunctions.phpへ追加します。
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');コードを追加したら、本文内へ以下のショートコードを使用します。
[pwcn-ruby text="" furigana=""]漢字は「text」、読み仮名（ルビ）は「furigana」というパラメーターの中へ入れれば、漢字の上にルビが表示されます。
ちなみにこんな感じです（機能を停止している可能性がありますので画像で掲載します）。
全文にルビを振ろうとすると結構ショートコードでごちゃごちゃするので、難読漢字や特殊な読み方をするものだけに限定して使用したほうがいいかも知れません。
余談ですが、WordPressはブロックが作れないと．．と思っている方も多いかも知れませんが、ブロックにする利点はエディター上でほぼフロントエンドの見た目と同じように表示でき、ボタンなどで編集できる点で、その点を除けばショートコードでも十分機能させることができます。
恐らくWordPressでショートコードが使用できなくなることはないと思うので、以下のページなどを参考にショートコードプログラムの作り方を知っておくと、コンテンツ作成の幅が広がると思います。
コメントを残す