wordpress

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

Update:

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

テンプレートタグとは

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

本家によると、

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

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

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

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

投稿タグ

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

<?php the_title(); ?> 記事のタイトルを表示する。
<?php the_permalink(); ?> 記事のURLを表示する。
aタグの中に記述することが多い。
<?php the_date(); ?> 記事の日時を表示する。
(ex, 2020/10/10 … 設定した日付のフォーマットによる)
ただし一覧ページで投稿が同日の場合、一度しか表示されない。後述のthe_time(…)の方がいいかも。
<?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'などのパラメータを入れて使用する。
このタグだとimgタグごと出力される。
<?php the_post_thumbnail_url(); ?> imgタグのsrc=""内に画像URLを呼び出したいならこちら。同じく()内に$post->ID, 'large'、$page->ID, 'thumbnail'などのパラメータを入れて使用する。
background-imageで使用する場合もurl(<?php the_post_thumbnail_url('medium'); ?>);というように指定できる。

なんらかの仕様上の要因で、上記「’」（半角アポストロフィ）をコピペで移動すると全角のアポストロフィになってしまいます。そのまま使用するとWordPressでエラーが発生するので、半角アポストロフィに修正してください。

記事一覧で記事本文の冒頭○○文字を取得し表示させたい

地味にhtmlタグの影響受けたり引っ掛かりポイントですが、以下の記事に正解が書いてあります。

【WordPress】投稿本文の文字数を制限してテキストのみで取得する方法（wp_trim_wo...
WordPressで投稿本文の文字列を取得する方法はいろいろありますが、ここではブログ記事のリストなどでよく見られる、本文から指定文字数を抜粋して掲載する方法をいくつか紹介いたします。

条件分岐タグ

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

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

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

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

WordPressマスターへの遥かなる旅路② – 条件分岐タグを理解する
スタート地点が随分手前なため本当に遥かなる旅路になっておりますこのシリーズ、第一回目はテンプレートタグについてざっくりまとめていました。第二回の今回は前回もちょっと触れた条件分岐タグについて理解してみたいと思います。なんと前回の記事ではほぼ理解できていなかったんですね。条件分岐タグですが会社のWordPress案件で当然のように登場します。私のブログ程度の構築なら覚えてなくても何とかなりますが、業務として請けている仕事でいつまでも先輩の過去コーディングのソースから「うーん、これかな？」とコピペで持って...

インクルードタグ

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

リンクの記述に便利なテンプレートタグ

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

SSL化でhttp→httpsに変更する場合も便利。

リンク等で使用
<?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">
関連記事: