WordPressで簡単にルビ（ふりがな）と傍点を振ることのできるコードをドヤ顔で公開します

date: 2015年6月17日(水) 0時00分

category

tags

~~【2016年1月9日追記】~~
有り難いことに当記事へのアクセスが増加しているのですが、それに伴いこんな内容を公開しているのがなんだかはずかしくなってきたので、近日中にまともな内容に再編集します。

【2016年1月31日追記】
再編集というか、この記事の内容を改善して、プラグインとして公開しました：WordPressの投稿でルビや圏点（傍点）をとても簡単に入力できるようになるかもしれないプラグイン「Simple Ruby」をドヤ顔で公開します

WordPressプラグインじゃなくてコードが欲しいんだけど、という方へ：
ご面倒をおかけしますが、HTMLマークアップは上記記事の末尾を、CSSは配布しているzipの中にあるcssファイルをご参照ください。

下記の内容は古くなってしまいましたが、筆者が必死なのが面白いので残しておきます。技術的に不確かな部分があるかもしれません。ご注意ください。

シンプルな記述方法でルビ（ふりがな）と傍点を振れるWordPress用のコードを公開します。

WordPressのエディターには、ルビとか傍点をふる機能は標準では付いてません。
そこでエディターのツールバーにルビボタンを追加できるWP-Yomiganaプラグインのお世話になるわけですが、当ブログの作者のように比較的知能が低く面倒くさがり屋であると「紙で書くならフツーに文字の上なり横なりに小さく書けばいいだけなのに何でWordPressで書く時はボタンを押さないといけないのぉぉ」などとどうしても無茶なことを考えたりします。

しかし十人十色ということで、もしかしたらこの投稿を読んでくれているあなたも、文章にルビを振りたい人で、かつ私と同じくらい面倒くさがり屋かもしれません。
そういう場合はこの投稿の内容は少し役に立つかも。

何をしたいのか

以下のように書いたものをルビタグのマークアップに変換したいです。
（18:00追記：全角で書いてもOKにした。いちいち半角に切り替えるのが面倒だったので）

｜漢字（かんじ）　→　漢字（かんじ）
｜漢字（かんじ） → 漢字（かんじ）

ラノベみたいに傍点もつけたいです。

＊傍点＊　→　傍点

具体的なコードの内容

以下のコードを functions.php ファイルに追記します。

function the_content_replace($text){
    $string=$text;

    $pattern = '/＊(.*?)＊/i';
    preg_match_all($pattern, $string , $match);
    foreach($match[1] as $m){
        $tmparr=preg_split("//u", $m, -1, PREG_SPLIT_NO_EMPTY);
        $string2 = '<strong class="botenparent"><span class="boten">'.
        implode('</span><span class="boten">',$tmparr).
        '</span></strong>';
        $string = str_replace("＊".$m."＊", $string2, $string);
    }

    $pattern = '/|(.*?)((.*?))/i';
    $replacement = '<ruby><rp>（</rp><rt></rt><rp>）</rp></ruby>';
    $string= preg_replace($pattern, $replacement, $string);

    $pattern = '/｜(.*?)（(.*?)）/i';
    $replacement = '<ruby><rp>（</rp><rt></rt><rp>）</rp></ruby>';
    $string= preg_replace($pattern, $replacement, $string);

    return $string.
      '<style type="text/css">'.
      '.botenparent{font-weight: normal;}'.
      '.boten{display: inline-block;position: relative;}'.
      '.boten:after{position: absolute; left:0.375em; top:-0.625em;font-size: 0.5em;content:"﹅";display:block;font-family: "YuMincho","游明朝","MS PMincho","ＭＳ Ｐ明朝",serif;}</style>';
}

add_filter('the_content', 'the_content_replace');

マルチバイト文字が入ってるので、UTF-8で保存してください。でないと文字化けしちゃうので。

実際どんな感じのHTMLが出力されるかについては、出力されたソースコードを覗いてみてください。
傍点は無理矢理明朝体にしてますが、別に本文のフォントと同じでいいよという場合はfont-familyは消しちゃってください。あと.botenという名前が気に入らない場合はそこもテキトーに変えてください。

好きにいじれば、好きな記号で囲んで好きにマークアップできますね。例えば技術ブログならcodeタグをよく使うと思いますが、｛｝で囲んでcodeタグのマークアップ、とかできるわけです。上記コードのreturnの行の上にこんな感じの追記でいいかと思います。

    $pattern = '/｛(.*?)｝/i';
    $replacement = '<code></code>';
    $string= preg_replace($pattern, $replacement, $string);

うん。

文字列置換とかの部分は一から書くのが面倒だったので、どこかの技術ブログのコードを拝借したかもしれません。どこかは忘れた。もし心当たりのある人がいたらごめんなさい。

補足

傍点はrubyタグは使わず、スタイルシートの:after疑似要素で表現してます。なぜ傍点をrubyタグで表現しなかったのかというと、そもそも傍点は読み仮名ではないというところに帰結するのですが、直接的な理由として、強制的にHTMLタグが取り除かれるケース（フィードとか）の場合に、「傍点（﹅﹅）」とかいう妙なテキストが表示されてしまうからです。

難点

難点を挙げるとすれば、本文中に「｜」（縦線。パイプって言うんだっけ？）をうかつに書けないってことですかねー。
どうしても縦線を書きたい時は、「エスケープ」できるようにしましょう。半角のバックスラッシュ（というか円記号）を｜の直前に書く、つまり「｜」と書けばその記号は無視される、というやつです。さあ以下の例を見るがいい。

$string=str_replace("|","ああああああああああああああ", $string);
$string=str_replace("(","いいいいいいいいいいいいいい", $string);
$string=str_replace(")","うううううううううううううう", $string);

$pattern = '/|(.*?)((.*?))/i';
$replacement = '<ruby><rp>（</rp><rt></rt><rp>）</rp></ruby>';
$string= preg_replace($pattern, $replacement, $string);

$string=str_replace("ああああああああああああああ","|", $string);
$string=str_replace("いいいいいいいいいいいいいい","(", $string);
$string=str_replace("うううううううううううううう",")", $string);

ﾄﾞﾔｧ。

難点２

傍点は「＊」で囲むようにしてますが、うっかり＊を使っちゃうかもという人は、自分が本文では絶対に使わない記号で、かつキーボードから入力しやすい文字に変えちゃうといいと思います。それか＊＊＊こんなかんじ＊＊＊に重ねるとか。具体的には｛$pattern = ‘/＊(.*?)＊/i’;｝の部分を以下のような感じに。

 $pattern = '/＄(.*?)＄/i';//全角ドル記号にしちゃう

 $pattern = '/＊＊＊(.*?)＊＊＊/i';//３つの＊で囲むようにしちゃう

プラグインにするには？

ところで、functions.php に追記するようなコードというのは、大抵プラグインにできるらしいです。
わたしも実際には functions.php に書くのではなく、プラグインにして使ってます。
プラグインの作り方は検索すればいろいろ出てきますが、私はこちらの記事を参考に作りました。割とあっさり作れます。

WordPressのプラグインを作ってみる。まずは簡単なプラグインの作り方。
http://hayashikejinan.com/wordpress/341/

プラグインにすれば、テーマを変えてもfunctions.phpの内容まで移動させなくてよいので便利ですね。