10. functions.phpとアセット読み込み

この章では、functions.phpとアセット読み込みを学びます。

WordPressテーマでは、CSSやJavaScriptをHTMLに直接書くのではなく、WordPressの関数を使って読み込みます。

functions.phpとは

functions.phpは、テーマの機能を設定するファイルです。

たとえば、次のような処理を書きます。

テーマサポートの有効化
アイキャッチ画像の有効化
ナビゲーションメニューの登録
CSSの読み込み
JavaScriptの読み込み
ウィジェットやサイドバーの登録
独自関数の定義

テンプレートを表示するためのHTMLを書く場所ではありません。

テーマ全体の準備を書く場所として考えます。

テーマサポート

テーマサポートを使うと、WordPressの機能をテーマで有効化できます。

functions.php

<?php

function my_theme_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'html5', array( 'search-form', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

title-tagを有効化すると、WordPressがtitleタグを管理できます。

post-thumbnailsを有効化すると、アイキャッチ画像が使えるようになります。

CSSを読み込む

CSSは、wp_enqueue_style()で読み込みます。

CSS読み込み

function my_theme_enqueue_assets() {
    wp_enqueue_style(
        'my-theme-style',
        get_template_directory_uri() . '/assets/css/style.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

第1引数はハンドル名です。

第2引数はCSSファイルのURLです。

第3引数は依存関係、第4引数はバージョンです。

JavaScriptを読み込む

JavaScriptもwp_enqueue_script()で読み込みます。

JavaScript読み込み

function my_theme_enqueue_assets() {
    wp_enqueue_style(
        'my-theme-style',
        get_template_directory_uri() . '/assets/css/style.css',
        array(),
        '1.0.0'
    );

    wp_enqueue_script(
        'my-theme-script',
        get_template_directory_uri() . '/assets/js/main.js',
        array(),
        '1.0.0',
        true
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

最後のtrueは、スクリプトをフッター側で読み込む指定です。

JavaScriptは、HTMLに直接scriptタグを書くのではなく、WordPressの読み込みキューに登録します。

テーマディレクトリのURL

テーマ内のファイルを読み込む時は、get_template_directory_uri()をよく使います。

テーマ内画像のURL

<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/logo.svg' ); ?>" alt="">

子テーマを使う場合は、get_stylesheet_directory_uri()を使う場面もあります。

まずは、親テーマのURLを取得する関数としてget_template_directory_uri()を覚えます。

読み込み順

CSSやJavaScriptには、読み込み順があります。

たとえば、ライブラリに依存するJavaScriptを書く場合は、依存関係を指定します。

依存関係

wp_enqueue_script(
    'my-theme-slider',
    get_template_directory_uri() . '/assets/js/slider.js',
    array( 'jquery' ),
    '1.0.0',
    true
);

この例では、jqueryを先に読み込む前提になります。

ただし、現代の制作ではjQueryを必ず使うわけではありません。

案件の方針に合わせて判断します。

キャッシュ対策

CSSやJavaScriptを変更しても、ブラウザやサーバーのキャッシュで古いファイルが表示されることがあります。

開発中は、ファイル更新時刻をバージョンに使うことがあります。

開発中のバージョン例

wp_enqueue_style(
    'my-theme-style',
    get_template_directory_uri() . '/assets/css/style.css',
    array(),
    filemtime( get_template_directory() . '/assets/css/style.css' )
);

本番では運用方針に合わせてバージョン管理します。

よくある失敗

header.phpに直接linkタグを書く
footer.phpに直接scriptタグを書く
wp_head()やwp_footer()を書き忘れる
CSSファイルのパスを間違える
キャッシュで変更が反映されない
同じCSSを複数回読み込む

WordPressでは、WordPressの作法で読み込むことが保守性につながります。

この章のまとめ

functions.phpには、テーマの準備や機能設定を書く
CSSはwp_enqueue_style()で読み込む
JavaScriptはwp_enqueue_script()で読み込む
テーマ内ファイルのURLにはget_template_directory_uri()を使う
wp_head()とwp_footer()を書き忘れない