WordPressテーマの「functions.php」完全活用ガイド|現場で使える実践テクニック

C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは!

今日は「WordPressテーマのfunctions.phpを使いこなすコツ」について解説します。

functions.phpでよくある失敗パターン

僕も最初はfunctions.phpをね、めっちゃ雑に使ってました。
クライアント対応で「このカスタマイズしてほしい」って言われるたびに、とりあえず全部functions.phpに詰め込んでたんですよ。
そしたらですね、後々保守がめっちゃ大変になっちゃって。

現場でよく見るのは、こういったパターンです。

  • 500行、600行超えるfunctions.phpが放置されている
  • テーマを無効化したら、フロントエンドが壊れる
  • 何の機能なのか、どの部分を削除しても大丈夫か誰も分からん状態になってる
  • 複数のテーマで同じコードが重複している

特にやっかいなのは、functions.phpが「なんでも書けちゃう魔法のファイル」ってイメージされることです。
でもホンマのことを言うと、ここに書いたコードがサイト全体に影響するから、めっちゃ慎重に扱う必要があるんですよ。

現場で必須の4つの機能実装

では実際に、どんなことをfunctions.phpに書くべきなのか。
現場で本当によく使う4つをご紹介します。

1. スタイルシートとスクリプトの読み込み(wp_enqueue_style / wp_enqueue_script)

これが最も大切。functions.phpの一番最初に書くべき内容です。

function my_theme_scripts() {
  wp_enqueue_style( 'my-theme-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

ポイントはですね、add_action( 'wp_enqueue_scripts' )を使うってこと。
ぜったいにファイル内で直接読み込んではいけません。
プラグインとの競合や読み込み順序がめちゃくちゃになります。

2. テーマサポート機能(add_theme_support)

WordPressの標準機能を有効化するための記述です。

function my_theme_setup() {
  add_theme_support( 'post-thumbnails' );
  add_theme_support( 'title-tag' );
  add_theme_support( 'custom-logo' );
  add_theme_support( 'responsive-embeds' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

これが有効だと、ダッシュボードでアイキャッチ画像の設定ができたり、カスタムロゴを設定できたりするようになります。
最初の段階でこれをやっておくと、あとの制作がめっちゃスムーズになりますよ。

3. メニュー登録(register_nav_menus)

WordPressの「メニュー」機能をテーマに組み込むための設定です。

function my_theme_menus() {
  register_nav_menus( array(
    'primary' => 'Primary Menu',
    'footer' => 'Footer Menu',
  ) );
}
add_action( 'init', 'my_theme_menus' );

これをしておくと、ダッシュボードから「外観 > メニュー」でメニューが管理できるようになります。
クライアントもコンテンツ編集みたいに自由にナビゲーションを変更できるようになって、めっちゃ喜びますよ。

4. カスタム投稿タイプの登録(register_post_type)

「ブログ」「お知らせ」だけじゃなくて、オリジナルの投稿タイプが必要な場合ってありますよね。

function my_custom_post_type() {
  register_post_type( 'portfolio', array(
    'labels' => array( 'name' => 'ポートフォリオ' ),
    'public' => true,
    'has_archive' => true,
    'supports' => array( 'title', 'editor', 'thumbnail' ),
  ) );
}
add_action( 'init', 'my_custom_post_type' );

こうすることで、ダッシュボードに「ポートフォリオ」という独立した投稿タイプが増えます。
ほんま便利な機能です。

functions.phpを保守しやすくする工夫

さあ、ここからが本当に大事な話。
機能を実装することは簡単です。
でも「後で見返したときに何をやってるのか分かる」ようにすることが、本当のプロフェッショナルやと思います。

ファイルを分割する

functions.phpが膨らんできたら、ぜったいに分割するといいですよ。

// functions.php
require_once get_template_directory() . '/inc/enqueue.php';
require_once get_template_directory() . '/inc/theme-support.php';
require_once get_template_directory() . '/inc/custom-post-types.php';
require_once get_template_directory() . '/inc/filters.php';

こうすることで、テーマのフォルダ構造がこんな感じになります。

my-theme/
├── inc/
│   ├── enqueue.php
│   ├── theme-support.php
│   ├── custom-post-types.php
│   └── filters.php
├── functions.php
├── style.css
└── index.php

見ての通り、functions.php自体はめっちゃシンプルになって、各機能が分かりやすくなります。
同じ機能を修正するときも、どのファイルを開けばいいか一目瞭然ですよ。

コメントを丁寧に書く

現場では「他の人が後で見たときに分かるか」って視点がめっちゃ大事です。

// テーマのスタイルシートとスクリプトを読み込む
// 投稿画面のCSSやフロントエンド用のJSをここで管理
function my_theme_scripts() {
// メインのCSSファイル
wp_enqueue_style( 'my-theme-style', get_template_directory_uri() .