
目次 & インサイト
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
はじめに:WordPressを柔軟にカスタマイズするために
WordPressでオリジナルテーマを制作していると、次のような場面が出てきます。
- 特定の固定ページだけに専用の処理を追加したい
- 投稿ページと固定ページで表示内容を切り替えたい
- お知らせ一覧だけ投稿の表示件数を変更したい
- 特定のページにだけJavaScriptやCSSを読み込みたい
- WordPress本体の動作を、テーマやプラグインから拡張したい
こうした要望に対応するときに役立つのが、条件分岐タグとフックです。
条件分岐タグは「今、どの種類のページを表示しているのか」を判定する仕組みです。一方、フックは「WordPressの処理の特定のタイミングで、独自の処理を実行したり、データを変更したりする」ための仕組みです。
どちらもWordPressのカスタマイズに欠かせない基本機能です。今回は、具体的なコードを使って理解していきましょう。
1. WordPressの条件分岐タグとは?
条件分岐タグ(Conditional Tags)は、現在表示しているページの種類や状態を判定するための関数です。
PHPの if 文と組み合わせることで、条件に応じて処理を切り替えられます。
例えば、固定ページである場合にだけ特定のHTMLを表示するには、次のように記述します。
<?php if ( is_page() ) : ?>
<p>これは固定ページです。</p>
<?php endif; ?>
is_page() が true を返す場合にだけ、囲まれたHTMLが出力されます。
条件分岐タグは、テンプレートファイルで表示内容を切り替えるほか、フックを使った処理の対象を限定するときにも利用できます。
2. よく使う条件分岐タグ
まずは、オリジナルテーマ制作で使用頻度の高い関数を整理しておきましょう。
| 関数 | 判定するページ・状態 |
|---|---|
is_front_page() | サイトのフロントページ |
is_home() | 投稿一覧を表示するブログページ |
is_page() | 固定ページ |
is_single() | 通常の投稿などの個別ページ |
is_singular() | 投稿・固定ページ・カスタム投稿タイプなどの個別ページ |
is_archive() | アーカイブページ全般 |
is_category() | カテゴリーアーカイブ |
is_tax() | カスタムタクソノミーなどのタクソノミーアーカイブ |
is_post_type_archive() | カスタム投稿タイプのアーカイブ |
is_search() | 検索結果ページ |
is_404() | 404ページ |
これらの関数は、該当する条件が成立すると true、成立しなければ false を返します。
固定ページを判定する:is_page()
is_page() は、固定ページが表示されているかを判定します。
<?php
if ( is_page() ) {
// 固定ページの場合の処理
}
?>
特定の固定ページだけを対象にすることもできます。
if ( is_page( 'contact' ) ) {
// スラッグが contact の固定ページ
}
複数のページを対象にする場合は、配列を使えます。
if ( is_page( array( 'contact', 'privacy-policy' ) ) ) {
// お問い合わせ・プライバシーポリシーのページ
}
ページのID、タイトル、スラッグなどを指定できます。運用中にタイトルが変更される可能性がある場合は、IDやスラッグを利用すると管理しやすくなります。
個別ページを判定する:is_singular()
is_singular() は、投稿・固定ページ・カスタム投稿タイプなどの個別ページをまとめて判定できます。
if ( is_singular() ) {
// 個別ページの場合の処理
}
特定のカスタム投稿タイプだけを対象にすることも可能です。
if ( is_singular( 'portfolio' ) ) {
// portfolio の個別ページ
}
例えば、制作実績の詳細ページだけに専用の処理を追加したい場合に便利です。
フロントページとブログページの違い
is_front_page() と is_home() は、混同しやすい関数です。
is_front_page():サイトのトップページとして設定されているページis_home():投稿一覧を表示するページ
「設定 → 表示設定」で固定ページをトップページに設定している場合、両者は異なるページを指すことがあります。
例えば、トップページが「ホーム」、投稿一覧が「ブログ」という構成では、トップページの判定には is_front_page()、ブログ一覧の判定には is_home() を使います。
この違いを理解しておくと、トップページとブログ一覧の表示制御を正しく設計できます。
3. 条件分岐タグを使うときの注意点
条件分岐タグは便利ですが、使うタイミングに注意が必要です。
多くの条件分岐タグは、WordPressがリクエストを解析し、メインクエリを準備した後に正しく判定できます。そのため、functions.php の読み込み時点で、いきなり is_page() などを実行するのは避けましょう。
例えば、次のような記述は適切ではありません。
// functions.php のトップレベルに直接書かない
if ( is_page( 'contact' ) ) {
// 処理
}
代わりに、テンプレート内で判定するか、適切なフックの中で処理します。
この考え方は、次に紹介するフックを理解するうえでも重要です。
4. WordPressの「フック」とは?
フック(Hooks)は、WordPress本体やテーマ、プラグインの処理に独自のコードを組み込むための仕組みです。
WordPressでは、主に次の2種類が用意されています。
- アクションフック(Action Hook):特定のタイミングで処理を実行する
- フィルターフック(Filter Hook):処理の途中でデータを変更し、その値を返す
公式の開発者向けドキュメントでも、アクションは処理の実行、フィルターはデータの変更という役割で整理されています。
アクションフック:add_action()
アクションフックを登録するには、add_action() を使います。
基本形は次のとおりです。
add_action( 'フック名', '実行する関数' );
例えば、WordPressの init フックに独自の処理を登録する場合は、次のように書きます。
function mytheme_custom_init() {
// 初期化時に実行したい処理
}
add_action( 'init', 'mytheme_custom_init' );
WordPressが init フックを実行すると、登録した関数も呼び出されます。
init は、カスタム投稿タイプやタクソノミーの登録などでよく使われるフックです。
ただし、どのフックでも同じ処理ができるわけではありません。目的に応じて、適切なタイミングのフックを選ぶことが重要です。
フィルターフック:add_filter()
フィルターフックは、値を受け取り、必要に応じて変更して返す仕組みです。
例えば、投稿タイトルの先頭に文字列を追加する場合は、次のように記述できます。
function mytheme_filter_title( $title ) {
return '記事:' . $title;
}
add_filter( 'the_title', 'mytheme_filter_title' );
the_title フィルターを通るタイトルに対して、文字列を追加しています。
フィルターでは、受け取った値を加工したうえで return することが基本です。値を変更する必要がない場合も、受け取った値をそのまま返します。
なお、この例は対象となるタイトルすべてに影響する可能性があります。実際のサイトで使う場合は、管理画面や特定の投稿など、必要な範囲に処理を限定する設計も検討しましょう。
5. アクションとフィルターの違いを整理する
| 比較項目 | アクション | フィルター |
|---|---|---|
| 主な目的 | 処理を実行する | データを変更する |
| 登録関数 | add_action() | add_filter() |
| コールバックの役割 | 処理を行う | 値を受け取り、変更して返す |
| 代表的な用途 | CSS・JSの登録、初期化処理 | タイトルや本文、HTML属性などの加工 |
簡単にいうと、「何かを実行したいならアクション」「値を加工したいならフィルター」 と考えると理解しやすくなります。
6. 実務例:CSS・JavaScriptを正しく読み込む
オリジナルテーマでは、CSSやJavaScriptを読み込む処理を functions.php に記述することがあります。
フロントエンド用のスタイルやスクリプトは、wp_enqueue_scripts アクションを使って登録・読み込みするのが基本です。
function mytheme_enqueue_assets() {
wp_enqueue_style(
'mytheme-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
wp_enqueue_script(
'mytheme-script',
get_theme_file_uri( 'assets/js/main.js' ),
array(),
wp_get_theme()->get( 'Version' ),
true
);
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
このコードでは、テーマのスタイルシートとJavaScriptをWordPressの仕組みを通じて読み込んでいます。
特定のページだけに読み込む
条件分岐タグとフックを組み合わせれば、必要なページにだけファイルを読み込むこともできます。
例えば、お問い合わせページだけで専用のJavaScriptを読み込む場合は、次のように記述します。
function mytheme_enqueue_contact_script() {
if ( is_page( 'contact' ) ) {
wp_enqueue_script(
'mytheme-contact',
get_theme_file_uri( 'assets/js/contact.js' ),
array(),
wp_get_theme()->get( 'Version' ),
true
);
}
}
add_action(
'wp_enqueue_scripts',
'mytheme_enqueue_contact_script'
);
この例では、wp_enqueue_scripts フックの実行時に is_page( 'contact' ) で判定し、対象の固定ページにだけスクリプトを登録します。
ページごとに必要な処理を整理できるため、サイトの構成によっては不要なファイルの読み込みを減らすことにもつながります。
7. 実務例:body_class フィルターでクラスを追加する
WordPressでは、body_class() を使うと、ページの種類などに応じたCSSクラスをbody要素に出力できます。
フィルターを使えば、独自のクラスも追加できます。
例えば、固定ページに is-custom-page というクラスを追加したい場合は、次のように書きます。
function mytheme_add_body_class( $classes ) {
if ( is_page() ) {
$classes[] = 'is-custom-page';
}
return $classes;
}
add_filter( 'body_class', 'mytheme_add_body_class' );
テンプレート側では、通常どおり次のように記述します。
<body <?php body_class(); ?>>
固定ページでは、WordPress標準のクラスに加えて is-custom-page が出力されます。
CSS側では、次のように指定できます。
.is-custom-page .page-title {
/* 固定ページ用のスタイル */
}
この方法なら、ページの種類に応じたスタイルをテンプレートごとに重複して書く必要がなくなり、CSSの管理もしやすくなります。
8. フックを使うときに知っておきたいこと
フックは便利ですが、いくつか注意点があります。
優先順位を指定できる
add_action() と add_filter() では、実行する優先順位を指定できます。
add_action(
'init',
'mytheme_custom_init',
20
);
優先順位を省略した場合は 10 が使われます。一般に、数値が小さいコールバックから実行されます。
複数のテーマやプラグインが同じフックを利用する場合、優先順位が処理の順序に影響することがあります。
関数名の衝突を避ける
テーマやプラグインで独自関数を作る場合は、他の関数と名前が重複しないようにしましょう。
例えば、mytheme_ のようにテーマ固有の接頭辞を付ける方法があります。
また、複数のサイトで使い回す機能や、テーマを変更しても維持したい機能は、functions.php ではなく専用プラグインに分離することも検討します。
条件分岐タグを実行するタイミングに注意する
条件分岐タグを使うときは、WordPressがページ情報を判定できるタイミングかどうかを確認しましょう。
特に、フックの選び方によっては、まだページ情報が準備されていない場合があります。目的の処理がいつ実行されるべきかを意識して、フックを選ぶことが大切です。
9. 条件分岐タグとフックをどう使い分ける?
実際のWeb制作では、両者を組み合わせて使う場面が多くあります。
| やりたいこと | 主に使う仕組み |
|---|---|
| 固定ページだけ表示を変える | is_page() |
| カスタム投稿タイプの詳細だけ処理する | is_singular() |
| アーカイブページを判定する | is_archive() |
| WordPressの特定のタイミングで処理する | add_action() |
| タイトルなどの値を加工する | add_filter() |
| ページごとにCSS・JSを読み込む | wp_enqueue_scripts と条件分岐タグ |
| body要素に独自クラスを追加する | body_class フィルター |
ここで重要なのは、条件分岐タグとフックは、どちらか一方だけを選ぶものではないということです。
条件分岐タグで対象を判定し、フックで適切なタイミングに処理を登録する。この組み合わせによって、WordPressを柔軟にカスタマイズできます。
まとめ:WordPressの動作を理解すると、テーマ制作の自由度が広がる
第7回では、WordPressの条件分岐タグとフックについて解説しました。
- 条件分岐タグは、表示中のページの種類や状態を判定する
is_page()やis_singular()で処理対象を限定できるadd_action()は特定のタイミングで処理を実行するadd_filter()はデータを加工して返す- 条件分岐タグとフックを組み合わせると、ページに応じた機能や読み込みを制御できる
WordPressのテーマ制作では、テンプレートファイルだけでなく、こうした仕組みを理解しておくことが大切です。
仕組みを把握することで、コードの重複を減らし、メンテナンスしやすいテーマを設計しやすくなります。
次回は、WordPressのカスタム投稿タイプとタクソノミーを、実際のサイト設計にどう活用するかを掘り下げていきます。
参考資料
- WordPress Theme Handbook:Conditional Tags
- WordPress Plugin Handbook:Hooks
- WordPress Plugin Handbook:Actions
- WordPress Plugin Handbook:Filters
- WordPress Developer Reference:wp_enqueue_scripts
※コード例はテーマ制作の学習用です。実際のサイトへ導入する際は、テーマ構成や既存プラグインとの関係を確認してから使用してください。