TCD063のSwitchというテーマには、インタビューという機能があります。
TCDの魅力である、”テンプレート通りに設定したらいい感じに配置してくれる” 素晴らしい機能なのですが、1点だけ気になる点が。
注目してほしいのは、「色んな人となかよくなれたりもしますし、」のあとに改行が入っているかいないか、という点です。このインタビューページ、固定ページのように中身を設定できるのですが、内容を設定する画面は1つです。
まとめると、「1つのインタビューページの設定で、ページによって見え方が異なる」ということ。
おそらくこのインタビューページのタイトルは「色んな人と仲良く慣れたりもしますし、<br>友達をつくり人脈を拡げるという点でもいいとおもいます！」という風に、途中で改行タグを挿入していると考えられます。
この改行タグをHTMLとして認識して、実際に改行をするページ、しないページをPHPで振り分けていることがわかります。
そこで今回の記事では、アーカイブページでもHTMLを認識させ、改行を有効化する手法を紹介します。
今回の例では「TOPページにインタビューのアーカイブを掲載する」という設定オンにしたときの設定方法です。
これもインタビューアーカイブページと同様に、改行されないタイトルが出力されます。
そのときに生成されているHTMLは、下記のようになっています。
<h3 class="p-article06__title">
<a href="<?php the_permalink(); ?>"><?php echo str_replace( '<br>', '<br>', esc_html( wp_trim_words( get_the_title(), 55, '...' ) ) ); ?></a>
</h3>簡単にこのコードの説明をすると、
- インタビューページのタイトルを一定の長さ(55文字)に切り詰めて表示し、56文字目移行は”…”で表示する
- タイトルをクリックすると該当の記事に遷移する
- 取得してきたタイトルは安全な形にエスケープさせる(タイトルに”<“や”>”のような特殊な文字が含まれていても無視)
という設定をしているわけです。
タイトルを安全な形にエスケープさせる(esc_html)部分が、今回の改行タグが無視される原因となっていることがわかります。
では、esc_htmlによってエスケープさせている部分を、させないように作り替えましょう。
<h3 class="p-article06__title">
<a href="<?php the_permalink(); ?>">
<?php
$title = esc_html( get_the_title() );
echo str_replace( '<br>', '<br>', wp_trim_words( $title, 55, '...' ) );
?>
</a>
</h3>
少し見やすくコードを整えて、esc_htmlを取り外しました。
これは、TOPページ(front-page.php)のアーカイブ部分を修正する場合の一例となります。
実際のインタビューアーカイブページを回収する際も同じ方法で対応可能ですので、適宜修正箇所を調整してみてください。
コメント