WordPressでサイトタイトルを改行して表示する技！？CSSではなくJavaScriptで解決

2020年4月16日2020年12月31日Webデザイン

こんにちは！

ブログを通勤電車の中でスマホで書くのが習慣だったのが、在宅勤務で通勤時間がなくなり日課がこなせないことが何より残念な、しずかなかずしです。

WordPressでブログ書いてますか？

しずかなかずしブログでは、WordPressネタが久しぶりですが、今日はちょっとマニアックで難易度高め、でもそこそこ使えそうな小ネタをご紹介していきます。

1. ブログタイトルを改行したい
2. JavaScriptを使う
3. サイトタイトルのCSSセレクタを調べる
4. JavaScriptを記載する場所を決める
5. まとめ

ブログタイトルを改行したい

WordPressでブログを作った時に、タイトルを改行したいなと思うことありませんか？

実はこれ、簡単のようでなかなか難しいのです。

WordPress の"設定"→"一般"から、"サイトのタイトル“の文字列に改行を入れてみます。

HTMLなので、改行したい位置に<br>などと入れてみます。

サイトのタイトルに改行を設定→タイトルに入れてみた — サイトのタイトルに改行を設定→タイトルに<br>を入れてみた

するとどうでしょう？

そのまま表示されます。

改行失敗<br data-srcset= — がそのまま表示される" width="551″ height="222″> 改行失敗
がそのまま表示される

こりゃダメだ、となって、では、ちょっと知った感じで"\n"記号を記載してみましょう。PHPなどのプログラミング言語では、文字列の中に"\n"と記載すると改行されるので、これならば…

と、やっぱりダメです。

JavaScriptを使う

ちょっと難易度が高いですが、JavaScriptを使ってHTMLを動的に変更するのが良さそうです。

PHPでタイトルを置き換える方法もあるのですが、それだと、サイトタイトルが他の場所で使われるとき、例えば、SNSでリンクをコピーするなどする際に、"記号"が入っちゃったりするのではないかと思います（やり方によりますが…）。

という事で、以下のようなJavaScriptのコードを使ってみましょう。

var selector = '.site-name-text'; // 注1: タイトルのタグに使われている"CSSセレクタ"
var title = jQuery(selector).html();
var pos = 4; // 注2: 何文字目で改行するか？
jQuery(selector).html(title.slice(0, pos) + '<br>' + title.slice(pos));

簡単にこのソースコードが何をしているのかを解説してみます。

注1は、タイトルのテキストで使われているタグの"CSSセレクタ“と呼ばれるものです。

テーマによってどんなテキストが使われているか違うようです。site-titleとなっていたり、上記のようにsite-name-textとなっていたり、色々異なります。自身のテーマがどんなテキストで「サイトタイトル」がタグづけされているかを調べる必要があります。

注2は、自分で設定している「サイトのタイトル」の何文字目で改行するかを示す数字です。好きなように書き換えて使って下さい。

2行目では、titleという変数に、HTMLの中のselector変数が示すCSSセレクタで指定されている「サイトのタイトル」文字列を代入します。4行目では、slice関数でposで指定された文字数で文字をちょん切って、あいだに改行を示すHTMLタグである<br>を挟んでいます。

そして、それをまた同じCSSセレクタが示すHTMLタグの中に、HTMLのテキストとして戻してあげる、という処理をしているわけです。