SWELLに独自CSS・JS（JavaScript）を追加する4つの方法【子テーマ＋functions.php】

SWELLで独自CSSやJS（JavaScript）を追加するにはどうすればいい？

SWELLに独自のCSSを追加する方法は3通り、JSは1つです。

CSSを数行追記する程度なら、「外観」＞「カスタマイズ」＞「追加CSS」で完了します。

ファイルを個別管理したい場合やJSを追加したい場合は、子テーマを利用します。

この記事では4つの方法と具体コードを紹介します。

なお、子テーマの入手にはSWELL購入者専用サイト「SWELLER'S」へのログインして取得しておく必要があります。

この記事で分かること

CSS・JSの追加手法4つの使い分け
子テーマ内style.cssとfunctions.phpの編集手順
JSをbody閉じタグ前で読み込ませ、表示速度を維持する記述法

SWELLで独自CSS・JSを追加する4つの方法と使い分け

目的や用途に応じて適切な方法を選択しましょう。

やりたいこと	使う方法	子テーマが必要かどうか
CSSを数行だけ足したい	「外観」＞「カスタマイズ」＞「追加CSS」	不要
CSSをファイルで管理したい	子テーマのstyle.css	必要
CSSを用途別にファイルを分けたい	mystyle.cssを作ってfunctions.phpで読み込む	必要
JS（JavaScript）を追加したい	myscript.jsを作ってfunctions.phpで読み込む	必要

数行のCSS追加であれば「追加CSS」がもっとも簡単です。

管理画面上で操作が完結するため、FTP接続やファイル作成の手間がかかりません。

ファイル単位で管理したい場合やJSを追加したい場合は、子テーマを使用します。

親テーマ（本体）のファイルを直接変更すると、テーマの更新時に編集内容が上書き消去されるためです。

CSS・JSをファイルで追加する前に子テーマを用意する

前述のやりたいこと2〜4では子テーマ内のファイルを編集するため、未導入の場合はあらかじめ準備します。

SWELLの子テーマはSWELLER'Sのマイページからダウンロードする

子テーマは、SWELL購入者専用サイト「SWELLER'S」のマイページから無料ダウンロードできます。親テーマをインストールした状態で、別途アップロードして有効化してください（SWELL公式：SWELL子テーマのダウンロード）。

なお、親テーマのSWELLは絶対に削除しないでください。子テーマは親テーマが存在することを前提に動作します。

詳しい手順は以下の記事で解説しています。

ワードプレステーマ「SWELL」のインストール方法と必要な設定

子テーマのstyle.cssとfunctions.phpをFTPでダウンロードする

有効化完了後、FTPツールで子テーマフォルダへアクセスし、style.cssとfunctions.phpをローカル環境へ保存します。

サーバー上の配置ディレクトリは以下の通りです。

/wp-content/themes/swell_child

これら2つのファイルを編集して独自CSSやJSを適用していきます。

functions.phpは記述に誤りがあるとサイト全体がエラー表示不能になります。編集前に必ずバックアップを作成してください。

方法1：「外観」＞「カスタマイズ」＞「追加CSS」にCSSを書く

管理画面の「外観」＞「カスタマイズ」＞「追加CSS」に直接CSSを入力します。

FTP操作や子テーマの準備が不要なため、一番簡単な方法です。

リアルタイムでプレビューを確認しながら作業できます。

一方で記述内容はデータベースへ保存されるため、エディタによる一括置換やGit等によるバージョン管理ができません。

記述量が数百行を超える場合は、方法2または方法3への移行した方がいいです。

方法2：子テーマのstyle.cssにCSSを追記する

HTTPリクエスト（読み込みファイル数）を抑えたい場合は、既存のstyle.cssへの追記が適しています。

子テーマのstyle.cssは有効化時に自動読み込みされるため、ファイル数が増加しません。

ダウンロードした「style.css」をテキストエディタで開きます。

ファイル先頭のコメント記述は削除せず、その下部にCSSを追記してください。

追記完了後、FTPでサーバー上へ上書きアップロードすると変更が反映されます。

方法3：mystyle.cssを作ってfunctions.phpで読み込む

既存ファイルと分離し、新規CSSファイルを作成して読み込ませる手法です。

機能や用途別にファイルを分けることで保守性が向上します。なお、この手法ではfunctions.phpの編集が必要になります。

まず「mystyle.css」を作成し、子テーマフォルダ内へアップロードします。

続いて、子テーマ内functions.phpのファイル読み込み処理を以下のように変更します。

変更前のコード

/**
 * 子テーマでのファイルの読み込み
 */
add_action('wp_enqueue_scripts', function() {

  $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
  wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $timestamp );

  /* その他の読み込みファイルはこの下に記述 */

}, 11);

変更後のコード

/**
 * 子テーマでのファイルの読み込み
 */
add_action('wp_enqueue_scripts', function() {

  $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
  wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $timestamp );

  /* その他の読み込みファイルはこの下に記述 */
  wp_enqueue_style( 'my_style', get_stylesheet_directory_uri() .'/mystyle.css', [], $timestamp );
}, 11);

上記コードにより、headタグ内でmystyle.cssが読み込まれます。

第4引数の$timestampは、ファイルの更新日時をパラメータとしてURL末尾へ付与する処理です。

CSS変更時にブラウザキャッシュが残り、反映されないトラブルを防ぎます。

方法4：myscript.jsを作ってfunctions.phpで読み込む

新規JS（JavaScript）ファイルを組み込む場合は、「myscript.js」の作成・アップロードと、functions.phpの編集という2つの手順を行います。

「myscript.js」を作成し、子テーマフォルダ内へアップロードします。

次に、functions.phpの読み込みコードへ以下のように追加します。

変更後のコード

/**
 * 子テーマでのファイルの読み込み
 */
add_action('wp_enqueue_scripts', function() {

  $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
  wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $timestamp );

  /* その他の読み込みファイルはこの下に記述 */
  wp_enqueue_script( 'my_script', get_stylesheet_directory_uri() .'/myscript.js', [], $timestamp );
}, 11);

設定後、headタグ内にmyscript.jsが出力されます。

myscript.jsのアップロード先は子テーマのstyle.cssと同じ場所

独自のJavascript「myscript.js」はアップロードしないと使えません。

functions.php編集時に、前述のようにwp_enqueue_scriptを記載した場合、「myscript.js」のアップロード先は、子テーマ「style.css」と同じ場所になり、WordPress内のディレクトリとしては以下の場所になります。

/wp-content/themes/swell_child

別の書き方：wp_footerフックで読み込む

アクションフック自体をwp_footerへ変更する手法もあります。JSの読み込み処理を完全に独立させたい場合に有効です。

//body閉じタグの前で読み込む
add_action('wp_footer', function() {
  $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/myscript.js' ) );
  wp_enqueue_script( 'my_script', get_stylesheet_directory_uri() .'/myscript.js', [], $timestamp );
}, 11);

フックをwp_footerへ切り替えることで、body閉じタグ直前での読み込みが可能になります。

add_action()の第3引数「11」は実行優先度を示し、数値が小さいほど優先的に実行されます。

この書き方での注意点
【症状】wp_footerに変更後、JSが出力されなくなった。
【対処】優先度の指定を「20未満」に設定してください。WordPress本体はフッター内のscript出力処理を優先度「20」で実行します。21以上に設定すると、出力処理完了後にスクリプトが登録されるため出力されません。

【まとめ】SWELLでCSSやJSを追加する方法

独自CSSやJSの追加手法は以下の通りです。

追加方法	修正方法
追加CSSを使う	「外観」＞「カスタマイズ」＞「追加CSS」を編集する
子テーマのstyle.cssを使う	子テーマのstyle.cssにCSSを追記する
オリジナルのCSSファイルを使う	子テーマでmystyle.cssを作成しfunctions.phpを修正する
オリジナルのJSファイルを使う	子テーマでmyscript.jsを作成しfunctions.phpを修正する

※ファイル名（mystyle.css、myscript.js）は用途に応じて変更可能です。

JSを追加する際は、wp_enqueue_script()の第5引数でin_footerとstrategyを指定し、描画スピードを最適化しましょう。

実装後はPageSpeed Insights等でパフォーマンスを計測し、LCPなどの指標に悪影響が出ていないか確認してください。

数値が低下している場合は、条件分岐を用いて特定ページのみで読み込む構成にします。