MENU
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ

カテゴリー

  • 趣味
  • WordPress
  • 本棚
  • プログラミング
  • 日記
  • WEBデザイン
  • フリーランス

タグ

Adobe Illustrator Gatsby.js HTML/CSS MySQL Node.js Python SWELL WordPressプラグイン おすすめツール エックスサーバー セキュリティ バレットジャーナル 確定申告 開発環境

アーカイブ

  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年8月
  • 2020年10月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年8月
  • 2019年5月
  • 2019年2月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2017年10月
プログラミングとデザインでものづくりを楽しむブログ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
ゼロの森
  • Profileプロフィール
  • Blogブログ
    • WordPressワードプレス
    • プログラミング
    • WEBデザイン
    • フリーランス
    • ライフログ
  • Portfolioポートフォリオ
  • Sitemapサイトマップ
  • Contactお問合せ
  1. ホーム
  2. WordPress
  3. WordPressのテーマにcssとjsを読み込む書き方

WordPressのテーマにcssとjsを読み込む書き方

2021 11/19
WordPress
2018-08-03 2021-11-19

この記事では、WordPressテーマをカスタマイズする際に行う、CSSやJSの読み込みを方法について解説します。

目次
スポンサーリンク

WordPressテーマにCSSファイルを読み込む

functions.phpで読み込みたいcssファイルを記述します。

// CSSファイルの読み込み
function add_stylesheet() {
    wp_enqueue_style(
        'style',
        get_template_directory_uri().'/css/style.css'
    );
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );

保存したら、ページをひらくとhead内にCSSファイルへのリンクが表示されます。

<link rel='stylesheet' id='style' type=‘text/css’ href='http://テーマのファイル/css/style.css' media='all' />

CSSを読み込む関数:wp_enqueue_style()関数

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
$handleスタイルの名前
$srcスタイルシートのURL
$depsこのスタイルを読みこむ前に、読みこむCSSファイル
array(‘parent-style’)のように名前を指定する
初期値はarray()
$verバージョン番号
初期値はfalse
$mediamedia属性を指定する
初期値はall

基本的には、スタイルの名前と、スタイルシートのURLの2つを設定すればオッケーです。

enqueはキュー(列)に入れるという意味です。

CSSファイルの読込み順序に気をつける

function add_stylesheet() {
    wp_enqueue_style(
        'bootstrap', // 読み込み名
        get_template_directory_uri() . '/css/bootstrap.css'
    );
    wp_enqueue_style(
        'style',
        get_template_directory_uri() . '/css/style.css',
        array('bootstrap') // style.cssの前にbootstrap.cssを読み込む
    );
}
add_action( 'wp_enqueue_scripts', 'add_stylesheet' );

WordPressテーマにJSファイルを読み込む

functions.phpで読み込みたいjavascriptファイルを記述します。

function add_scripts() {
    wp_enqueue_script(
        'main',
        get_template_directory_uri().'/js/main.js',
    );
}
add_action( 'wp_enqueue_scripts', 'add_scripts');

このコードによって、head内にこんな風にjavascriptのファイルが表示されます

<script type=‘text/javascript’ scr='http://テーマのファイル/js/main.js'></script>

Javascriptを読み込む関数:wp_enqueue_script関数

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$handleスクリプトの名前
$srcスクリプトのURL
$depsこのスタイルを読みこむ前に、読みこむjsファイル
array(‘parent-js’)のように、スクリプトの名前を指定する
初期値はarray()
$verバージョン。初期値はfalse
$in_footerスクリプトの配置位置。
trueだと</body>の直前。
falseだと</head>タグ内に表示される
初期値はfalse.
※基本、最初に読み込まなくて良ければtrueを設定する

【応用編】読み込み順序とスクリプトの表示位置を指定する記述例

[prism class=”php”]//functions.php function add_scripts() { wp_enqueue_script( ‘bootstrap’, get_template_directory_uri().’/js/bootstrap.min.js’, array( ), false, true // /body前に出力 ); wp_enqueue_script( ‘main’, get_template_directory_uri().’/js/main.js’, array(‘bootstrap’), // bootstrapの後に読み込む false, true // /body前に出力 ); } add_action( ‘wp_enqueue_scripts’, ‘add_scripts’);[/prism]

子テーマでcssとjsを読み込むときの注意点

WordPressで子テーマにCSSとJavascriptファイルを読み込む場合には、子テーマのfunctions.phpに記述していきます。

子テーマでは、URLを取得する関数が変わる

テーマファイルのURLを取得する関数は二種類あります

  • get_template_directory_uri()
  • get_stylesheet_directory_uri()

親テーマのみの場合、どちらも親テーマのディレクトリになります。

子テーマを有効化している場合は、それぞれ取得結果のURLが変わります。

get_template_directory_uri()関数親テーマのディレクトリ
get_stylesheet_directory_uri()関数子テーマのディレクトリ

子テーマをカスタマイズするときには、get_stylesheet_directory_uri()を使います。

ファイルの読み込み順を指定する

  1. 親テーマのstyle.css
  2. 子テーマのstyle.css
  3. 親テーマのmain.js
  4. 子テーマのmain.js

親テーマのCSSとJSを読み込んだ後に、子テーマのCSSとJSを読み込むことでファイルを上書きます。

//functions.php
function add_files() {
    // 親テーマのstyle.cssを読み込む
    wp_enqueue_style(
        'parent-style',
        get_template_directory_uri().'/css/style.css'
    );
    // 子テーマのstyle.cssを読み込む
    wp_enqueue_style(
        'child-style',
        get_stylesheet_directory_uri().'/css/style.css',
        array('parent-style') // 親テーマのファイルを先に読み込む
    );
    wp_enqueue_script(
        'parent-js',
        get_template_directory_uri().'/js/main.js',
        array(),
        false,
        true
    );
    wp_enqueue_script(
        'child-js',
        get_stylesheet_directory_uri().'/js/main.js',
        array('parent-js'),  // 親テーマのファイルを先に読み込む
        false,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'add_files');

まとめ

以上、WordPressテーマにCSSとJavaScriptを読むこむ記述方法でした。

  • cssとjsのファイルの読み込みはfunctions.phpに書く
  • CSSを読み込む時はwp_enqueue_style()、jsファイルを読み込む時はwp_enqueue_script()を使う
  • 子テーマにファイルを読み込む時には、get_stylesheet_directory_uri()で、子テーマのディレクトリからURLを取得する。
WordPress
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • 【バレットジャーナル】私の読書ノートの書き方
  • 事業主貸と事業主借。個人事業で便利だけど、使い方に注意(私の失敗談)

関連記事

  • 【2022年版】Smash Balloon Social Photo Feedの使い方〜インスタグラムを表示できるプラグイン〜
    2022-03-25
  • WordPressでホームページを作れるようになるまでに私が学んだこと
    2022-01-30
  • 【図解】WordPressのテーブル構造はどうなっているの?
    2021-12-03
  • WordPressの投稿に管理者用メモをいれるプラグインを作る
    2021-11-29
  • 記事をランダム表示するウィジェットを作る
    2021-11-27
  • Snow Monkey Formsでお問合せフォームを作成する
    2021-11-17
  • WordPressプラグインを作ってみる。はじめの一歩。
    2021-11-10
  • 【初心者向け】WordPressを安全に使いたい!Wordfence Securityの設定方法
    2021-10-31
Zero Forest
カテゴリー
  • WordPress (30)
  • プログラミング (17)
  • WEBデザイン (6)
  • フリーランス (7)
  • ライフログ (10)
    • 趣味 (2)
    • 本棚 (3)
    • 日記 (5)
タグ
Adobe Illustrator (2) Gatsby.js (3) HTML/CSS (7) MySQL (1) Node.js (2) Python (2) SWELL (1) WordPressプラグイン (10) おすすめツール (3) エックスサーバー (4) セキュリティ (3) バレットジャーナル (2) 確定申告 (1) 開発環境 (3)
  • サイトマップ
  • サイトポリシー

© Zero*forest

目次
閉じる