本記事では、WordPressでCSSやJavaScriptなどの別ファイルを読み込む方法について解説しています。こちらの解説では、PHPファイルを編集します。編集する際はファイルのバックアップを取ることをオススメします。手順1:wp_headとwp_footerの追加こちらの手順1は、一からテーマ作成をしている人に向けた設定になります。テーマを使用している人は以降の関数がファイル内に既に記述されていると思いますので、次のfunctions.phpの編集をご覧ください。?></head></body>タグの直前にwp_footer()関数を記述します。?></body>手順2:functions.phpの編集functions.phpに追加したいCSSとJavaScriptファイルを記述します。'themeslug_enqueue_style_script');add_actionフックの第一引数には、ファイルを読み込む時に使用される「wp_enqueue_scripts」のアクションを指定します。第二引数には実行させる関数を指定します。第二引数で指定した関数内の処理は、CSSを読み込ませたい時に「wp_enqueue_style」を、JavaScriptを読み込ませたい時に「wp_enqueue_script」を使用します。?>wp_enqueue_style関数は5つの引数を指定することが出来ます。各引数に設定する値の詳細は以下のとおりです。$handle:ハンドル名を指定します。ハンドル名はHTMLのid属性として出力されるため重複しないよう設定します。$src:読み込みたいスタイルシートまでのパスを指定します。開発環境と本番環境までのパスは異なるので、直接絶対パスで指定するのはあまり好ましくありません。「get_theme_file_uri」や「get_template_directory_uri」などの関数をしましょう。$deps:スタイルシートが依存する他のスタイルシートのハンドル名を指定します。読み込みたいスタイルシートが他のファイルに依存していない場合は初期値の空配列を指定します。$ver:スタイルシートのバージョン番号を文字列で指定します。バージョン番号を持たせない場合は初期値のfalseを指定します。$media:スタイルシートが定義されているメディアを文字列で指定します。初期値は’all’です。メディアタイプの詳細はこちらをご覧ください。?>wp_enqueue_script関数は5つの引数を指定することが出来ます。第1引数~第4引数に関してはwp_enqueue_styleと変わらないので説明は省きます。第5引数($in_footer):JavaScriptファイルを読み込ませる場所を真偽値で指定します。falseを指定した場合は<head>タグ内で読み込み、trueを指定した場合は</body>の直前に読み込みます。初期値はfalseです。DOM操作をする処理を記述している場合は、初期値のfalseだと要素を正しく取得できない場合があるのでtrueに指定することをオススメします。AGENTは、国内最大級の転職支援実績を持つIT・Web業界に強い転職エージェントです。詳細をみるフリーランス案件紹介サイトMidworksは豊富な案件と「フリーランス」と「正社員」の、良いとこ取りをした働き方を実現する手厚い保障が特徴のエージェントです。月額980円で読み放題。