WordPressのキャッチフレーズをheader.phpに直接書き込まないで2行以上表示する方法を試してみたところ、もう1ヵ所修正が必要だった件(おまけ付き)

By | 2017年6月2日 , Last update: 2017年6月17日

このWebサイトのキャッチフレーズをスマホで見ると、

上図のようにちょっと微妙なところで折り返してしまっているので、これを修正しようと思い、Wordpressの管理画面のメニューから「外観」→「カスタマイズ」を選択し、

のようにキャッチフレーズにbrタグを追加し、再度表示をしてみたところ、

(^ω^)…

brタグに反応してくれません。

スポンサーリンク

直観的に思いつく方法

直観的に思いつくのは、「header.phpを編集し、キャッチフレーズを直接書いちゃえばいいじゃん。」という解決策で、

<?php bloginfo( ‘description’ ); ?>

を削除してしまって、

一度覚えると忘れてしまう computer tips and tricks が<br/>
そこにある。

に置き換える方法なんですけどね…

ただ、これをやってしまうと、後でキャッチフレーズを変更するたびに直接header.phpをいじることになり、後々のメンテナンスが面倒になりかねないのと、データベースに記録することができるデータ(キャッチフレーズはwp_optionsテーブルの1レコードとして以下のように格納されています。

+———–+—————–+————————————————————————————————–+———-+
| option_id | option_name | option_value | autoload |
+———–+—————–+————————————————————————————————–+———-+
| 4 | blogdescription | 一度覚えると忘れてしまう computer tips and tricks が、&lt;br/&gt;そこにある。| yes |
+———–+—————–+————————————————————————————————–+———-+

)を使う状態をキープしておけば、引き続き管理画面から編集ができると思ったので、少なくともキャッチフレーズの文字列はデータベースに格納し、かつPHPのコードの修正は最小限に抑えることのできる解決策を考えることにしました。

データベースのレコードの文字列を活用する方法


スポンサーリンク

というわけで、データベースに格納されている上記のレコードを活用する方法を考えることにします。やり方は簡単で、

<?php bloginfo( ‘description’ ); ?>

をPHPのpreg_replace関数を使った以下の形に書き換えます。

<?php echo preg_replace('{&lt;br/&gt;}','<br/>',get_bloginfo( 'description' )); ?>

タグをすべて対象にしてしまうと、いろいろと怖いので、brタグだけを書き換える形にしてあります。第1引数に指定している置換対象となる文字列にスラッシュが含まれているため、デリミタとして'{}’を使用しています。

動作の確認。

このように変更後、Wordpressの管理画面のメニューから「外観」→「カスタマイズ」を選択し、

のようにキャッチフレーズにbrタグを再度追加してみると…

いい感じの位置で改行できるようになりました。

titleタグの文字列からbrタグを除去する。


スポンサーリンク

本記事は以上です… と思いつつも微修正が必要かなぁと思っていたのですが、ブラウザのタブをよーく見てみると、

brタグがそのまま表示されてしまってますね。これはちょっと恰好が悪いので、brタグを除去することにしました。

WordPress 4.4以降で有効な方法になりますが、テーマのディレクトリ(themes/<テーマの名前>, 本サイトではテーマにiconic-oneを使用しているので、themes/iconic-oneになります。)の下にfunction.phpという名前のファイルがあるので、ここの末尾に以下のコードを追加すると、brタグを除去できます。

function remove_br_tag_from_description($title) {
if ( is_home() || is_front_page() ) {
$title[‘tagline’] = preg_replace(‘{<br/>}’,”,$title[‘tagline’]);
}
return $title;
}add_filter(‘document_title_parts’,’remove_br_tag_from_description’,10,1);

再度、動作確認

上記のコードをfunction.php(iconic-oneテーマの場合はinc/extra-functions.phpの方が良いかもしれません。)に追加して、トップページをリロードしてタブに表示される文字列からbrタグが除去されていることを確認します。

brタグを除去できたようです。

スポンサーリンク

おまけ: PCで閲覧する際のタイトルの表示位置を調整する。

ここまでの変更では Iconic Oneテーマの場合、PCで閲覧する際にタイトルとキャッチフレーズの間隔が

のように近づきすぎてしまいます。そこで、これを右寄りに表示させるためにお好みでstyle.cssのio-title-descriptionのタグを以下のように変更します。

Index: style.css
===================================================================
— style.css
+++ style.css (作業コピー)
@@ -94,10 +94,12 @@
float:none;
}
.io-title-description a {
+ display: block;
font-size: 34px;
font-weight: normal;
text-decoration: none;
– padding-left:15px;
+ padding-left:15px;
+ padding-bottom:10px;
color:#444444;
text-shadow: 0.1px 1px 2px #888888;
}

上記の修正を行うと、タイトル及びキャッチフレーズの部分は以下のように表示されます。

いい感じに表示されるようになりました。

本記事は(今度こそ)以上になります。