WordPressテーマの「functions.php」完全活用ガイド|現場で使える実践テクニック
こんにちは!
今日は「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() .