functions.phpでできること｜独自テーマ

WordPressで独自テーマを作ると、「CSSはどこで読み込む？」「お知らせの投稿はどう作る？」と迷う場面が出てきます。こうした機能は、functions.php に書いて追加します。

この記事では、独自テーマでよく書く内容を一覧で紹介します。作りたい機能から、必要な書き方を探せるようになります。

functions.phpでできることの全体像

functions.php に書く内容は、テーマを作り始めるときに書く設定と、必要に応じて足す機能に分けられます。この記事では、設定を3つ、機能を6つ紹介します。

functions.phpの基本を知る

functions.phpの役割を知る

functions.php は、テーマのフォルダに置く、機能を追加するためのファイルです。WordPressの関数を呼び出したり、自分で関数を作ったりできます。

実行されるのは、有効にしているテーマの functions.php だけです。テーマを変えると、追加した機能は使えなくなります。

好きなタイミングで処理を動かす

WordPressは、ページを表示するまでに、決まった順番で準備を進めます。その途中の決まったタイミングで、自分の関数を動かしてもらう仕組みがフックです。

例えば「CSS・JSを読み込むタイミング」に、自分で書いた関数を動かしてもらえます。

functions.php に書くことは2つです。処理を関数にまとめ、その関数をフックに登録します。

function my_theme_scripts() {  // ①
  // CSS・JSを読み込む処理
}
add_action(                    // ②
  'wp_enqueue_scripts',        // ③
  'my_theme_scripts'           // ④
);

フックの名前と関数の中身を入れ替えれば、ほかの設定や機能も同じ形で書けます。

エラーに備えて編集する

functions.php にPHPのエラーがあると、サイトの画面が真っ白になることがあります。原因の多くは、次のような書き間違いです。

エラーメッセージが表示されたら、そこに書かれたファイル名と行番号を見て、その前後を確認します。

※1：FTP…サーバーにあるファイルを、アップロード・ダウンロードするための仕組み。

テーマの土台を整える

テーマを作り始めるときに、最初に書く3つの設定です。

テーマの機能を有効にする

WordPressの機能の中には、テーマ側で「使う」と指定して初めて有効になるものがあります。指定する値は、WordPressが決めています。よく使うのは、次の3つです。

function my_theme_setup() {                // ①
  add_theme_support( 'post-thumbnails' );  // ②
}
add_action(                                // ③
  'after_setup_theme',                     // ④
  'my_theme_setup'                         // ⑤
);

この設定を書いていないと、投稿の編集画面にアイキャッチ画像の設定欄が表示されません。

CSS・JSを読み込む

CSSやJSは、link や script のタグを直接書かず、functions.php から読み込みます。

wp_enqueue_style(       // ①
  'my-theme-style',     // ②
  get_stylesheet_uri()  // ③
);

この行は、フックの例で作った my_theme_scripts() の中に書きます。

テーマの header.php に wp_head()、footer.php に wp_footer() が書かれていないと、CSS・JSが出力されません。

くわしい解説WordPressのCSS・JS読み込み｜基本編

メニューを登録する

メニューを登録すると、管理画面からメニューを編集できるようになります。

register_nav_menus(
  array(
    'primary' => 'メインメニュー',  // ①
  )
);

この行は、テーマの機能を有効にする例で作った my_theme_setup() の中に、まとめて書けます。表示するときは、①で付けたプログラム用の名前（例では primary）を指定します。

投稿と一覧を調整する

「お知らせ」などの投稿を作る

ブログの記事とは別に「お知らせ」「実績」を管理したいときは、カスタム投稿タイプとして投稿の種類を増やします。

register_post_type(
  'news',                         // ①
  array(
    'label'       => 'お知らせ',  // ②
    'public'      => true,        // ③
    'has_archive' => true,        // ④
  )
);

公式は、カスタム投稿タイプをテーマではなくプラグインに書くことを推奨しています。テーマを変えても、投稿を引き続き使えるようにするためです。テーマを変える予定のない独自テーマでは、functions.php に書く方法もよく使われます。

※2：タクソノミー…投稿を分類するための仕組み。標準のカテゴリやタグもその一種です。

一覧の件数を変える

一覧ページに並ぶ記事の数は、何も書かなければ、管理画面の「設定」→「表示設定」の件数になります。「お知らせの一覧だけ6件にしたい」というときは、pre_get_posts というフックを使います。

if ( is_admin() || ! $query->is_main_query() ) {  // ①
  return;
}
if ( $query->is_post_type_archive( 'news' ) ) {   // ②
  $query->set( 'posts_per_page', 6 );             // ③
}

①の条件を書き忘れると、管理画面やほかの一覧の件数まで変わってしまいます。

表示するパーツを増やす

画像サイズを追加する

WordPressは、アップロードした画像から、大きさの違う画像を自動で作ります。この種類を、テーマ専用に追加できます。

add_image_size(
  'card-thumb',  // ①
  600,           // ②
  400,           // ③
  true           // ④
);

thumbnail・medium・large などは、WordPressが予約している名前です。①の名前には使えないので、ほかと重ならない名前を付けます。

ウィジェットエリアを作る

ウィジェットエリアは、管理画面から検索フォームなどのパーツを出し入れできる場所です。

register_sidebar(
  array(
    'name' => 'サイドバー',  // ①
    'id'   => 'sidebar-1',   // ②
  )
);

サイドバーの中身が決まっているサイトでは、テンプレートに直接書けば足ります。

作業をラクにする

作る人と更新する人の手間を減らす機能です。

使い回す関数を用意する

functions.php には、複数のテンプレートファイルで使い回す関数を作れます。同じ内容を何度も書かずに済み、変更も1か所で済みます。

function my_theme_company_name() {  // 名前は自分で決める
  return '会社名';                  // 結果を返す
}

関数名がWordPress本体やプラグインと重なると、エラーや予期しない動作の原因になります。名前の先頭には、テーマ名などを付けます。

管理画面を使いやすくする

管理画面の投稿一覧には、独自の列を足せます。列を足すフックと、列の中身を出すフックを組み合わせて使います。

{投稿タイプ} の部分には、対象の投稿タイプの名前が入ります。この記事の「お知らせ」なら、1つ目のフックは manage_news_posts_columns になります。

種類がフィルターのフックは、値を加工して返すためのものです。add_action() の代わりに、add_filter() で登録します。

さいごに

まとめ

functions.php は、テーマに機能を足すためのファイルです。どの設定や機能も「処理を関数にまとめて、フックに登録する」という同じ形で書きます。

まずは、テーマの機能の有効化、CSS・JSの読み込み、メニューの登録の3つから書き始めましょう。編集する前に、元のファイルをコピーして保存しておくことも忘れずに。

それ以外の機能は、必要になったときにこの記事へ戻って探してみてください。

よくある質問

functions.php を保存したら、画面が真っ白になりました

PHPのエラーが原因の可能性があります。関数名のつづり、記号の抜け、行の終わりのセミコロンを確認しましょう。管理画面から直せない場合は、FTPで元のファイルを上げ直します。

原因と備え方は「エラーに備えて編集する」で解説しています。

関数を書いたのに、何も起きません

関数にまとめた処理は、フックに登録して初めて、決まったタイミングで実行されます。add_action() で登録しているか、フック名と関数名のつづりが合っているかを確認しましょう。

仕組みは「好きなタイミングで処理を動かす」で解説しています。

投稿の編集画面に、アイキャッチ画像の設定欄がありません

テーマでアイキャッチ画像の機能が有効になっていない可能性があります。functions.php で、add_theme_support() に 'post-thumbnails' を指定しましょう。

書き方は「テーマの機能を有効にする」で解説しています。

functions.php に書いたCSSが読み込まれません

読み込みの処理を wp_enqueue_scripts フックに登録しているか確認しましょう。あわせて、テーマの header.php に wp_head()、footer.php に wp_footer() が書かれているかも確認します。

書き方は「CSS・JSを読み込む」で解説しています。

一覧の件数を変えたら、管理画面の一覧まで変わりました

pre_get_posts フックは、管理画面やほかの一覧にも働きます。is_admin() と $query->is_main_query() で、対象を絞りましょう。

書き方は「一覧の件数を変える」で解説しています。

参考にした公式情報

WordPress公式 開発者向けドキュメント

functions.php の役割やフック、メニュー・画像サイズ・ウィジェットエリアの登録方法を確認できます。

公式ページを開く

どのページも英語ですが、ブラウザの翻訳機能を使えば日本語で読めます。