Jizo Games
WordPress

functions.phpを使ってCSSファイルを読み込ませる

はじめに

テンプレートを使用して、ヘッダー・フッターのHTMLを出力することができましたが、CSSも編集していきます。

難しいことはなにもなく、テーマに必須となっているstyle.cssファイルにスタイルを記述していけば、基本的にはOKです。

しかし、ウェブサイトを制作するときには、ブラウザのデフォルトをスタイルを打ち消すリセットCSSを使うのが一般的かと思います。ほかにも、外部CSSファイルを読み込みたいときもあるでしょう。

そんなときは、テーマで使用する関数をまとめたファイル、functions.phpの出番です。リセットCSSや外部CSSファイルを、わざわざstyle.cssにコピペする必要はないのです。

functions.phpを使ってリセットCSSを読み込む

まずは、リセットCSSなどの外部CSSファイルをfunctions.phpを使って読み込みます。リセットCSSについては、自分がいつも使っているものを用意しましょう。

用意したら、プロジェクトフォルダに「assets」というフォルダを作成します。このフォルダには、テーマから読み込むCSSやJavaScript、画像などを保存します。「assets」フォルダに、さらに「css」というフォルダを作成し、リセットCSSを保存します。

続いて、ファイルを新規作成し、以下のコードを記述します。「functions.php」という名前で、プロジェクトフォルダに保存しましょう。

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

/**
 * CSSを読み込む.
 */
function jizoasis_styles() {
    wp_enqueue_style( 'jizoasis-reset', get_template_directory_uri(). '/assets/css/reset.css' );
}
add_action( 'wp_enqueue_scripts', 'jizoasis_styles' );

いよいよ「テーマを作っている」感が出てきましたね。

WordPressには、テーマをカスタマイズするための関数や、それを制御するための「フック」といった機能があります。それらを組み合わせて、自分の欲しい機能を拡張していくわけです。

上記のコードでは、リセットCSSを読み込むための関数jizoasis_styles()（関数の名前は、好きなもので構いません）を定義し、add_action()でアクションフックに追加しています。

アクションフックを使うと、そのフックのタイミングで定義した処理を実行してもらうことができます。今回の場合は、「wp_enqueue_scripts」というフックのタイミングで「jizoasis_styles」が実行されます。WordPressがスクリプトを読み込むタイミングで、リセットCSSも読み込んでもらうイメージです。

WordPressのアクションフックは数えきれないほどあり、すべてを把握するのは無理だと思います。よく使われるアクションフックだけをなんとなく覚えておき、あとは必要になったときに都度調べるのがいいでしょう。

wp_enqueue_style()では、第一引数にそのスタイルシートの名前を、第二引数にスタイルシートのURLを入力しています。これで、リセットCSSを読み込むことができます。ほかにも読み込みたいCSSファイルがあれば、同じようにwp_enqueue_style()を使っていきましょう。

style.cssにテーマのスタイルを記述する

テーマのスタイルは、style.cssに記述します。HTMLやCSSでウェブサイトを制作する場合と変わりません。

<?php
if ( ! defined( 'ABSPATH' ) ) exit; ?>
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: https://ogp.me/ns#">
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <?php wp_head(); ?>
</head>
<body>
    <header id="js-global-header" class="global-header" aria-label="ページヘッダー">
        <div class="header-contents container">
            <a class="header-logo" href="<?php echo get_home_url(); ?>">
                <h1 class="site-title" translate="no"><?php bloginfo( 'name' ); ?></h1>
            </a>
        </div>
    </header>

header.phpファイルを少し更新しました。footer.phpはひとまず更新なしで、style.cssファイルにスタイルを記述していきます。

body {
    font-size: 1.125rem;
    min-height: 100lvh;
}

header a,
footer a {
    color: inherit;
    text-decoration: none;
}

.container {
    margin-inline: auto;
    max-width: 1024px;
    padding-inline: 2%;
}

.global-header {
    background-color: #007b43;
    color: #ffffff;
}

.global-footer {
    background-color: #333631;
    color: #ffffff;
    position: sticky;
    top: 100%;
}

.copyright {
    border-top: 1px solid;
    box-sizing: initial;
    display: grid;
    min-height: 48px;
    place-content: center;
}

style.cssを記述したら、外部CSSを読み込んだときと同じように、wp_enqueue_style()を使って読み込みます。functions.phpを編集します。

function jizoasis_styles() {
    wp_enqueue_style( 'jizoasis-reset', get_template_directory_uri(). '/assets/css/reset.css' );
    wp_enqueue_style( 'jizoasis-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'jizoasis_styles' );

style.cssを読み込むには、第二引数にstyle.cssのURLを返すget_stylesheet_uri()を渡します。ここまでを、テスト環境に適用させてみると、下の画像のようになりました。

やっぱりCSSがあたると、一気に「ウェブサイト感」が出てきますね！

おわりに

functions.phpを新たに作成し、スタイルシートを読み込みました。

処理を定義 → アクションフックに追加する、という流れは今後のテーマ制作にもよく登場するので、覚えておきましょう。

CSSを読み込み、ウェブサイト感が出てきてモチベーションも上がってきましたね！

X Facebook LINE Pocket