WordPressで、このタイトルのここだけを改行したいんだよ!ってことありませんか?
そんなわがままを解消したので備忘録です。
最近、ブラウザ幅いっぱいの画像や背景を使ったデザインって多いですよね。
ドーンとしたインパクトがあって、特に画像を使ったものはとても好きです。
だけど、自分のブログでいざそれをしようとすると、記事毎に画像を選定したり作ったりっていう作業が出てしまうので、正直面倒です。
書きなぐり系のブログなので、画像のサイズを意識したり、デザイン的なクオリティのダメさ加減に悶絶したりする時間が勿体無い。
かといって、全記事同じヘッダー画像を使うってのもなんかもやもやが残ります。
なんでしょう、このもやもやは。
ちっぽけなプライド的なものでしょうか。
この問題を解決するためにわたしが考えたのは、画面いっぱいの背景帯に個別記事のタイトルを入れることでごまかす方法です。
タイトルをセンタリングすると変なところで改行が発生する問題
デザイン的にタイトルをセンタリングすることにしました。
すると、タイトルによってはちょっと間抜けっぽい見栄えになるところで改行されることがあります。
少し間抜けな感じですよね。
「ブランドロゴiconを」で改行できてらスッキリキレイになりそうです。
一番てっとり早い方法として採用したのが、単純に投稿時のタイトルの改行したいところに改行タグ<br>を入れる方法です。
投稿時タイトルに<br>を入れる
投稿画面のタイトルに<br>を入れて更新すると、よしよし、と思える表示になりました。
よきかな、よきかな。
と、思うのはまだ早い。
改行したいのは、個別記事ページのタイトルだけでその他のアーカイブのタイトルだったり、サイドバーに設置している最近の記事一覧につていもタイトルも改行したくはありません。
これから先の未来に、何かしらの記事一覧をどこかに出したくなる可能性もあります。
まだ見ぬ一覧についてもタイトル内の改行はしたくありません。
そんなわがままな気持ちを解消する方法がこの記事の本題です。
個別記事のタイトル以外は一括してhtmlタグを削除する
個別記事以外のタイトルに関しては、一括してフィルターフックでhtmlタグを削除することで対処することにしました。
is_singular()がtrue、かつ、in_the_loop()がfalseの時だけ、そのままタグ付きの投稿タイトルを表示し、それ以外の場合は、PHPのstrip_tags()関数でHTMLタグを削除しています。
上記条件に当てはまる、ループ外の箇所があるとすればtitleタグが思い当たりますが、その他も含めhtmlタグが含まれるべきではない属性への出力などに関しては、おおよそどのテンプレートでもthe_title_attribute()で既にタグの削除が行われているものと想定しているため上記ソースでは何もしていません。
the_title_attribute()がthe_title()と違うところ
どちらもタイトルを表示させるための関数でタイトルを表示させるテンプレートタグであるという意味ではほぼ同じです。
異なる点は、the_title_attribute()はhtmlの属性として利用できるように下記処理が施されている点です。
strip_tags() を使って HTML タグを除去。
esc_attr() を使って特定の文字(引用符を含む)を同等の文字実体参照へ変換。
テンプレートを自作している場合なんかは、念のためソースを表示して、タイトルをチェックしておいた方が良いかもしれません。
title属性の要素に改行が含まれている場合は、テンプレートで調整する方が早いしタイトル出力関数の選択としてもthe_title()ではなく、the_title_attribute()を使用するのが清く正しく美しい感じかと思います。
ちなみにこの記事自体も、タイトルに改行を入れています。
コメントを残す