【WordPressでオリジナルサイトを作ろう】⑥CSSファイル読込編

最終更新日2026.01.19

WordPress

HTMLのコーディングスキルだけでも案件はとれます。

大事なのはスキルの幅ではなく経験と実績です。未経験から実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。

さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

無料でメール講座を受け取る

CSSファイルの読み込みを行います。

読み込むCSSは、リセット用のCSSとテーマディレクトリ直下の「style.css」です。

HTMLだけで作るWebサイトの場合、通常は<head>内でCSSの読み込みを行いますが、WordPressでは「functions.php」というファイルの中で読み込むことが推奨されています。

functions.phpの作成

まずは、テーマディレクトリ直下に「functions.php」を作成します。

C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\functions.php

functions.phpのコーディング

続いて、CSSの読み込み処理をコーディングしていきます。

※注意
「functions.php」は、CSSの読み込み以外にも、WordPressの色々な処理を記述するための重要なファイルです。
誤った記述をすることで、サイトが表示されなくなったりすることもありますので、修正する際はバックアップをとるなどして注意して修正してください。

ソースコードは下記の通りです。

    functions.php
    
<?php

function my_enqueue_styles() {
  wp_enqueue_style('ress', '//unpkg.com/ress/dist/ress.min.css', array(), false, 'all');
  wp_enqueue_style('style', get_stylesheet_uri(), array('ress'), false, 'all');
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');

PHPの開始タグ

      functions.php
      
<?php

「functions.php」は、phpの記述のみのファイルですので終了タグは省略します。

CSSファイルの読み込み

      functions.php
      
function my_enqueue_styles() {
  wp_enqueue_style('ress', '//unpkg.com/ress/dist/ress.min.css', array(), false, 'all');
  wp_enqueue_style('style', get_stylesheet_uri(), array('ress'), false, 'all');
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');

wp_enqueue_scripts: 「wp_enqueue_scripts」をフックしてCSSの読み込み用に作成した「my_enqueue_styles」関数を呼び出します。
wp_enqueue_style: CSSファイルを読み込みます。
style.cssはressの後に読み込ませたいので、「array('ress')」で読み込み順序を指定しています。
「get_stylesheet_uri()」はテーマディレクトリ直下のstyle.cssのパスを取得する関数です。

以上でCSSファイルの読み込みは終了です。

ちなみに、JavaScriptの読み込みもCSSと同じく「wp_enqueue_scripts」関数で行います。

次は、ヘッダーのコーディングを行っていきます。

次の記事 >