functions.php css js読み込み方まとめ

プログラミング
2023.10.20
Aさん
Aさん

functions.phpでcssやjsのファイルを読み込みたい

Bさん
Bさん

記述しても読み込まれないし、コードの意味がわからない

この記事では、上記のようなfunctions.phpでcssやjs等、外部ファイルの読み込む方について解決します。

前提として一通りのコーディング知識に加えて、Wordpress教材や本を活用しているものとします。

functions.phpを使うことで、機能の拡張やカスタマイズをすることができ、ショートコードや関数の定義、記事の表示順番、外部ファイルの読み込み等ができるようになります。

なぜfunctions.phpに外部ファイルを記述する必要があるのか

functions.phpにまとめておくことで、メンテナンス性が向上されるからです。

通常なら作成したファイルの分だけheadタグの中に、下記のようにコードを記述していると思います。

<head>
    <link rel="stylesheet" href="./css/style.css">
</head>
・
・
・
<!-- jQuery読み込み -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<!-- js読み込み -->
    <script src="./js/script.js"></script>

index.php、menu.php、contact.phpのようにページがあるとすれば、全てのページに上記の記述をしているはずです。

同じ記述をするなら一つにまとめてしまったほうがメンテナンス性や効率が上がります。

パスが変わって読み込まれなくなってもfunctions.phpのみ手直しすれば、index.php、menu.php、contact.phpも手直しする必要がなくなります。

なので外部ファイルの読み込みは必ず、functions.phpでしましょう。

functions.phpファイルの基本

ここではfunctions.phpファイル作成や手順について解説します。

ファイルの場所

ファイルの作成場所としてはwordpressをインストールして、

wp-content　→　themes　→　オリジナルテーマフォルダ　→　functions.php

となります。画像だと下記の通りになります。

※既存のテーマだと「twentytwentyone」や「twentytwentytyree」がありますが、このフォルダでなくオリジナルで作成したテーマフォルダの中に作成します。

階層は他のindex.phpやhome.phpと同階層のところで大丈夫です。

これでファイルの場所は大丈夫です。

functions.phpで読み込む設定について

1.header.phpを作成して、コーディングしたファイルの下記の部分を貼り付ける。

<!DOCTYPE html>
<html lang="ja">
<head>
・
・
・
</header>

2.外部ファイル読み込みのところを下記のように置き換える。

<link rel="stylesheet" href="./css/style.css">

↓

<?php wp_head(); ?>

これでheaderの設定は完了です。

次にfooterも同様に行います。

3.footer.phpを作成して、コーディングしたファイルの下記の部分を貼り付ける。

<footer>
・
・
・
</body>
</html>

4.外部ファイル読み込みのところを下記のように置き換える。

<!-- jquery読み込み -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<!-- 自分のjs読み込み -->
<script src="./js/script.js"></script>

↓

<?php wp_footer(); ?>

これでfooterの設定も完了です。

functions.phpの設定

ここではfunctions.phpに記述するコードについて解説していきます。

WordPress関数というものを使用して記述します。

結論として次のようなコードを記述します。

<?php
function my_files() {

// css読み込み
    wp_enqueue_style("my_style", get_template_directory_uri() . "/css/style.css", array(), filemtime(get_theme_file_path('css/style.css')), "all");

// js読み込み
    wp_enqueue_script("my_script", get_template_directory_uri() . "/js/script.js", array("jquery"), filemtime(get_theme_file_path('js/script.js')), true);
  }

  add_action("wp_enqueue_scripts", "my_files");

?>

上から順に解説していきます。

function my_files() { ... }

WordPressで使用する関数で、テーマ内の外部ファイルを読み込むための設定をこの関数内で行います。名前をmy_filesとしていますが、自分がわかる名前に変更して大丈夫です。

// css読み込み
wp_enqueue_style("my_style", get_template_directory_uri() . "/css/style.css", array(), filemtime(get_theme_file_path('css/style.css')), "all");

これはCSSファイルを読み込むためのコードです。次の通り解説していきます。

wp_enqueue_style();

WordPress関数で、CSSをテーマに追加します。

"my_style"

CSSの名前です。名前は自由に設定できます。

get_template_directory_uri() . "/css/style.css"

CSSファイルのパスを取得します。get_template_directory_uri()はテーマのルートディレクトリへのURLを取得するために使用されます。

array()

依存関係がないことを示す空の配列。CSSでは気にする必要はありません。

filemtime(get_theme_file_path('css/style.css'))

CSSファイルにおけるキャッシュが原因で更新されなかったりする問題を回避することができます。

"all"

読み込まれる場所の設定でCSSが全体で読み込まれるようにする。all、true、falseの3つが設定できる。

wp_enqueue_script("my_script", get_template_directory_uri() . "/js/script.js", array("jquery"), filemtime(get_theme_file_path('js/script.js')), true);

これはJavaScriptファイルを読み込むためのコードです。解説は以下の通りです。

wp_enqueue_script();

WordPress関数で、JavaScriptファイルをテーマに追加します。

"my_script"

JavaScriptファイルの名前です。変更可能です。

get_template_directory_uri() . "/js/script.js"

JavaScriptファイルのパスを取得します。

array("jquery")

依存関係としてjQueryを指定。jQueryが読み込まれた後に読み込まれるようにします。これをしないとjQueryが読み込まれないです。

※WordpressではデフォルトでjQueryが読み込まれているため、新たに読み込む必要はないです。

filemtime(get_theme_file_path('js/script.js'))

Javascriptファイルにおけるキャッシュが原因で更新されなかったりする問題を回避することができます。

true

スクリプトをフッターで読み込むかどうか。trueの場合、ページの末尾で読み込まれます。false、true、allにおける関係性については下記の通りになります。

<?php wp_head(); ?>　なら　false

<?php wp_footer(); ?>　なら　true

全体　なら　all

<?php wp_head(); ?>と<?php wp_footer(); ?>で出力箇所を指定することができます。

add_action("wp_enqueue_scripts", "my_files");

WordPressでアクションフックを使用して、指定されたアクションが発生したときに特定の関数を呼び出すためのコードです。

add_actionで関数の呼び出し、wp_enqueue_scriptsはアクションの名前でcssとjsを読み込み、my_filesで定義されてcssとjsを読み込みます。

そのほかの外部ファイルも上記と同様のやり方で出力することができます。下記にAOS.jsとflatpickr、font awesomeの記述例を記載しておきます。

※バージョンやURLの指定が必要になりますので注意です。

// aos.css読み込み
wp_enqueue_style("aos-css", "https://unpkg.com/aos@2.3.1/dist/aos.css", array(), "2.3.1", 'all');
// aos.js読み込み
wp_enqueue_script("aos-js", "https://unpkg.com/aos@2.3.1/dist/aos.js", array("jquery"), '2.3.1', true);

// flatpickr.css読み込み
wp_enqueue_style("flatpickr.css", "https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css", array(), "", false);

// flatpickr.js読み込み
wp_enqueue_script("flatpickr.js", "https://cdn.jsdelivr.net/npm/flatpickr", array(), "", true);

// font awesome-css読み込み
wp_enqueue_style("font-awesome-css", "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css", array(), "6.4.2", "all");

// font awesome-js読み込み
wp_enqueue_script("font-awesome-js", "自分のページからURLを確認", array(), "", "all");

wp_enqueue_style

wp_enqueue_script

コードの引用先

まとめ

  • functions.phpに外部ファイルをまとめることで効率やメンテナンス性が向上する。
  • オリジナルテーマ内にfunctions.phpを作成する。
  • WordPress関数を記述しながら読み込みを行う。

下記まとめコード↓

<?php
// 外部ファイル読み込み
function my_files() {

// aos.css読み込み
wp_enqueue_style("aos-css", "https://unpkg.com/aos@2.3.1/dist/aos.css", array(),"2.3.1", 'all');

// aos.js読み込み
wp_enqueue_script("aos-js", "https://unpkg.com/aos@2.3.1/dist/aos.js", array("jquery"), '2.3.1', true);

// flatpickr.css読み込み
wp_enqueue_style("flatpickr.css","https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css", array(), "", false);

// flatpickr.js読み込み
wp_enqueue_script("flatpickr.js", "https://cdn.jsdelivr.net/npm/flatpickr", array(), "", true);

// font awesome-css読み込み
wp_enqueue_style("font-awesome-css", "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css", array(), "6.4.2", "all");

// font awesome-js読み込み
wp_enqueue_script("font-awesome-js", "自分のページからURLを確認", array(), "", "all");

// css読み込み
wp_enqueue_style("my_style", get_template_directory_uri() . "/css/style.css", array(), filemtime(get_theme_file_path('css/style.css')), "all");

// js読み込み
wp_enqueue_script("my_script", get_template_directory_uri() . "/js/script.js", array("jquery"), filemtime(get_theme_file_path('js/script.js')), true);
}


  add_action("wp_enqueue_scripts", "my_script_init");


?>

これら全てを覚える必要はないですが、どのように入力してどうなるのかをある程度覚えておいて制作を進められれば問題ないと思います。

ぜひお役立てください。

タイトルとURLをコピーしました