【Cocoon】<br>タグを表示させずに
投稿記事のタイトルを改行する方法【サンプルコード付き】

はいどーも、まるです。٩(๑❛ᴗ❛๑)

Cocoonは、@わいひらさんが制作くださった私の知る中で最高のWordpressテーマです。

今回は、そのCocoonを使って
投稿タイトルにて<br>タグの表示なしに改行させる方法についてご紹介します。

※他テーマでも同じことは実装できるとは思いますが、今回のコードの動作を保証するものではありません。あくまで自己責任として参考ください。

また、その他詳しいカスタマイズについては、
ご本人のブログにて大変丁寧にまとめられてありますのでそちらご参照ください
(いつもお世話になっています)

よく見かける実装法、<br>入力の問題点

一応、いろんなサイトで紹介されているようにhtmlの<br>タグを使って空白を入れ込むことはできます。

<br>タグによる改行

しかし、このやり方だとTwitterやLINEなど、リンクを外部サービスに添付した場合に<br>タグという文字列で読み込まれてしまいます

これだと非常にかっこ悪いですよね。

<br>タグによる改行のプレビュー
午前4時ですまん

今回は、以下のようにHTMLタグを表示させずに改行させる方法を実装してみます。

実際にカスタマイズしてみる

content.php をひらく

外観 > テーマエディタ より、tmpフォルダ直下のcontent.phpファイルを開きます。

38行目~48行目の関数の処理を変更

カスタマイズを行っていると、行数は個人差ができます。同じような文字が使われている場所を探してください。

今回弄るのは以下の部分。

<h1 class="entry-title" itemprop="headline">と書かれたclassの入っているh1タグがある場所

entry-titleと書かれたclassの入っているh1タグがある場所

※操作を誤るとブログが正常に動作しなくなるので、
子テーマをお使いの方は子テーマ、そうでない方は変更前のソースコード(記述されているプログラムのこと)やphpファイルのバックアップを必ず取ってから、作業に臨みましょう。

サンプルコード(コピペOK)

【変更前】

<?php if (is_wpforo_plugin_page()) { echo wp_get_document_title(); } else { the_title(); } ?>
Code language: HTML, XML (xml)

【変更後】

<?php if (is_wpforo_plugin_page()) { //サイトタイトル echo wp_get_document_title(); } else { //記事タイトル $title = get_the_title($ID); //置き換えたい文字を指定 $title = str_replace("★", "<br>", $title); echo $title; } ?>
Code language: HTML, XML (xml)

★マークがあるエリアに、改行マークとして認識させたい文字を入力してください。

例えば、

$title = str_replace(" ", "<br>", $title);
Code language: PHP (php)

とすると、全角スペース入力時に改行マークとして認識してくれるようになります。

【解説】 読み飛ばしてもOK

記事タイトル内にあるとある文字を、空白に置き換える処理を追加しています。
変数に格納しようとするとthe_title()では動作しなくなるため、get_the_title()関数に書き換えています。

改行有り無しでの見栄えを比較

さて、見比べてみましょう。
変更前と後で、以下のように見た目に変化があります。

<br>で空白タグを入れた時の見え方
phpで空白を直接書き換えた時の見え方
phpで空白を直接書き換えた時の見え方

どちらが直感的に美しい(視覚的に頭に入ってきやすい)かは、一目瞭然ですね。

一目見た時の印象が変わるように

というわけで、今回はCocoonでのこちらのカスタマイズを紹介している記事が見当たらなかったので、まとめてみました。(調べ方が悪かった?)

普段、phpやWordpressのカスタマイズはやっていてもあんまり記事にしてません。

何せPython推しですからね。(。•̀ᴗ-)و ✧

ということで、Pythonコミニュティの紹介をして終わります。

もし質問とかありましたら、コメントください。

 


 

まにゅまるスクリプトでは、
Pythonの独学を支援するコミニュティを運営しています。

🌀⭕Engineer Community 「Acumen」の紹介⭕🌀
未経験からエンジニアになりたい人同士で繋がり、支え合うコミニュティ「 Acumen 」を現在運営しています。やり取りにはSlackという、実際の業務で使われる...

やる気や見込みのある若者を対象に完全未経験からのサポートを行っており、
実務経験のあるエンジニアがメンターとして実践ベースのノウハウを伝授します。

 


プログラミング学習の一番の挫折理由は、

質問できる環境がないこと」にあります。

 

本コミニュティでは、「自走していけるエンジニアの育成」を目的としており
ただ習って終わりではなく、エラーの解決方法の探し方など自分で考える力を養っていきます。

自身でWebサービスを実装、リリースすることで卒業となります。

興味ある方は、お気軽にお問い合わせください。٩(๑❛ᴗ❛๑)

 

まる。

Python歴3年のフルスタックエンジニア&ヨギー。
大学は心理学、趣味はヘルスケア全般。

エンジニア育成コミニュティの運営と、オリジナル名刺・Web制作やハタヨガレッスンやってます。

お仕事はDM若しくはメールから。

↓アートとかの趣味アカもよかったらみてね!٩(๑❛ᴗ❛๑)
Insta:@malmal0v0

まる。をフォローする
タイトルとURLをコピーしました