[WP] <ruby>タグが入力不要に!コピペで使える「ルビを振るショートコード」

本記事では、WordPressでタグ入力不要でルビ(ふりがな)を付けることができるショートコードの作り方をご紹介します。

おさらい:ルビを振るHTMLタグ <ruby>

まず、オーソドックスにHTMLでルビを振る方法からおさらいしましょう。

ルビを振るときは <ruby> タグを使います。

<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>

<rt> にはルビのテキスト(よみがな)、<rp> にはルビのテキストを囲む括弧(かっこ)等の記号を指定します。

すると、今さらっとルビを振った「括弧(かっこ)」のように表示されます。

ブラウザが <ruby> タグに対応している場合は <rp> で囲んだ部分は表示されません。

本題:WordPressで <ruby> を出力するショートコード!

WordPressでも先ほどのように <ruby> を使えばルビを振ることができますが、このタグは見ての通り構造が少しややこしいですよね。

そこで今回はWordPressのショートコードという機能を使って、より簡単な入力でルビを振る方法をご紹介します!

functions.php にコピペ追記するだけで出来ちゃいますよ!

functions.php に追記するPHP

お使いのテーマの functions.php に以下のコードを追記してください。

//<ruby>タグを出力するショートコード
function shortcode_ruby($atts, $content = null) {
    //区切り用の記号
    $separator = ':';
    //<rp>用の括弧
    $rp_before = '(';
    $rp_after  = ')';
    //区切り用の記号で区切る
    $content = explode( $separator, $content );

    //<ruby>タグを出力する
    return '<ruby>'.$content[0].'<rp>'.$rp_before.'</rp><rt>'.$content[1].'</rt><rp>'.$rp_after.'</rp></ruby>';
}
//ショートコードに追加
add_shortcode( 'ruby', 'shortcode_ruby' );

追記する方法

追記する方法は主に2つあります。
いずれの場合も、追記前に必ずバックアップを取りましょう!

  • WordPressの「外観」→「テーマエディター」から「テーマのための変数 function.php」を開いて追記→「ファイルを更新」
  • FTPでログインし、テーマファイル(例:/wp/wp-content/themes/sango-theme-child)内の function.phpをダウンロード後、追記し、再アップロード

使い方

[ruby]漢字:かんじ[/ruby] のように入力して使います。(この場合「漢字(かんじ)」と出力されます。)

エディター上でルビは振られませんが、公開されるページ上ではルビが振られた状態で出力されます。

カスタマイズ方法

区切りの記号に : 以外の記号を使いたい場合

上記コードの4行目を変更してください。

rubyタグ非対応環境で表示される括弧の種類を変えたい場合

上記コードの6行目および7行目を変更してください。


難しい漢字や読みづらい固有名詞などは、ルビを振ると読みやすくなりますよ。

ぜひお試しください!