自作テーマの必須コード:functions.phpの書き方ガイド

WordPressテーマを作成する際、index.phpstyle.cssと同様に欠かせないのがfunctions.phpです。このファイルに記述するコードは、主に以下の4つのカテゴリーに分けられます。

  1. テーマサポートの設定(テーマの基本機能を有効化)
  2. CSS/JavaScriptの読み込み(正しくファイルをリンクする)
  3. メニュー・サイドバーの登録(管理画面で操作可能にする)
  4. カスタマイズ用の独自関数(抜粋の長さ変更など)

1. テーマの基本機能を有効化する(Theme Support)

WordPressにはデフォルトで備わっている機能がありますが、テーマ側で「この機能を使います」と宣言する必要があります。

PHP

function my_theme_setup() {
    // アイキャッチ画像を有効化
    add_theme_support('post-thumbnails');

    // <title>タグをWordPressが自動生成するようにする
    add_theme_support('title-tag');

    // HTML5のタグ(検索フォーム、コメントフォームなど)をサポート
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
}
add_action('after_setup_theme', 'my_theme_setup');
  • title-tag: これを書くだけで、<head>内に適切なタイトルが自動出力されます。
  • post-thumbnails: 投稿画面にアイキャッチ画像の設定欄が表示されるようになります。

2. CSSとJavaScriptを読み込む

HTMLのように<head>内に直接<link>タグを書くのは、WordPressでは非推奨です。wp_enqueue_scriptsというアクションフックを使うのが正しいルールです。

PHP

function my_theme_scripts() {
    // スタイルシート(style.css)の読み込み
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());

    // 独自のJavaScriptファイルの読み込み(jQueryに依存する場合)
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

ポイント: trueを設定することで、JavaScriptを</body>の直前で読み込む(高速化に繋がる)ようになります。


3. ナビゲーションメニューを登録する

管理画面の「外観 > メニュー」を使えるようにするための設定です。

PHP

function my_theme_menus() {
    register_nav_menus(array(
        'main-menu' => 'メインナビゲーション',
        'footer-menu' => 'フッターナビゲーション',
    ));
}
add_action('after_setup_theme', 'my_theme_menus');

これを記述した後、テーマ内の表示したい場所(header.phpなど)で wp_nav_menu() 関数を呼び出せばメニューが表示されます。


4. ウィジェット(サイドバー)を登録する

ブログなどでサイドバーに検索窓やカテゴリー一覧を表示させたい場合に必要です。

PHP

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          => 'サイドバー',
        'id'            => 'main-sidebar',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

記述する際の注意点

  • PHPの開始タグ: <?php で書き始めます。終了タグ ?> は、ファイル末尾に余計な空白が入ってエラー(画面が真っ白になるなど)を起こす原因になるため、書かないのが一般的です。
  • 関数名の衝突回避: WordPress本体やプラグインと同じ関数名を使うとエラーになります。my_theme_setup のように、自分のテーマ名などを接頭辞(プレフィックス)として付けるのがマナーです。
  • 全角スペースに注意: コード内に全角スペースが混じるとエラーになります。必ず半角英数で記述しましょう。

システム開発なんでもパートナー
システム開発なんでもパートナー

この記事を書いた人