WordPresのサイトタイトルや記事タイトルを表示する方法

こんにちは! ライターのナナミです。

WordPressのサイトを作っていて、タイトルを出したい場面って色々ありますよね。

記事のタイトル、サイトのタイトル、画像のタイトル…

色々なタイトルの表示、どうやればいいかわからないという人もいるかもしれませんね。

今回はそんなタイトル表示を徹底解説!
色々なタイトルの取得・表示方法を紹介していきます。

下記の流れで、タイトルの取得や表示に迷わないようになっちゃいましょう。

【基礎】WordPressの独自タグとは
【基礎】サイトのタイトルを取得・表示する
【基礎】記事のタイトルを取得・表示する
【発展】その他のタイトル取得・表示方法

書き方さえわかれば、難しいことはありません。
ささっと確認していっちゃいましょう!

WordPressの独自タグ

今回紹介するコードは、どれもWordPress独自のタグです。

WordPressには、専用のタグがいろいろと用意されています。
それを活用することで、WordPressの機能をより活用することができるのです。

なので、今回紹介する方法はWordPressでしか使うことができません
注意してくださいね。

また、今回の内容はPHPを利用したものとなっています。
PHPのことがまだよくわからない…という方は、下記の記事でチェックしてから読み進めてみてくださいね。

>>WordPressを深く理解するには、まずはPHPを知ろう!

取得と表示の違い

WordPress独自のタグには、取得のみを行なうものと、取得と表示を同時に行なうものの2種類があります。

取得のみの場合は、PHPなどで処理をするためにデータベースから持ってくるだけで処理が終わります。
つまり表示はされないので、表示するためにはechoと併せて使う必要があるのです。

取得と表示を同時に行なうものは、データベースからデータを持ってきて、表示をするところまで処理をしてくれます
こちらの場合はechoは必要ありません。

この違いは結構大事なので、しっかり覚えておいてくださいね。

サイトのタイトルを取得・表示する

まずはサイト自体のタイトルを取得・表示してみましょう!

下記のコードを書くだけでOKです。

PHP

<?php bloginfo('name'); ?>

bloginfoは、サイトの色々な情報を表示することができるタグです。
これは表示までやってくれるので、echoは必要ありません

詳しい解説はリファレンスを参照してみてくださいね。

>>bloginfoのリファレンス

記事のタイトルを取得・表示する

次に、記事のタイトルを取得・表示してみましょう!

記事のタイトルについてはちょっと癖があるので、どんな時に、どんなタイトルを表示したいかを考えてチェックしてみてくださいね。

ループ内とループ外の違い

記事を表示する部分は、ループという繰り返し処理が書かれています。
このループ処理により、同じ見た目で違う記事の内容を表示させているのです。


記事のタイトルを表示する場合、ループの中に記述すると、ループの処理内に記事の情報があるので記事をIDなどで指定する必要はありません

しかし、ループの外に書く場合は、記事の情報がその場にないので、IDでどの記事なのかを明示的に指定する必要があります。

どちらの状態で取得・表示をするのか、しっかりチェックしてから実装するようにしましょう。

HTMLタグも含める

記事のタイトル部分、実はHTMLタグが書けるのってご存知ですか?

<br>タグなんかを入れて、自分の好きな箇所で改行させるなんてこともできちゃうわけです。

そのHTMLを含めて、記事のタイトルを表示したい場合は下記のように書きましょう。

PHP

<?php the_title( ); ?>

the_titleは、現在の記事のタイトルを表示するタグです。

現在の記事とは、ループの処理で現在処理中の記事という意味です。
つまり、このタグはループの中でしか使えないわけです。

ループの外で使いたい場合は、下記のようにget_the_titleというタグを使います。

PHP

<?php echo get_the_title( $ID ); ?>

これは、指定したIDのタイトルを取得するタグです。
get_the_titleは取得するまでしかしてくれないので、表示する場合はechoを使うようにしましょう。

それぞれの詳しい解説は、リファレンスをチェックしてみてくださいね。

>>the_titleのリファレンス

>>get_the_titleのリファレンス

HTMLタグは含めない

HTMLタグが含まれちゃうと困る…

という場合は、the_title_attributeを使います。

PHP

<?php the_title_attribute(); ?>

これはHTMLタグを除いて、文字だけを表示してくれる独自タグです。
ループ内で使用する場合は、カッコの中には何も入れなくても自動的に現在の記事のタイトルを表示してくれます。

ループ外で使用する場合は、下記のようにカッコにIDを入れましょう。

PHP

<?php the_title_attribute( ID ); ?>

詳しくはリファレンスをチェックしてみてくださいね。
>>the_title_attributeのリファレンス

その他のタイトル取得・表示方法

ここまでで基本的なタイトルの取得・表示はバッチリですね!

あとはちょっとおまけで、タイトルとして使ったりするものの表示方法を紹介していきます。

カテゴリ名

カテゴリでソートした一覧などは、見出しにカテゴリ名を表示したいですね!
そんな時は下記のように記述すればOKです。

PHP

<?php single_cat_title( ); ?>

詳細はリファレンスをチェック!

>>single_cat_titleのリファレンス

タグ名

カテゴリと同じようにタグ名も表示したい場合は、下記のように記述しましょう。

PHP

<?php single_tag_title( ); ?>

リファレンスもチェックしてみてくださいね。

>>single_tag_titleのリファレンス

画像のタイトル


なんて時に、画像のタイトルを表示したいですよね。

そんな時は、下記のコードを使いましょう。

PHP

<?php
	$wp_img = get_post( 画像ID );
	echo $wp_img->post_title;
?>

画像のタイトルは一発で取得する方法がないので、一旦画像の情報全てを取得し、その中からタイトルだけを表示するという流れになっています。

こちらについては下記の記事が詳しく解説しているので、わかりづらかったり詳しく知りたい方は併せて読んでみてください。

>>画像のタイトルを取得する方法の解説

まとめ

いかがでしたか?

これでタイトルの出力はバッチリですね!

一回で全てを覚えるのは難しいと思います。
忘れちゃったなぁ…という時は、またこの記事を確認してみてくださいね。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説