記事タイトルの改行を
h1とclassを残したまま実行する

 

 

※素人の独学のコードなので参考程度に見てほしい。
この方法が正しいのかは不明なので使用する場合は自己責任で。

 

投稿・記事タイトルの改行は他の人もやっているのを見たので
簡単にできるものと思っていたがちゃんとやろうとすると
結構複雑で自分の使っているテーマでのやり方を調べても見つからなかった。

 

それでも複数の情報を複合して自分なりの解釈でコードを入れたら
一応やりたかった状態にすることが出来たので自分用メモとして書いていく。

 

マイナーなテーマを使うと今回みたいに調べてもわからないことが多いが
自分で考えるようになるので勉強にはこの方が良かったのかもしれない。

 

実践に勝る経験は無し。

 

スポンサーリンク

 

改行したい場所に<br />を入れる

 

簡単な方法でと検索を入れてまず出てくるのが
タイトルの改行したい場所に<br/>を入れるという方法である。

 

この時は「やっぱ簡単だな」と思っていた。
そして改行したいタイトルに<br/>を入れてみた。

 

氷が溶けにくいコップ<br/>THERMOS(サーモス)真空断熱タンブラーのレビュー

 

記入前

 

 

記入後

 

一見成功したかに思えたが
改行の影響が
パンくずリストにも反映されてしまっている。

 

つまりを<br/>入れると
タイトルに関係する全ての要素に
影響されてしまうみたいだ。

 

どこまでの範囲が影響するのか調べるのも大変だし
下手をするとGoogleのSEOにも悪い影響があるかもしれないので
別の方法が無いか調べた。

 

str_replaceを使って半角スペースを入れて置換で改行する

 

そして出てきたのがstr_replaceというのを使う方法だった。

 

str_replaceとは置換できるコードで
記入した文字を別の文字に出力してくれる。

しかもタイトルだけの範囲に指定することが出来る。

 

今回最終的に表示したい文字は「<br/>」である。
そして代わりに記入するのは「 」(半角スペース)にした。

 

すると記入するコードは

<?php
 $title = get_the_title($ID);
 $title = str_replace(” “, “<br />”, $title);
 echo $title;
?>

となる。

 

後はこのコードを入れればよいのだが、
どこに入れればいいのか結構迷った。

 

<?php the_title(  ); ?>の代わりにコードを入れるみたいで
通常はsingle.phpにあるみたいだが
自分の使用しているテーマではcontent-single.phpに

 

<?php the_title( ‘<h1 class=”entry-title”>’, ‘</h1>’ ); ?>

 

というコードがありこれの代わりに入れればできるみたいだ。
これを探すのにかなり時間が掛かった。

 

そして先程<br/>を入れたのと同じ場所に
半角スペースを入れた結果がこれ。

 

 

ちっさっ

 

少しわかりにくいかもしれないが文字サイズが小さいのである。

 

良く考えればstyle.cssでh1やentry-titleに対して
文字サイズなどを指定しているので
その指定先を消して代わりのコードを入れてしまうと
こうなるのは当たり前の事だった。

 

つまりh1やclassのentry-titleを残しつつstr_replaceを構成する必要がある。

 

h1のみを入れたコード

 

これが調べても調べても全然わからない。
こんな時はPHPの中の似たようなコードを参考に
自分で考えて組み立てるしかなかった。

 

そして

 

<?php
   $title = get_the_title($ID);
    $title = str_replace(” “, “<br/>”, $title);
 echo ‘<h1>’.$title.'</h1>’;?>

 

というコードを入れてみた。
すると

 

という風になり一応自分がやりたかった形にする事が出来た。

 

スポンサーリンク

 

h1やclassのentry-titleを残しつつstr_replaceを構成したコード

 

見た目は完成したがこのままだと
classのentry-titleは無いままなので
気持ち悪いのと
裏でどんな影響があるのかもわからないので

entry-titleを組み込むコードを考えた。

 

とりあえずは元からあった

 

<?php the_title( ‘<h1 class=”entry-title”>’, ‘</h1>’ ); ?>

 

から<h1 class=”entry-title”>を抜き取って入れてみた。

 

<h1 class=”entry-title”>
<?php
   $title = get_the_title($ID);
    $title = str_replace(” “, “<br/>”, $title);
 echo ‘<h1>’.$title.'</h1>’;?>

 

が上手くいかなかった。

 

他のコードを見るとclassの指定はdiv classとなっている事に気付いた。
そこでコードを

 

<div class=”entry-title”>        
<?php
   $title = get_the_title($ID);
    $title = str_replace(” “, “<br/>”, $title);
 echo ‘<h1>’.$title.'</h1>’;?>
</div><!– .entry-title –>

 

という形で書き込んだ。
entry-titleが作用するのかの確認としてstyle.cssに

 

/* 全投稿ページでタイトル非表示 */
.post .entry-title {
    display: none;
}

 

というコードを入れた。
これはタイトルを非表示するためのコードで
entry-title を指定しているので先程のコードが正しければ
タイトルが非表示になるはずである。

 

そして結果が

となり無事にentry-titleが作用した事を確認することができた。
これで非表示を元に戻せば自分のやりたかった形は完成した事になる。

 

プロから見れば汚いコードだとは思うが
まぁ目的の動きさえしてくれれば自分は問題ない。
他の所に悪い影響が無いかは気になるが今のところは大丈夫みたいだ。

 

再度書いておくが
このコードは素人が考えたものなので使用する場合は自己責任で。