[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をダウンロード後、追記し、再アップロード