WordPress：functions.phpの使い方を覚えよう！

WordPressのfunctions.phpは、テーマやサイト全体に追加の機能やカスタマイズを行うためのPHPファイルです。
ここでは、functions.phpについての基本的な知識や使用例を説明します。

funcitons.phpでできること

サイトに機能を追加するためのコードを記述できます。以下のようなカスタマイズが可能です。

・スクリプトやスタイルシートの読み込み

・WordPressのデフォルト機能の拡張

・カスタムショートコードの作成

※もっとあります。

wp-content/themes/あなたが作ったテーマフォルダにfunctions.phpに作ります。

ファイル名に注意しよう！

functionsのようにsがつきます。

意外に間違うことが多いです。

フックについて

WordPressには、まざまなフックに関連する関数が用意されています。これらを組み合わせて使うことで、WordPressの機能やデータを柔軟にカスタマイズできるようになります。

・add_action: イベントが発生したときに処理を追加する。
・add_filter: データを変更したいときにフィルターを追加する。
・remove_action: 追加されたアクションを削除する。
・remove_filter: 追加されたフィルターを削除する。
・do_action: カスタムアクションフックを定義して、特定のタイミングで実行する。
・apply_filters: カスタムフィルターフックを定義して、データをフィルタリングする。
・has_action, has_filter: 特定のアクションやフィルターが既に登録されているか確認する。

jQueryの読み込み

// jQueryを読み込む
wp_enqueue_script('jquery');

// デフォルトのjQueryを解除
wp_deregister_script('jquery');

WordPressでjQueryを使う

余談ですが、

WordPressでjQueryを使う際、$はデフォルトではjQueryを指しません。
WordPressでは$が他のライブラリと競合しないよう、jQueryという名前空間が使用されています。
そのため、$を使うためには、以下のようにjQueryを明示的に呼び出すか、関数の即時実行部分で$を使えるように設定する必要があります。

（例）

jQuery(function ($) {

  // ここからは$が使える。
  $(".header__btn").on("click", function () {
    $(this).toggleClass("opened");
    $(".header__menu").toggleClass("opened");
  });

});

jQuery(function ($) { ... })

この記法は、jQueryがDOMの読み込みを完了したときに、関数の中身が実行されることを意味します。

関数の引数として$を渡すことで、関数内で$をjQueryとして利用できるようにしています。
$がjQueryのエイリアス（別名）として使えるんですね。

簡略しない書き方として、jQuery(document).ready(function ($) { )}もありますが、簡略した方で良いでしょう。

スタイルシートの読み込み

wp_enqueue_style を使用して、テーマのスタイルシートを読み込むことができます。

// リセットCSSを読み込む
wp_enqueue_style('destyle', get_template_directory_uri() . '/assets/css/destyle.min.css');

// メインのスタイルシートを読み込む（識別子、URL、依存関係、バージョン）
wp_enqueue_style('style', get_template_directory_uri() . '/assets/css/style.css', array('destyle'), '1.0.0');

wp_enqueue_style(1, 2, 3, 4, 5); のように、wp_enqueue_style関数には引数が5つあります。

ハンドル名（必須）：ハンドル名はユニークなものにしてください。スタイルシートを識別するためのキーになります。
ファイルのパス（必須）：スタイルシートのURLを指定します。
依存関係（任意）：依存するスタイルシートを配列で指定します。指定したスタイルシートが読み込まれてから、このスタイルシートが読み込まれます。
バージョン（任意）：スタイルシートのバージョン番号を指定します。キャッシュバスティング（ブラウザキャッシュを無効化する）ために使用します。
メディアタイプ（任意）：メディアタイプを指定します（例：all, print, screen）。通常は all を使用します。

となります。

スクリプトの読み込み

wp_enqueue_scriptは、WordPressでJavaScriptファイル（スクリプト）を正しい方法でテーマやプラグインに読み込むための関数です。この関数を使用することで、依存関係や読み込む順序、キャッシュバスティングなどを適切に管理しつつ、JavaScriptファイルを安全に追加できます。

※ャッシュバスティングとは、ブラウザが保持しているキャッシュ（過去にロードされたファイルのコピー）を無効化して、最新のリソース（CSSやJavaScriptファイルなど）を強制的に再取得させるための手法

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'common-script', get_template_directory_uri() . '/js/common.js' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

wp_enqueue_script(1, 2, 3, 4, 5)のように5つの引数があります。

ハンドル名（必須）：ハンドル名はユニークなものにしてください。
スクリプトのパス（必須）：
依存関係のスクリプトの配列（任意）：
バージョン（任意）：
スクリプトをフッターで読み込むかどうか

特定のファイルでスタイルシートやスクリプトを読み込む

if　条件式を使いましょう

function theme_enqueue_assets() {

  // テーマディレクトリのURLを取得
  $theme_directory = get_template_directory_uri();

  // front-page.php のみで読み込むCSSとJavaScript
  if (is_front_page()) {
      wp_enqueue_style('front-style', $theme_directory . '/assets/css/front.css', array('common-style'));
      wp_enqueue_script('front-script', $theme_directory . '/assets/js/front.js', array('jquery'), null, true);
  }

  // news 投稿タイプ用のCSSとJavaScript
  if (is_singular('news') || is_post_type_archive('news')) {
      wp_enqueue_style('news-style', $theme_directory . '/assets/css/news.css', array('common-style'));
      wp_enqueue_script('news-script', $theme_directory . '/assets/js/news.js', array('jquery'), null, true);
  }

  // product 投稿タイプ用のCSSとJavaScript
  if (is_singular('product') || is_post_type_archive('product')) {
      wp_enqueue_style('product-style', $theme_directory . '/assets/css/product.css', array('common-style'));
      wp_enqueue_script('product-script', $theme_directory . '/assets/js/product.js', array('jquery'), null, true);
  }
}
add_action('wp_enqueue_scripts', 'theme_enqueue_assets');

カスタム投稿タイプの実装

WordPressはデフォルトでは、投稿が1つしかないのですが、増やせます。

// カスタム投稿タイプ news を登録
function create_news_post_type() {
  register_post_type('news',
      array(
          'labels' => array(
              'name' => __('News'),  // 管理画面のメニューなどで表示される投稿タイプの名前（複数形）
              'singular_name' => __('News')  // 管理画面で表示される投稿タイプの名前（単数形）
          ),
          'public' => true, // 投稿タイプを公開するかどうか。trueにすると、管理画面に表示され、公開されます
          'has_archive' => true, // 投稿タイプにアーカイブページを持たせるかどうか。trueにすると、アーカイブページが生成されます
          'show_in_rest' => true, // ブロックエディタが有効になります
          'rewrite' => array('slug' => 'news'), // 投稿タイプのURLスラッグを指定します。例: yoursite.com/news/
          'supports' => array('title', 'editor', 'thumbnail', 'excerpt') // この投稿タイプがサポートする機能を指定します
      )
  );
}
add_action('init', 'create_news_post_type');


// カスタム投稿タイプ product を登録
function create_product_post_type() {
    register_post_type('product',
        array(
            'labels' => array(
                'name' => __('Products'),
                'singular_name' => __('Product')
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'products'),
            'supports' => array('title', 'editor', 'thumbnail', 'excerpt')
        )
    );
}
add_action('init', 'create_product_post_type');

アイキャッチ画像のサポートを有効にする

function theme_setup() {
  add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'theme_setup');

カスタムタクソノミーを追加

（例） 'product-category' を追加してみる。

/**
 * カスタムタクソノミー 'product-category' を追加する関数。
 */
function create_product_taxonomies() {
  // カスタムタクソノミー（カテゴリー）'product-category' を登録
  register_taxonomy(
    'product-category', // タクソノミーのスラッグ
    'product', // 関連付けるカスタム投稿タイプ
    array(
      'labels' => array(
        'name' => __('Product Categories'), // 複数形のラベル
        'singular_name' => __('Product Category') // 単数形のラベル
      ),
      'hierarchical' => true, // 階層型（カテゴリーのように親子関係が持てる）
      'show_ui' => true, // 管理画面に表示する
      'show_admin_column' => true, // 管理画面の投稿一覧に表示
      'query_var' => true,
      'rewrite' => array('slug' => 'product-category') // スラッグを指定
    )
  );
}
add_action('init', 'create_product_taxonomies');

カスタム投稿 'products' でカテゴリーが未設定の場合に、デフォルトで '未分類' を設定する関数

/**
 * カスタム投稿 'products' でカテゴリーが未設定の場合に、デフォルトで '未分類' を設定する関数
 */
function set_default_product_category( $post_id ) {
    // 投稿タイプが 'products' ではない場合は何もしない
    if ( 'product' !== get_post_type( $post_id ) ) {
        return;
    }

    // 自動保存などでフックが呼ばれる場合があるため、通常の保存処理以外は無視
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
        return;
    }

    // タクソノミー 'product-category' に何も設定されていない場合
    $terms = wp_get_post_terms( $post_id, 'product-category' );
    if ( empty( $terms ) ) {
        // '未分類' の term_id を設定
        $uncategorized_term_id = 5;

        // デフォルトで '未分類' タームを設定
        wp_set_post_terms( $post_id, array( $uncategorized_term_id ), 'product-category' );
    }
}
add_action( 'save_post', 'set_default_product_category' );

スラッグの日本語禁止

function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) {
    if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) {
        $slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;
    }
    return $slug; // カスタマイズされたスラッグを返す
}
add_filter( 'wp_unique_post_slug', 'auto_post_slug', 10, 4 );

preg_match( '/(%[0-9a-f]{2})+/', $slug )：正規表現を使って、スラッグにURLエンコードされた文字列が含まれているかをチェックしています。例えば、タイトルが日本語の場合、デフォルトで日本語部分がURLエンコードされて %E3%81%82 のようになります。このようなスラッグを検出します。
$slug = utf8_uri_encode( $post_type ) . '-' . $post_ID;：もしスラッグがURLエンコードされた文字列を含んでいた場合、utf8_uri_encode() 関数を使って投稿タイプ（post など）をエンコードし、さらに投稿IDを追加して新しいスラッグを作成しています。例えば、投稿タイプが post で投稿IDが 123 の場合、スラッグは post-123 になります。この処理により、日本語などのURLエンコードされた複雑なスラッグではなく、わかりやすい英数字のスラッグが生成されます。
add_filter('wp_unique_post_slug', 'auto_post_slug', 10, 4);：auto_post_slug 関数を wp_unique_post_slug フィルターに追加しています。wp_unique_post_slugフィルターは、投稿のスラッグを生成する際に呼び出されます。これにより、WordPressがスラッグを生成するタイミングでカスタマイズされたスラッグが使用されるようになります。
10はフィルターの優先度、4はフィルターに渡される引数（$slug、$post_ID、$post_status、$post_type）の数です。

テーマがページのタイトルを自動的に管理

add_theme_support('title-tag')を使用して、テーマがページのタイトルを自動的に管理できるようにしています。

function theme_setup() {
    add_theme_support('title-tag');
}
add_action('after_setup_theme', 'theme_setup');

以前のバージョンのWordPressでは、header.phpファイル内で <title><?php wp_title(); ?></title> のように手動でタイトルを設定する必要がありました。

title-tag サポートを追加すると、WordPressが自動的にページのタイトルを生成してくれるため、タイトル管理が簡単になります。また、SEOプラグインなどとも連携しやすくなります。

Web