WordPressの記事タイトルを改行してサイズ縮小したサブタイトルをつける方法～WordPress覚書き～
とあるWordpressサイトで、ブログ投稿の記事タイトルにサブタイトル（副題）を入れる時に、サイトデザイン的にサブタイトルを改行したい＆サブタイトルのサイズを縮小したかったので、実装した際の覚書き。
str_replaceを使ってタイトルを改行する
記事タイトルを改行したい場合は、str_replaceを使う方法が定番のようです。
例えば、記事タイトルに半角スペース×2を入力すれば、その部分が改行タグ（<br />）に置換されるようにする方法です。
|
1 2 3 4 5 |
<?php $title = get_the_title($ID); $title = str_replace(" ", "<br />", $title); echo $title; ?> |
single.phpなどのタイトルを表示する場所に上のコードを書いて、記事を作成する際に、タイトルの改行したい場所に半角スペース×2を入力すれば完了です。
（通常はタイトルの表示にthe_title()を使ってると思うので、それを上のコードに書き換えればOK）
参考：WordPressで任意ページのタイトルだけ改行させる方法
もちろん、function化して使うのもアリです。
|
1 2 3 4 5 6 7 |
<?php function the_title_br() { $title = get_the_title($ID); $title = str_replace(" ", "<br />", $title); echo $title; } ?> |
これをfunctions.phpに追加して、the_title()をthe_title_br()に書き換えればOK。
個人的にはこっちの方がスッキリして好きです。
ちなみに、別に半角スペース×2でなくとも（何か記号とか）でも良いのですが、トップページや関連記事のリンクに表示される記事タイトルなど、記事ページ（single.php）以外でもその記事のタイトルが使用される個所があるので、その部分で表記が乱れないようにするために、半角スペースが無難なのではないかと思います。
（記事ページ以外の箇所では、置換される前のタイトルが表示されます。）
str_replaceを配列で使って文字サイズを指定する
これを応用して、半ば無理やりですが、改行後の行の文字サイズを縮小させます。
これで、サブタイトルっぽくスッキリしたデザインになりました。
|
1 2 3 4 5 6 7 8 |
<?php function the_title_br() { $search = array(" -", "- "); $replace = array("<br /><span style=\"font-size: 0.8em;\">— ", " —</span>"); $title = get_the_title($ID); $title = str_replace($search, $replace, $title); echo $title; } |
記事タイトルのサブタイトルの手前に「半角スペース+半角ハイフン」を入れることで改行タグ＆spanタグ＆エムダッシュ＆半角スペースを、
後ろに「半角ハイフン+全角スペース」を入れることで、半角スペース＆エムダッシュ＆span終了タグを出力するようにしました。
後ろ側の検索文字列がなぜ全角スペースかと言うと、記事タイトル入力欄の最後の半角スペースは無視されてしまうからです。
あと、記事タイトルの半角ハイフンの後ろが全角文字でない場合は、半角ハイフンはエヌダッシュに自動変換されてしまうので、検索文字列に半角ハイフンを指定する場合は要注意です。（WordPressのデフォルトの設定らしい。徹底するなら半角ハイフンではなく、全角ハイフンを使うのもアリかなと思います。誤入力の可能性が出てくるけど。。）
今回は、特にクラス指定などしませんでしたが、CSSのメディアクエリでPCビューとスマホビューでサイズを分けた方が、よりデザインが崩れなくて良いのかもしれません。
コードは若干無理矢理感ありますが、参考になれば嬉しいです。
