---
title: "wp_enqueue_styleでCSSを、wp_enqueue_scriptでJavaScriptを読み込む – WordPressテーマをゼロから作る"
canonical_url: "https://olein-design.com/blog/dev-wp-theme-05"
language: "ja"
date_published: "2016-10-17T09:08:37+09:00"
date_modified: "2025-05-14T15:24:31+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "WordPress"
---

# wp_enqueue_styleでCSSを、wp_enqueue_scriptでJavaScriptを読み込む – WordPressテーマをゼロから作る

本記事の情報は最新ではありません。以下のページの情報を参考にしてください。

[埋め込みコンテンツ](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)

今回は**wp_enqueue_style()でCSS**を読み込んでみます。また、続いて**wp_enqueue_script()でJavaScript**を読み込んでみようと思います。

## `head`タグ内に直接記述してはいけないの？

通常、静的HTMLにてウェブサイトを作成する際には、HTMLでマークアップしCSSでスタイリングして、JavaScriptで動きを出したりします。そして、CSSやJavaScriptのファイルを読み込むためにHTML内`head`タグ内や`body`の閉じタグ前などに記述します。

当然、同じようにWordPressテーマファイルに記述しても動作します（ハードコートと呼びます）。しかし、その方法はWordPressのテーマを作成する上では推奨されていません。なぜなのでしょうか。

まず理由としてあげられるのは、なんといってもメンテナンス性でしょう。テーマファイルに直接入力することは、実装自体は簡単なのですがメンテナンス性が悪くなります。ファイル名が変わったり、格納先ディレクトリが変わったりした場合に記述を変更しなくてはなりません。そして、記述が複数のファイルに及んだ場合には修正ミスにもつながりかねません。

では、どのように読み込ませたら良いのでしょうか？

## functions.phpから読み込む

CSSやJavaScriptファイルを読み込む方法として推奨されているのは、`functions.php`から`wp_head()``wp_footer()`を経由して読み込むファイルを管理する方法です。

では実際に読み込んでみましょう。

### wp_enqueue_style()でスタイルシートを読み込んでみる

まずはスクリプトを読み込むファンクションを作成します。今回は`oleindesign_scripts()`という名前で作って見ました。

そして、`wp_enqueue_style()`でスタイルシート（テーマフォルダ内の`style.css`ファイル）を読み込みます。こちらでは、`oleindesign-style`というハンドル名をつけて、`get_stylesheet_uri()`で**テーマフォルダ内にある`style.css`ファイルのパスを指定することができます。**

あとは`add_action()`を使ってアクションフックを設定します。

- [wp_enqueue_style()について](https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style)
- [get_stylesheet_uri()について](https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_stylesheet_uri)

### wp_enqueue_script()でJavaScriptを読み込んでみる

先ほど上でCSSを読み込んだ同じ要領で、今度はJavaScriptを読み込んでみましょう。

今回のコードにはちょっと今までに見たことが無いものが`if分`の中に潜んでいますね。簡単に解説しておきますと、

is_singular()  - is_single()
- is_page()
- is_attachment()

 のいずれかが表示されている場合のみtrueを返します。要は**個別の投稿を表示しているかどうか**を知るためです

  comments_open() コメント機能がオンになっているかどうか get_option( 'thread_comments' ) ) コメントがスレッド形式に設定してあるかどうか

という分岐条件が記述してあります。

そして、その条件が当てはまった場合のみ、`wp_enqueue_script()`にて`comment-reply`を呼び出しています。こちらは**コメント返信用のJavaScriptライブラリ**が呼び出されます。

> このコードはコメント返信用JavaScriptをシングルポストページに追加し、コメント返信リンクが適切に動くようにします
>
>  参照：[https://wpdocs.osdn.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A8%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E7%A7%BB%E8%A1%8C/2.7/Enhanced_Comment_Display](https://wpdocs.osdn.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A8%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E7%A7%BB%E8%A1%8C/2.7/Enhanced_Comment_Display)

このようにしてスタイルシートやスクリプトを読み込む方法が推奨されています。詳しくはリファレンスを参照するといろいろな使い方のサンプルが掲載されています。

また、WordPressを利用する上ではテーマとプラグインの共存が欠かせません。その上でも（プラグインを正常に機能させるためにも）この方法を採用するべきかともいます。ぜひ確認してみてください。

## まとめ

これでひとまず`functions.php`については終了します。今後は徐々にコーディングを進めながらWordPress実装もしていくことになります。以後、お楽しみに！