SWELLに自分のオリジナルCSSやJS（Javascript）を追加する方法

SWELLでオリジナルのCSSやJSを追加したい場合の追加方法を紹介します。

SWELLでCSSやJS（javascript）を追加する場合は子テーマを使う

CSSを追加する場合は、WordPressの左メニュー「外観」＞「カスタマイズ」＞「追加CSS」が一番簡単にCSSを追加できる方法です。

上記以外で、ファイルでCSSやJSを追加したい場合は、子テーマを使って追加する方法が安全です。

SWELLの親テーマ（本体）を修正しても、テーマのアップデートで元に戻ってしまうので子テーマを使いましょう。

SWELLの子テーマをダウンロードして有効化する

SWELLの子テーマは、SWELL購入者限定のサイト「SWELLER'S」に会員登録して「マイページ」からダウンロードできます。

子テーマファイルをWordPressにアップロードして有効化しましょう。

詳しいやり方は下記の記事を紹介しているので参考にしてください。

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

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

有効化したら、FTPでSWELLの子テーマフォルダ（wp-contentフォルダの中のthemes/swell_child）にアクセスし、style.cssとfunctions.phpをダウンロードしておきます。

オリジナルCSSファイルをWordPressに追加する方法

前述の追加CSSを使う方法以外に、オリジナルCSSファイルを作って、WordPressに追加する方法が2つあります。

既存のstyle.cssを利用する方法

無駄なサーバーアクセスを減らしたい場合は、既存のstyle.cssを利用する方法が便利です。

子テーマフォルダからダウンロードした「style.css」を編集します。

ファイルには下記のコメントが追加されていますが削除せずに、このコメントの下にCSSを追加します。

※子テーマを利用するために必要なコメントなので削除すると動かなくなります。

@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

修正が終わったら、ファイルをFTPでアップロードすればCSSが反映されます。

新しいCSSファイルを作成して利用する方法

既存のsylte.cssを使わずに新しく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が読み込まれます。

オリジナルJSファイルをWordPressに追加する方法

新しくJS（jacascript）ファイルを作成してWordPressに追加する場合は、functions.phpの修正も必要です。

まず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が読み込まれます。

読み込ませる位置をフッターにする方法

大きいサイズのJS（javascript）は、headタグ内で読み込むとページ速度が遅くなる原因になってしまいます。

※SEOの指標であるCore Web Vitalsにも影響がでます。

そのため、最初に読み込ませる必要がなければ、bodyタグの終了直前で読み込むようにしましょう。

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

wp_enqueue_scriptsとなっていた部分をwp_footerにすることで、bodyタグ終了直前で読み込むことができます。

また、3番目のパラメータ（11という数値）は優先度を表しており、数値を小さほど優先度が高く、大きいほど優先度が低くなります。

数値が大きいほど、body終了タグに近いところで読み込まれます。

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

独自のCSSやJSは下記の方法で追加できます。

※mystyle.css、mystyle.jsはこの名前である必要はないです。自由に変更してください。