WordPress でテーマ制作やカスタマイズを行う際、避けて通れないのが WordPress関数(テンプレートタグ・API関数) です。
ただし、実際に学習を進めてみると、
- 関数の数が多く、どこから覚えればいいのか分からない
- 公式リファレンスは英語が中心でハードルが高い
- 「この関数は、どのテンプレートで使うのか」が結びつかない
と感じる方も多いのではないでしょうか。この記事では、WordPressテーマ制作の実務でよく使う関数 を中心に、
- 何をする関数なのか
- どのファイル・どの場面で使うのか
- 最低限覚えておきたい書き方
を、テンプレート構造に沿って整理 しています。
「とりあえず動くコード」ではなく、自分でテーマを組み立てられるようになるための関数一覧 を目指しています。
テンプレートタグとは?
テンプレートタグとは、WordPress のテーマファイル(index.php / single.php など)内で使い、「投稿タイトル・本文・日付・カテゴリ」などを表示するための関数です。
主に以下のような場所で使われます。
- index.php
- single.php
- page.php
- archive.php
- template-parts 内のファイル
テンプレートタグ(表示系)基本一覧
get_header()
用途
header.php を読み込むための関数です。
使いどころ
index.php / single.php など、ほぼすべてのテンプレートで使用します。
<?php get_header(); ?>
補足:引数を指定すると header-〇〇.php を読み込めます。
<?php get_header('top'); ?>
用途
footer.php を読み込むための関数です。
<?php get_footer(); ?>
get_sidebar()
用途
sidebar.php を読み込みます。
<?php get_sidebar(); ?>
the_title()
用途
投稿や固定ページのタイトルを表示します。
<h1><?php the_title(); ?></h1>
注意点
- echo は不要
- ループ内で使用するのが基本
the_content()
用途
投稿・固定ページの本文を表示します。
<div class="post-content"> <?php the_content(); ?> </div>
注意点
- Gutenberg のブロックHTMLもここで出力される
- 自動で
<p>や<br>が付与される
the_permalink()
用途
投稿のURLを取得します。
<a href="<?php the_permalink(); ?>"> 記事を見る </a>
テンプレートタグ使用時の基本ルール
- 表示系は the_ 系が多い
- echo せず、そのまま使う関数が多い
- 多くは WordPressループ内 で使用する
WordPressループとは?
投稿データを1件ずつ取得して表示する仕組みです。
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
テンプレートタグの多くは、この while の中で使われます。
投稿・データ取得系の関数とは?
投稿・データ取得系の関数は、
- 投稿を一覧で取得したい
- カスタム投稿を表示したい
- 条件を指定して記事を絞り込みたい
といった 「データを取得して表示する」 場面で使われます。
WordPress テーマ制作では、一覧ページ・トップページ・関連記事表示 などで必須になります。
投稿取得の代表的な方法は3種類
WordPress で投稿を取得する方法は、主に以下の3つがあります。
- WP_Query(最も柔軟・推奨)
- get_posts()(簡易的・短い処理向け)
- query_posts()(※現在は非推奨)
実務ではWP_Query > get_posts()の順で使うことが多いです。
WP_Queryとは
WordPress の投稿取得を司る 最も基本かつ柔軟なクラス です。
- 投稿タイプ
- 表示件数
- カテゴリー
- 並び順
など、ほぼすべての条件指定が可能です。
基本的な使い方(一覧表示)
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 5
);
$query = new WP_Query($args);
?>
<?php if ($query->have_posts()) : ?>
<?php while ($query->have_posts()) : $query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
よく使う引数
$args = array( 'post_type' => 'post', // 投稿タイプ 'posts_per_page' => 10, // 表示件数 'orderby' => 'date', // 並び順の基準 'order' => 'DESC', // 昇順 / 降順 );
注意点(重要)
wp_reset_postdata()を必ず書く- 書かないと メインループに影響 が出る
- テンプレートパーツ内でも同様
get_posts() とは?
WP_Query を簡易化した関数 です。短い処理や、軽く投稿を取得したいときに便利です。
基本的な使い方
<?php $args = array( 'post_type' => 'post', 'numberposts' => 3 ); $posts = get_posts($args); ?> <?php foreach ($posts as $post) : setup_postdata($post); ?> <h3><?php the_title(); ?></h3> <?php endforeach; ?> <?php wp_reset_postdata(); ?>
投稿情報を取得する関数
get_the_date()
用途
投稿の日付を取得します。
<?php echo get_the_date('Y.m.d'); ?>
ポイント
- 表示用として加工しやすい
the_date()より安定して使える
the_time()
用途
投稿日時を表示します。
<?php the_time('Y年m月d日'); ?>
get_the_excerpt()
the_excerpt()
用途
投稿の抜粋文を取得・表示します。
<?php the_excerpt(); ?> <?php echo get_the_excerpt(); ?>
カテゴリー・分類の取得
get_the_category()
用途
投稿に紐づくカテゴリーを配列で取得します。
<?php
$categories = get_the_category();
if ($categories) {
echo esc_html($categories[0]->name);
}
?>
get_the_terms()
用途
カスタムタクソノミーのタームを取得します。
<?php
$terms = get_the_terms(get_the_ID(), 'menu-category');
if ($terms) {
echo esc_html($terms[0]->name);
}
?>
メディア(画像・アイキャッチ)系の関数とは?
メディア系の関数は、主に以下のような場面で使います。テーマ制作では必須の知識 です。
- 投稿・一覧カードにアイキャッチ画像を表示
- 画像URLだけ取得して
<img>を自分で書きたい - 画像サイズを制御したい
- アイキャッチの有無で分岐したい
ただアイキャッチ画像は、オリジナルテーマの場合最初は使えませんので、functions.phpに下記コードを記述しておきましょう。
add_theme_support('post-thumbnails');
アイキャッチ画像
the_post_thumbnail()
用途
アイキャッチ画像を imgタグごと出力 します。
<?php <?php the_post_thumbnail(); ?>
サイズを指定する
<?php the_post_thumbnail('medium'); ?>
よく使うサイズ
- thumbnail(サムネイル)
- medium(中サイズ)
- large(大サイズ)
classを指定する
<?php the_post_thumbnail('large', array(
'class' => 'img-fluid rounded'
)); ?>
get_the_post_thumbnail_url()
用途
アイキャッチ画像の URLのみ を取得します。
<img src="<?php echo esc_url(get_the_post_thumbnail_url()); ?>" alt="">
class を自由に書きたい場合に便利
<img src="<?php echo esc_url(get_the_post_thumbnail_url(null, 'large')); ?>" class="card-img-top" alt="" >
メディア系関数
has_post_thumbnail()
用途
アイキャッチ画像があるかどうかを判定します。実務では必ず使う関数 です。
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('large'); ?>
<?php else : ?>
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/no-image.jpg" alt="">
<?php endif; ?>
add_image_size()
用途
オリジナルの画像サイズを追加します。
add_image_size('card-thumb', 400, 250, true);
<?php the_post_thumbnail('card-thumb'); ?>
wp_get_attachment_image()
用途
attachment ID から img タグを生成します。
<?php echo wp_get_attachment_image($image_id, 'medium'); ?>
Gutenberg やカスタムフィールドと相性が良い関数です。
- 表示だけなら
the_post_thumbnail() - カスタムしたいなら
get_the_post_thumbnail_url() - 分岐は
has_post_thumbnail() - サイズ管理は
add_image_size()
メニュー・ナビゲーション系の関数とは?
- グローバルナビゲーション
- フッターメニュー
- スマートフォン用メニュー
などを 管理画面から操作できるようにする ために使います。メニューを使うための準備に、functions.phpにメニューの登録を行う必要があります。
register_nav_menus(array( 'global' => 'グローバルメニュー', 'footer' => 'フッターメニュー' ));
用途
登録したメニューを表示します。
<?php wp_nav_menu(array( 'theme_location' => 'global' )); ?>
classを指定する場合
<?php wp_nav_menu(array( 'theme_location' => 'global', 'menu_class' => 'nav-list', 'container' => false )); ?>
よく使う引数
wp_nav_menu(array( 'theme_location' => 'global', 'menu_class' => 'nav-list', 'menu_id' => 'global-nav', 'container' => false, 'depth' => 1 ));
wp_list_pages()
用途
固定ページを一覧表示します(自動生成)。
<?php wp_list_pages(array( 'title_li' => '' )); ?>
is_page() / is_front_page()
用途
特定ページかどうかを判定します。
<?php if (is_front_page()) : ?>
<h1 class="site-title"><?php bloginfo('name'); ?></h1>
<?php else : ?>
<p class="site-title"><?php bloginfo('name'); ?></p>
<?php endif; ?>
- 基本は
wp_nav_menu() - functions.php でメニュー登録が必須
- class / id / depth 指定は実務で頻出
- 条件分岐と組み合わせるとUXが向上
