メニュー

functions.phpでCSS、JSを読み込む方法（swiper・wow・font含む！）

コーディング PHP WordPress
  • URLをコピーしました！

今回はfunctions.phpでCSS、JavaScriptを読み込む方法について解説します。

初心者の方が躓きがちな、「google font」「fontawesome」「swiper」「wow.js」「animate.css」等の読み込み方もこちらで詳しく解説しております。

本記事のゴールは、静的コーディング時にhead内で記載している下記コードをWordPress化の際にfunctions.phpに書き直すことです！

静的コーディング時のhead内のコード

<head>  
  <!-- fontawesomeの読み込み！ -->  
  <link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">

  <!-- Google fontの読み込み！ -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
  </style>

  <!-- animate.cssの読み込み！ -->
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css"
  />

  <!-- swiper-bundle.min.cssの読み込み！ -->
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">

  <!-- styles.cssの読み込み！ -->
  <link rel="stylesheet" href="./css/styles.css">

  <!-- jQueryの読み込み！ -->
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

  <!-- swiper-bundle.min.jsの読み込み！ -->
  <script defer src="./js/swiper-bundle.min.js"></script>

  <!-- wow.jsの読み込み！ -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

  <!-- script.jsの読み込み！ -->
  <script defer src="./js/script.js"></script>
</head>

こちらのコードをfunctions.phpで読み込むことがゴールです！

また、今回はfunctions.phpに記載する項目のみご紹介します。

wowやswiperの導入方法は解説しません。（静的コーディングの時点で導入できていると思いますが。）
そちらについては別途導入方法を検索してください。

wow.jsについては、こちらの記事で解説しています！ぜひご覧ください！

あわせて読みたい
wow.js（animate.css）の導入方法と使い方を超簡単に解説！ 今回は、Web制作において頻出のアニメーションであるフェードインなどを実装する際に活用する、wow.jsとanimate.cssの導入方法と使用方法を解説します！ 使い方はとても…

この記事では、静的コーディング時にhead内に記載していた内容をfunctions.phpでどのように変換するかだけを解説しています。

例えば、
wowを使用するために必要な「new WOW().init();」の記述をscript.jsに記載していないと、今回ご紹介するコードをfunctions.phpに記載するだけでは動作しません。

かわてつ

完成コードだけを見たい方は下の目次の「完成コード」をクリックしてください！

目次

head内ではなくてfunctions.phpに記述する意味

「WordPressでもhead内に記述しているままで普通に動くから、わざわざfunctions.phpで読み込む必要ないんじゃ…？」

って思われるかもしれません。（私もそうでした。）

WordPressの公式ページでは、functions.phpから読み込みことが推奨されています。

  • functions.phpに記載することでコードの一元管理が可能（メンテナンスの向上）
  • 競合等でプラグインが正常に動かない可能性がある

上記がfunctions.phpで読み込む主な理由です。

ここでは、
「WordPress化をする際は、CSS・JSの読み込みはfunctions.phpで行えば良いんだな」
くらいで理解しておけば大丈夫です！

一度書き方を理解すれば難しいものではないので、functions.phpで記述するようにしましょう！

基本の形

functons.phpでCSS・JSを読み込む基本的な形は以下の通りです。

functions.php

function my_script_init()
{
    // jQueryの読み込み
    wp_deregister_script('jquery');
	wp_enqueue_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', "", "1.0.1");

    // CSSの読み込み
	wp_enqueue_style( 'my', get_template_directory_uri() . '/assets/css/styles.css', array(), '1.0.1', 'all' );

    // JavaScriptの読み込み
	wp_enqueue_script( 'my', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery' ), '1.0.1', true );
}
add_action('wp_enqueue_scripts', 'my_script_init');

CSSを追加するための関数「wp_enqueue_style()」

CSSを追加するには
「　wp_enqueue_style( $handle, $src, $deps, $ver, $media );　」
を使用します。

  • $handle：任意の名前です。上記の例では「my」や「jquery」という名前を付けています。
  • $src：読み込みたいファイルのパスを指定します。上記の例では、「/assets/css…」ですが、こちらはご自身が使用しているパスに合わせるようにしましょう。
  • $deps：こちらは省略可能です。「array()」が初期値で、そのファイルより前に読み込みたいファイルのhandle名を「array($handle)」で記載します。上記の例では、自作のJS（script.js）より前に「jquery」を読み込ませたいので、「array( ‘jquery’ )」と記載しています。
  • $ver：こちらは省略可能です。「false」が初期値で、バージョンの指定をします。
  • $media：こちらは省略可能です。「all」が初期値で、スタイルシートのメディア属性を指定します。

JSを追加するための関数「wp_enqueue_script()」

JSを追加するには
「　wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );　」
を使用します。

$handle等の意味は同じです。

  • $in_footer：こちらは省略可能です。「false」が初期値で、読み込みの位置を指定します。bodyの閉じタグの直前に配置したい場合はtrueを記載します。

完成コード（functions.php）

早速ですが、完成コードを記載します。

静的コーディング時のhead内のコード

<head>  
  <!-- fontawesomeの読み込み！ -->  
  <link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">

  <!-- Google fontの読み込み！ -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
  </style>

  <!-- animate.cssの読み込み！ -->
  <link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css"
  />

  <!-- swiper-bundle.min.cssの読み込み！ -->
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">

  <!-- styles.cssの読み込み！ -->
  <link rel="stylesheet" href="./css/styles.css">

  <!-- jQueryの読み込み！ -->
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

  <!-- swiper-bundle.min.jsの読み込み！ -->
  <script defer src="./js/swiper-bundle.min.js"></script>

  <!-- wow.jsの読み込み！ -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

  <!-- script.jsの読み込み！ -->
  <script defer src="./js/script.js"></script>
</head>

上記のコードをfunctions.phpで記載すると下記のようになります。

functions.phpのコード（WordPress化）

function my_script_init()
{
	//jQueryの読み込み
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', "", "1.0.1");

    //wow.jsの読み込み
	wp_enqueue_script('wow', '//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js', "", "1.0.1");

    //Google font（NotoSansJP）の読み込み！
	wp_enqueue_style( 'NotoSansJP', '//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap' );

    //fontawesomeの読み込み！ 
	wp_enqueue_style('fontawesome', '//use.fontawesome.com/releases/v6.2.0/css/all.css', "", "6.2.0");

    //animate.cssの読み込み！
	wp_enqueue_style('animate', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.6.2/animate.min.css', "", "3.6.2");

    //swiper-bundle.min.cssの読み込み！
	wp_enqueue_style('swiper', get_template_directory_uri() . '/assets/css/swiper-bundle.min.css', array(), '1.0.1', 'all');

    //styles.cssの読み込み！
	wp_enqueue_style( 'my', get_template_directory_uri() . '/assets/css/styles.css', array(), '1.0.1', 'all' );

    //swiper-bundle.min.jsの読み込み！
	wp_enqueue_script( 'swiper', get_template_directory_uri() . '/assets/js/swiper-bundle.min.js', array( 'jquery' ), '1.0.1', true );

    //script.jsの読み込み！
	wp_enqueue_script( 'my', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery' ), '1.0.1', true );
}
add_action('wp_enqueue_scripts', 'my_script_init');

解説と注意点

完成コードを見たらわかる通り、

  • CSSは「wp_enqueue_style()」、JSは「wp_enqueue_script」でそれぞれ記載する
  • 読み込みたいファイルのパスの指定（基本の形で解説した「$src」の部分）は、
    基本的に「get_template_directory_uri() . ‘任意のパス’」で記載する。
    CDNで読み込む場合は、そのままリンクを貼り付ける。

のルールに従って記載すればそれほど難しくはないです。

注意点として今回のGoogle fontsなどのWebフォントを２種類以上読み込む必要がある場合は、1行ずつ記載すると覚えておきましょう。

また、「CDNで読み込む場合」か「自身がフォルダに用意しているファイルを読み込む場合」かで記載内容は変わります。

具体例を出すと、
今回はswiperを読み込むのに「get_template_directory_uri() . ‘任意のパス’」を使用していますが、swiperをCDNで読み込んでいる場合はCDNの読み込み記述をする必要があります。

（当たり前ですが、get_template_directory_uri() で指定するファイルがないと動きません。）

ご自身が静的コーディングの際にどの読み込み方で動かしているのかの確認は必ずしてください。

まとめ

WordPress化をする際は必ずCSS,JSの読み込みの作業が必要です。

実際に実装する際に迷った場合は、この記事の完成コードを見ればスムーズに対応できると思います。

ブクマ等をしてすぐに使えるようにしてください！

ここまでご覧いただきありがとうございました！

コーディング PHP WordPress

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次