wordpress

WordPressマスターへの遥かなる旅路① – テンプレートタグのおさらい

Pocket
LINEで送る

WordPressを使った案件を丸ごと一件任されるようになってきつつも、テンプレートタグはまだ毎回ググっては恐る恐る使ってみる日々。
ここいらでちゃんとまとめて覚えるぞ!と、そんな記事です。

テンプレートタグとは


本家によると、

テンプレートタグは、ブログのデータを動的に表示したり、個性的で面白いブログにカスタマイズしたりするときに、テンプレートの中で使います。

テンプレートタグ – WordPress Codex 日本語版

WordPress自体が用意した関数で、投稿記事のタイトルや投稿日、カテゴリー、本文など呼び出してページに表示してくれる便利な機能です。

よく使うテンプレートタグ

投稿タグ

ブログの一覧ページや記事ページで使います。

<?php the_title(); ?> 記事のタイトルを表示する。
<?php the_permalink(); ?> 記事のURLを表示する。
aタグの中に記述することが多い。
<?php the_date(); ?> 記事の日時を表示する。
(ex, 2020/10/10 … 設定した日付のフォーマットによる)
<?php the_time(); ?> 記事の時間を表示する。
(ex, 2:30 AM … 設定した日付のフォーマットによる)
<?php the_time(‘Y.m.d’); ?> 記事の日時を表示する。
(ex, 2020.10.10)
<?php the_time(‘Y年n月j日’); ?> 記事の日時を表示する。
(ex, 2020年10月10日)
<?php the_author(); ?> 記事の投稿者(ログインID)を表示する。
<?php the_category(); ?> 記事のカテゴリー名をカテゴリー一覧ページへのリンク付きで表示する。
<?php foreach((get_the_category()) as $cat){
echo $cat->cat_name . ‘ ‘;
}; ?>
記事のカテゴリー名をリンク無しで表示する。
<?php the_tags(); ?> 記事に付けられたタグを表示する。
<?php the_content(); ?> 記事の本文を表示する。
<?php previous_post_link(); ?> 前の記事へのリンクを表示する。
記事ページ内で使用する。()内に'< 前の記事へ'''%link', '< %title''等、テキストやパラメータを入れて使用する場合が多い。
<?php next_posts_link(); ?> 次の記事へのリンクを表示する。
記事ページ内で使用する。()内に'次の記事へ >'''%link', '%title >''等、テキストやパラメータを入れて使用する場合が多い。
<?php echo get_the_post_thumbnail(); ?> 記事のサムネイル画像を表示する。()内に$post->ID, 'large'$page->ID, 'thumbnail'などのパラメータを入れて使用する。

条件分岐タグ

例えば、グローバルナビのソースの大部分は同じだけどTOPページだけ一部分を変更したい場合などで使える。

<?php if ( is_front_page() ) : ?>
  TOPページでだけ反映させたい記述
<?php else : ?>
  それ以外のページで反映させたい記述
<?php endif; ?>

また、特定のページではcurrentをclassを付加した場合などにも、頑張れば使える。

条件分岐タグについては別記事にまとめました。

インクルードタグ

ページ内に他のphpファイルを読み込んで配置する場合に使用。

開発時と本番のURL(階層)が違う場合に使うと便利なやつ

<?php echo esc_url( home_url( '/' ) ); ?>

ホームへのリンク。メニューなどで使用しておくと後で修正しなくていいから便利。

<a href="<?php echo esc_url( home_url( '/' ) ); ?>/wordpress">WordPressのカテゴリーTOP</a>

というように使う。

<?php echo get_stylesheet_directory_uri(); ?>

imageのリンクなどで使う。記述するURLが長くならずソースがまとまってて良い。テストサイトから本番サイトへ移行する際も、これを使ってるとURLの置き換え作業をしなくて済む。
実際にimgタグで使うときは以下のような記述になる。

<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/common/ogp.png" alt="" width="100%" height="auto">
Pocket
LINEで送る

back to top