投稿データを表示するためのテンプレートタグを設置する – [12]WordPressテーマ制作レッスン

このレッスンでは、サイト内に作られているグローバルメニューのリンクを設置していき、他にウェブサイトの情報などを出力するテンプレートタグを設置してきます。

動画

レッスンの準備

Olein-jp/wp-theme-develop-lesson

Contribute to Olein-jp/wp-theme-develop-lesson development by creating an account on GitHub.

github.com

このレッスンでは、上記リポジトリのwp-lesson-12というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemesにwp-lesson-12ディレクトリを設置しましょう。

投稿データを表示するためのテンプレートタグを設置する

このレッスンでは、前回までに作成したWordPressループの中に、投稿日やタイトル、パーマリンクなどの投稿の情報を掲載するためのテンプレートタグを設置していきます。

ここで取り扱うのは、以下のテンプレートタグになります。

the_permalink()

ループの中で処理されている投稿のパーマリンクURLを表示します。

the_post_thumbnail()

設定されているアイキャッチ画像を表示します。

アイキャッチ画像が設定されている時とそうでない時の分岐の方法

<?php if ( has_post_thumbnail() ) : ?>
	<?php the_post_thumbnail(); ?>
<?php else : ?>
	<img src="<?php echo get_theme_file_uri() . '/images/no-thumbnail.png'; ?>" alt="ダミーアイキャッチ画像">
<?php endif; ?>

the_title()

投稿のタイトルを表示します。必ずループの中で使用する必要があります。

the_time()

投稿の公開時刻を表示します。

管理画面で指定したフォーマットで出力する場合には、

<?php the_time( get_option( 'date_format' ) ); ?>

the_category()

記事が属するカテゴリーへのリンクを表示します。

サンプルデータでは、区切り文字が必要ないためこのように記述します。

<?php the_category( '&nbsp;' ); ?>

the_tags()

記事につけられたタグを表示します。

下参照を確認すると引数などの使い方が書いてあるのですが、カテゴリーと同じですが、マークアップの性質上、前後にマークアップなど必要がなく、区切り文字も必要がないため、今回はこのように記述します。

<?php the_tags( '', '', '' ); ?>

the_excerpt

投稿の抜粋を文末に[…]をつけて表示します。