記事タイトルを出力する関数を覚えよう!the_title();とthe_title_attribute();の違いとは?

記事タイトルを出力する関数を覚えよう!the_title();とthe_title_attribute();の違いとは?

ブログ内の記事タイトルを出力する方法です。

投稿記事や固定ページのタイトルを出力したいという場合、ワードプレスにはthe_title();the_title_attribute();の2つの関数が用意されています。

何となくthe_title();を使っておけばいいかと思いがちですが、場合によってはエラーになってしまう事もあるので、2つの違いを把握して状況によって適切に使い分けていきましょう。

前提条件:WordPressの記事タイトルではHTMLとCSSが使える

案外ご存知ない方も多いのではないでしょうか?
WordPressでは記事タイトルにもHTMLとCSSを適用させることができます。

どういうことかと言うと

このように記事追加画面でタイトルにspanタグやstrongタグ、フォントカラーやサイズなどを指定する事ができるのです。

このように。

記事タイトルでこのようにHTMLとCSSで変化がつけられることを前提にthe_title();とthe_title_attribute();を使い分けていきますので予備知識として覚えておいてください。

the_title();を使う場合

ほとんどの場合、こちらのthe_title();が使われているかと思います。
機能としてはブログに投稿された記事や固定ページのタイトルを取得し表示する感じですね。

普通に使っていれば特に問題が起こったりすることもないので何となくこっちを選択している方も多いのではないでしょうか?

しかし、the_title();はタイトルに書かれている内容を全て表示させるので、例えば先ほどの画像のようにタイトルを記述していた場合、the_title();で取得した記事タイトルは

「WordPressでは<span style=”color:red;”>タイトル</span>にもHTMLとCSSが使えます!」

になります。
なのでtitle属性の中やalt属性の中にthe_title();で記事タイトルを出力させた場合などはおかしなことになってしまうんですね。

例を挙げると、alt=”<?php the_title(); ?>”としていた場合、

alt=”WordPressでは<span style=”color:red;”>タイトル</span>にもHTMLとCSSが使えます!”

こんな感じになります。
通常利用であれば問題のないthe_title();ですが、場合によってはこのようになってしまう事を覚えておく必要があります。

the_title_attribute();を使う場合

the_title_attribute();も機能としてはブログに投稿された記事や固定ページのタイトルを取得し表示を行います。やること自体は同じですね。

相違点としてはthe_title();ではタグも含め、全ての文字が記事タイトルとして取得されると言いましたが、the_title_attribute();ではHTMLとCSSは除外されたうえで出力が行われます。

なのでspanやstrongで囲っていたとしても、alt=”<?PHP the_title_attribute(); ?>”は

alt=”WordPressではタイトルにもHTMLとCSSが使えます!”

と、このようにタグが排除された形で表示されます。
記事タイトルに修飾を入れている場合はこちらを使わないとエラーが出る可能性がありますので状況によって使い分けが必要となります。

the_title();とthe_title_attribute();のまとめ

という事で記事タイトルを表示させる2つの関数に関してでした。

特に意識せずにthe_title();を使いがちですが、覚えておくことで案件ややりたい事によって適切に関数を使い分けることができるようになります。

WordPressの基礎情報カテゴリの最新記事