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の子テーマフォルダにアクセスし、style.cssとfunctions.phpをダウンロードしておきます。

WordPress内のディレクトリでいうと以下の場所です。

上記の二つのファイルを編集してオリジナルJSやCSSを追加することになります。

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

オリジナルCSSをWordPressに追加する方法は3つあります。

• 1）「外観」＞「カスタマイズ」＞「追加CSS」から追加
• 2）子テーマのstyle.cssに追加
• 3）新しいCSSファイルを作成して追加

1）「外観」＞「カスタマイズ」＞「追加CSS」から追加

WordPressの左メニュー「外観」＞「カスタマイズ」＞「追加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が反映されます。

3）新しいCSSファイルを作成して追加

既存のsylte.cssとは別のCSSファイルを作成して利用する方法です。この場合は、functions.phpの修正も必要になります。

やり方は、mystyle.cssを作って、子テーマフォルダにアップロードします。

次に、子テーマのfunctions.phpにあるCSSファイルの読み込み箇所を下記のように修正します。

以下は、変更前のコードと変更後のコードです。

変更前のコード

/**
 * 子テーマでのファイルの読み込み
 */
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に追加する場合は、「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が読み込まれます。

独自JSの読み込み位置をbody閉じタグ前に持ってくる方法

大きいサイズのJS（javascript）は、headタグ内で読み込むとページ速度が遅くなる原因となるため、body閉じタグ前で読み込ませることで速度改善ができます。

読み込みが速い方が、SEOの指標であるCore Web Vitalsにもよい影響を与えます。

body閉じタグの前で読み込ませる場合は、functions.phpに以下のコードを追加します。

//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_enqueue_scriptsとなっていた部分をwp_footerにすることで、body閉じタグの少し前で読み込ませることができます。

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

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

myscript.jsのアップロード場所

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

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

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

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

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