WordPressのオリジナルテーマに必要なfunctions.phpの作成

目的

• WordPressテーマに functions.php を追加し、基本的な機能を有効化する
• CSS/JSファイルの読み込み を WordPressの正しい方法で行う
• サイトカラーやアイキャッチ（投稿サムネイル）など、カスタマイズの基本設定を加える

functions.phpはページに直接表示されるわけではない

HTMLやPHPテンプレート（index.php, page.php など）と違って、functions.php に書かれた内容は画面には直接表示されません。

• 裏側でWordPress本体と連携し、機能を追加していると思ってください。
• JavaScriptで言うと「イベントを設定しているjsファイル」のようなイメージです。

Webtraining　- Webトレは、 初心...

PHPでユーザー定義関数を作ってみよう | Webtraining　- Webトレは、 初心者から実務までのWeb学習トレーニ... 📁 作成ファイル・保存場所 XAMPPがインストールされているhtdocs フォルダに以下のファイルを作成してください。 ファイル名内容htdocs/php-basic/07.phpPHPとHTML XAMPP...

よく使う functions.php の記述パターン

コード例を見てみよう

// CSSとJSの読み込み
function unnhanbur_enqueue_assets() {
  wp_enqueue_style('theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'unnhanbur_enqueue_assets');

// アイキャッチを有効にする
function unnhanbur_setup_theme() {
  add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'unnhanbur_setup_theme');

css/jsファイルの読み込み

作成したfunctions.phpに下記のコードを貼り付けておきましょう。

<?php
// ==============================
// CSSとJavaScriptの読み込み
// ==============================
function unnhanbur_enqueue_assets() {
  // ------------------------------
  // ▼ CSSの読み込み
  // ------------------------------

  // Google Fonts（外部フォント）を読み込み
  wp_enqueue_style(
    'google-fonts',
    'https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Caveat:wght@500&display=swap',
    false
  );

  // リセットCSS（ブラウザ差をなくすための初期化CSS）
  wp_enqueue_style(
    'reset-style',
    get_template_directory_uri() . '/css/reset.css',
    array(), // 依存なし
    '1.0'    // バージョン
  );

  // メニュー用のスタイル
  wp_enqueue_style(
    'menu-style',
    get_template_directory_uri() . '/css/menu.css',
    array(),
    '1.0'
  );

  // カスタムスタイル（自作のCSS）
  wp_enqueue_style(
    'custom-style',
    get_template_directory_uri() . '/css/custom.css',
    array(),
    '1.0'
  );

  // テーマのメインスタイル（style.css）
  wp_enqueue_style(
    'theme-style',
    get_stylesheet_uri(),
    array(),
    '1.0'
  );

  // ------------------------------
  // ▼ JavaScriptの読み込み
  // ------------------------------

  // 自作のJavaScriptファイル（フッターで読み込み：true）
  wp_enqueue_script(
    'custom-js',
    get_template_directory_uri() . '/js/custom.js',
    array(), // 依存なし
    '1.0',
    true     // フッターで読み込む
  );
}

// WordPressのフックに登録（wp_enqueue_scriptsというタイミングで上記を実行）
add_action('wp_enqueue_scripts', 'unnhanbur_enqueue_assets');

wp_enqueue_style(ハンドル名, CSSファイルのURL, 依存関係, バージョン, メディア);

テーマの基本機能を有効化

次に下記のコードをfunctions.phpに追加で貼り付けます。

// ==============================
// テーマの初期設定
// ==============================
function unnhanbur_setup_theme() {
  // ------------------------------
  // ▼ 投稿にアイキャッチ画像（サムネイル）を使えるようにする
  // ------------------------------
  add_theme_support('post-thumbnails');

  // ------------------------------
  // ▼ カスタムロゴを有効化
  // 管理画面からロゴをアップロードして表示可能になる（必要な場合）
  // ------------------------------
  add_theme_support('custom-logo');

  // ------------------------------
  // ▼ HTML5マークアップに対応
  // 例：検索フォーム・ギャラリー・キャプションなどの出力をHTML5形式に
  // ------------------------------
  add_theme_support('html5', array('search-form', 'gallery', 'caption'));

  // ------------------------------
  // ▼ titleタグをWordPressに自動で出力させる
  // <title>〜</title> を header.php に書かなくてもOKになる
  // ------------------------------
  add_theme_support('title-tag');
}

// after_setup_theme アクションでテーマ設定を登録
add_action('after_setup_theme', 'unnhanbur_setup_theme');

:root を基にした WordPress カラーパレット登録

ブロックエディター（Gutenberg）で編集する場合、テーマカラーを統一したい（編集者に自由に色を選ばせたくない場合）に、カラーパレットを設定しておきます。

function unnhanbur_setup_theme() {最後に下記を追加します。

  // ...既存の add_theme_support()の下に下記を追加

  // Gutenberg カラーパレット登録
  add_theme_support('editor-color-palette', array(
    array(
      'name'  => __('Primary', 'unnhanbur'),
      'slug'  => 'primary',
      'color' => '#570B0B',
    ),
    array(
      'name'  => __('Primary Hover', 'unnhanbur'),
      'slug'  => 'primary-hover',
      'color' => '#F11E1E',
    ),
    array(
      'name'  => __('Background Primary', 'unnhanbur'),
      'slug'  => 'bk-primary',
      'color' => '#ffffff',
    ),
    array(
      'name'  => __('Background Secondary', 'unnhanbur'),
      'slug'  => 'bk-secondary',
      'color' => '#F5F5F5',
    ),
    array(
      'name'  => __('Text Default', 'unnhanbur'),
      'slug'  => 'text-default',
      'color' => '#1d1d1d',
    ),
    array(
      'name'  => __('Text Secondary', 'unnhanbur'),
      'slug'  => 'text-secondary',
      'color' => '#00000080',
    ),
    array(
      'name'  => __('Line Default', 'unnhanbur'),
      'slug'  => 'line-default',
      'color' => '#0000001A',
    ),
    array(
      'name'  => __('Pink', 'unnhanbur'),
      'slug'  => 'pink',
      'color' => '#f184846b',
    ),
    array(
      'name'  => __('Gray', 'unnhanbur'),
      'slug'  => 'gray',
      'color' => '#5c5c5c',
    ),
    array(
      'name'  => __('Light Gray', 'unnhanbur'),
      'slug'  => 'lightgray',
      'color' => '#ddd',
    ),
    array(
      'name'  => __('Dark Gray', 'unnhanbur'),
      'slug'  => 'darkgray',
      'color' => '#ababab',
    ),
  ));

.has-primary-background-color {
  background-color: var(--primary);
}
.has-primary-color {
  color: var(--primary);
}

.has-text-secondary-color {
  color: var(--text-secondary);
}

色以外（フォントなど）のカスタム設定もできます

:root にはフォント変数もある場合は、以下も function unnhanbur_setup_theme() { に追記可能です

add_theme_support('editor-font-sizes', array(
  array(
    'name' => __('Small', 'unnhanbur'),
    'slug' => 'small',
    'size' => 14,
  ),
  array(
    'name' => __('Medium', 'unnhanbur'),
    'slug' => 'medium',
    'size' => 18,
  ),
  array(
    'name' => __('Large', 'unnhanbur'),
    'slug' => 'large',
    'size' => 24,
  ),
  array(
    'name' => __('Title', 'unnhanbur'),
    'slug' => 'title',
    'size' => 36,
  ),
));