【WordPressテーマの作り方 第7回】functions.phpでテーマに機能を追加しよう

「functions.phpって何を入れるところ?」
「テーマのどこで機能追加すればいいの?」

そんな疑問に答えるのが、今回のテーマ「functions.php」です。
このファイルは、WordPressテーマの“頭脳”とも言える存在。
テーマディレクトリ直下にある functions.php に記述することで、ウィジェットの登録やメニュー設定、CSSやJSの読み込みなど、サイト全体に関わる処理をまとめて管理できます。

目次

今回のゴール

  • functions.php の役割と基本構造を理解する
  • よく使う関数(add_theme_supportregister_nav_menusなど)を使ってみる
  • CSS・JSファイルの読み込み方法を覚える

1. functions.phpの役割とは?

functions.php は、テーマ内の設定・カスタマイズを一括管理できるファイルです。
HTMLで言えば <head> に書いていたような機能、PHPで言えばテーマ全体のルールを定めるファイル、といったイメージです。

例えば以下のようなことができます:

  • テーマ機能の有効化(アイキャッチ、カスタムロゴなど)
  • メニューの登録
  • サイドバー(ウィジェットエリア)の定義
  • スタイルやスクリプトの読み込み

💡 テーマに「こんな機能あるよ!」とWordPressに伝える役目も担っています。

2. よく使う関数の例

📌以下のコードはすべて functions.php に記述します。ファイルの先頭で <?php を1回書けばOKです。各コードに含まれている <?php は実際の記述では不要です。

✅ アイキャッチ画像を有効化する

<?php
// 投稿・固定ページで「アイキャッチ画像(サムネイル)」を有効にする
add_theme_support('post-thumbnails');
?>

これを書くだけで、投稿画面に「アイキャッチ画像」が追加されます。

✅ ナビゲーションメニューを登録

<?php
// ナビゲーションメニューの位置(例:グローバル、フッター)を登録
function register_my_menus() {
  register_nav_menus(array(
    'global' => 'グローバルナビ',     // ヘッダーなどに使うメニュー
    'footer' => 'フッターメニュー'    // フッター用のメニュー
  ));
}
// テーマの初期化処理の中で実行する
add_action('after_setup_theme', 'register_my_menus');
?>

💡 解説補足:

  • functions.php に書くだけで、外観 → メニュー画面に登録されます!
  • after_setup_theme は、テーマ機能の設定に適したタイミング。

🛠補足:register_nav_menus()add_theme_support() のような「テーマ機能の初期化」は、init フックではなく after_setup_theme フックに書くのが適切です。WordPressがテーマの準備をするタイミングに合わせるためです。

✅ ウィジェット(サイドバー)を登録

<?php
// サイドバーのウィジェットエリアを登録
function my_widgets_init() {
  register_sidebar(array(
    'name' => 'サイドバー',              // 管理画面での名前
    'id' => 'sidebar-1',                // 呼び出し用のID
    'before_widget' => '<div class="widget">',  // ウィジェット出力前のHTML
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
  ));
}
add_action('widgets_init', 'my_widgets_init');
?>

💡 解説補足:

  • 実際に表示したい場所で dynamic_sidebar('sidebar-1'); を使う。

3. CSS・JSファイルの読み込み

✅ style.css と script.js を読み込む方法

<?php
// テーマで使用するCSSとJSを読み込む
function my_theme_scripts() {
  // CSSを読み込み(style.cssを対象)
  wp_enqueue_style('my-style', get_stylesheet_uri());

  // JavaScriptを読み込み(フッターに読み込む)
  wp_enqueue_script(
    'my-script',
    get_template_directory_uri() . '/js/script.js',
    array(),        // 依存関係(例:['jquery'] など)
    null,           // バージョン(未指定ならnull)
    true            // フッターで読み込む(true推奨)
  );
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>

💡 解説補足:

  • 依存関係の指定により、jQueryなどと順番を保てる。
  • フッターに読み込むことで描画速度に有利。

ポイント:

  • 第5引数の true は「フッターに読み込む」の意味
  • 複数のCSSやJSも個別に wp_enqueue_*() で登録できます
  • array() の部分には依存関係(例:[‘jquery’])を指定できます
  • バージョン番号(第4引数)を指定してキャッシュ対策にも活用可能

4. 条件付きでスタイルを読み込む

たとえば about ページにだけ専用CSSを読み込むには?

<?php
// Aboutページにだけ専用CSSを読み込む
function add_about_page_css() {
  if (is_page('about')) {
    wp_enqueue_style('about-style', get_template_directory_uri() . '/css/about.css');
  }
}
add_action('wp_enqueue_scripts', 'add_about_page_css');
?>

💡 解説補足:

  • is_page() は「ページ判定」に使える条件分岐タグ。
  • 複数ページを対象にするには is_page(array('about', 'company')) と書ける。

5. よくある注意点

  • functions.php最後に ?> は書かない方が安全(空白エラーの原因になるため)
  • 同じ関数名を複数定義するとエラーになる
  • 関数の外に echo などを書いてはいけない(全ページで出力されてしまう)

💥例えば、以下のように関数の外に echo を書くと、画面の一番上に文字列が出力されてしまうことがあります:

<?php
// 間違った書き方:関数の外に echo があると、画面の最上部に出力されてしまう
echo "これはダメ!";

// 正しい方法:必ず関数の中で処理を書く
function example() {
  echo "これはOK";
}
?>

必ず、関数の中に処理をまとめて書きましょう。

💡 解説補足:

  • functions.php の関数外に直接出力処理を書くと、サイト全体に影響。
  • PHPの終了タグ(?>)も最後には不要(空白エラー対策のため)。

まとめ:functions.phpはテーマのコントロールセンター

  • add_theme_support() → テーマの機能有効化
  • register_nav_menus() → ナビゲーションメニューの登録
  • register_sidebar() → ウィジェットエリアの登録
  • wp_enqueue_style() / wp_enqueue_script() → CSSやJSを安全に読み込む

👉 複雑な機能を追加したいときは、必ず関数化してから登録するのが鉄則です!

💡 functions.php 内の関数名は、my_ などのプレフィックス(接頭語)を付けて他と被らないようにするのが安心です。

💡 ファイルが大きくなってきたら、inc/functions-〇〇.php などに分割し、require_once で読み込む構成もおすすめです。

💡 たとえば inc/setup.php にテーマ初期化処理、inc/enqueue.php にCSSやJSの読み込み処理をまとめるなど、機能別にファイルを整理すると保守性が高まります。

<?php
// ファイル分割:処理が増えてきたら別ファイル化して管理
require_once get_template_directory() . '/inc/setup.php';     // テーマ初期化
require_once get_template_directory() . '/inc/enqueue.php';   // CSS・JS読み込み
?>

💡 解説補足:

  • functions.php が大きくなってきたら、inc/ フォルダなどに整理推奨。
  • クラスベース(OOP)化を考える際にもこのスタイルが役立つ。

📝 さらに functions.php を使えば、独自ショートコードの追加や、管理画面のカスタマイズも可能です。次回以降で紹介予定!

次回予告:投稿表示のカスタマイズ

次回は、**「投稿の見せ方を自由に!」**をテーマに、

  • 抜粋(the_excerpt())のカスタマイズ
  • カテゴリー別のループ出力
  • カスタムクエリ(WP_Query)を使った一覧表示

などを、実例付きで紹介します。
投稿ページのデザインや情報整理を、もっと自由にコントロールしていきましょう!

🔍 さらに深掘りしたい人向け

  • remove_action() で不要な読み込みを停止する
  • 条件ごとの body_class カスタマイズ
  • require_once で設定ファイルを分割管理し、OOP(クラスベース)構成へ発展させる方法も。

💡 OOPへ進む際は「名前空間(namespace)」や「オートロード(PSR-4対応)」も学ぶと、より大規模テーマ開発にも応用できます。

※まずはfunctions.php一つで管理し、慣れてきたら構造化やOOP化にステップアップするのが安心です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Web制作会社勤務、業界歴10年以上。現場を走り回ってきた制作者。
これからWeb制作を学ぶ人に寄り添いながら、実務で役立つ知識をわかりやすくシェアします。
「ゼロぐらいから学べる!」をモットーに、あなたの“がんばろ”を応援します!

目次