• SEARCH

SEARCH

チェックボックスにチェックをつけたうえで検索すると、
該当のカテゴリ記事に絞り込むことができます。

ホームページ制作のご依頼・ご相談はCOLERSへ

SNIPPETのロゴ

【WordPress】テーマのカスタマイズでよく使うテンプレートタグ集

WordPressのカスタマイズ

WordPressには、テーマの作成・カスタマイズに役立つテンプレートタグという関数(処理のまとまりに名前をつけたもの)
たくさん用意されています。

データベースに格納された投稿などのデータから情報を取得する場合、
本来はたくさんの処理を書く必要があり高度な知識も求められますが、
短いテンプレートタグを記述するだけでかんたんに実装ができるようになっています。

その中から比較的よく使うものをご紹介いたします。

実際のコード

投稿のタイトルを出力

<?php the_title(); ?>

投稿のコンテンツを出力

<?php 
// 冒頭の抜粋した内容を出力
the_excerpt();
?>

<?php
// すべての内容を出力
the_content();
?>

投稿日を出力

<?php the_time('Y/m/d'); ?>

投稿の詳細ページへのリンクを出力

<?php the_permalink(); ?>

投稿のカテゴリをリンク付きのリストで出力

<?php the_category(); ?>

投稿のタグをリンク付きのリストで出力

<?php
// 引数は(タグの前につく文字, タグ同士の間につく区切り文字, タグの後につく文字)
// 引数は省略可能(その場合はデフォルトの指定)
the_tags('', '|');
?>

投稿のアイキャッチ画像に関する情報を取得・出力

<?php
  // 投稿のアイキャッチ画像URLを出力する
  the_post_thumbnail_url();
?>

<?php 
  // 投稿のアイキャッチ画像に設定されたIDを取得し、そのIDから各種情報を取得する
  $thumbnail_id = get_post_thumbnail_id();
  // サイズ(横)、アイキャッチ画像のID(変数:$thumbnail_id)に基づき取得
  $thumbnail_width = wp_get_attachment_image_src( $thumbnail_id, 'full' )[1];
  // サイズ(縦)、アイキャッチ画像のID(変数:$thumbnail_id)に基づき取得
  $thumbnail_height = wp_get_attachment_image_src( $thumbnail_id, 'full' )[2];
  // 代替テキスト、アイキャッチ画像のID(変数:$thumbnail_id)に基づき取得
  $thumbnail_alt = get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true );
  // タイトル、アイキャッチ画像のID(変数:$thumbnail_id)に基づき取得
  $thumbnail_title = get_post( $thumbnail_id )->post_title;
  // キャプション、アイキャッチ画像のID(変数:$thumbnail_id)に基づき取得
  $thumbnail_caption = get_post( $thumbnail_id )->post_excerpt;
  // 説明、アイキャッチ画像のID(変数:$thumbnail_id)に基づき取得
  $thumbnail_description = get_post( $thumbnail_id )->post_content;
?>

テーマフォルダのURLを取得

<?php 
// 親テーマの場合
$parent = get_template_directory_uri();
?>

<?php 
// 子テーマの場合
$child = get_stylesheet_directory_uri();
?>

サイトのトップページのURLを出力

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

まとめ

ベースはPHPですので独自で関数を作ることなどももちろん可能ですが、
WordPressで利用することを想定すると、用意されたテンプレートタグを利用することが推奨されます。

今回ご紹介したものはほんの一部ですので、テンプレートタグ一覧や詳細についてはCodexもあわせてご確認ください。

AUTHOR

Yasuhiro Yamamoto

Yasuhiro Yamamoto

福岡市在住のフリーランス。
WEBデザイナー、フロントエンドエンジニア、アプリーケーションエンジニア。
デザイン・ディレクション・実装など、企画〜完成まで一貫して承っている。

RECOMMEND