functions.phpとCSSの正しい配線

お待たせしました。ここまで書きだめてきたstyle.cssを、ついにページへ配線します。使うのはテーマの第3の主役——functions.php。テンプレートが「ページの見た目」を作るファイルなら、functions.phpはテーマ全体の設定と機能を書くファイルです。

functions.phpとは

テーマフォルダにfunctions.phpを置くと、WordPressはすべてのページ表示の前にこのファイルを読みこみます。ここに「このテーマはこういう設定で動きます」を書いていくわけです。

テンプレートと違って、functions.phpはHTMLを書く場所ではありません。中身はPHPだけ。最初の書き出しはこうなります。

<?php
// このテーマの設定と機能をここに書く

CSSの正しい読みこみ：wp_enqueue_style

HTMLコースでは<link rel="stylesheet">をheadに手書きしました。WordPressでは、「このCSSを読みこんでください」とWordPressにお願いする方式をとります。

<?php

// CSS・JSの読みこみ
function shimaenagado_enqueue() {
  wp_enqueue_style(
    'shimaenagado-style',       // 名前（サイト内でかぶらない名前）
    get_stylesheet_uri()        // style.cssの場所
  );
}
add_action('wp_enqueue_scripts', 'shimaenagado_enqueue');

読み方はこうです。

1. shimaenagado_enqueueという自作の関数を定義（中身は「style.cssをお願いします」）
2. add_action(...)で「CSSを読みこむタイミングが来たら、この関数を呼んでね」とWordPressに予約

保存して表側を再読みこみすると——書きだめてきたCSSが一気に反映されます。ヒーローが水色に、お知らせが整列し、サイトが一気に「完成イメージ」の顔になるはず。

テーマサポート：titleタグを自動化

header.phpに<title>を書かなかった伏線も、ここで回収します。

// テーマの機能を有効化
function shimaenagado_setup() {
  add_theme_support('title-tag');        // <title>をWordPressにおまかせ
  add_theme_support('post-thumbnails');  // アイキャッチ画像を使えるように
}
add_action('after_setup_theme', 'shimaenagado_setup');

add_theme_support('title-tag')を宣言すると、ページごとに適切な<title>（記事名｜サイト名、など）をWordPressが自動生成してwp_head()の穴から差しこんでくれます。SEOの土台がこの1行で整います。

post-thumbnailsは記事のアイキャッチ画像（サムネイル）機能のスイッチ。有効にすると投稿編集画面に「アイキャッチ画像」パネルが現れ、テンプレート側ではthe_post_thumbnail()で表示できます。

このレッスンのまとめ

1. functions.phpはテーマの設定ファイル。全ページの前に読みこまれる。PHPのみ・閉じタグは書かない
2. CSSはwp_enqueue_style＋add_action('wp_enqueue_scripts', …)のお願い方式で配線——手書きlinkにしない
3. add_theme_support('title-tag')で<title>自動化、'post-thumbnails'でアイキャッチ解禁