SWELLに外部JavaScriptやcssを安全に読み込む

>>Amazonのお得な最新のタイムセール情報はここ

サーバー管理者歴17年の筆者が選んだレンタルサーバーはここ

ドコモ home 5G「キャッシュバック10,000円」を進呈中！

swellに外部JavaScriptや外部cssが必要となる理由

cssやJavaScriptを色々と追加していくとだんだん煩雑になってきます。

cssやJavaScriptを視認性の良い広いワードプレス上のテーマファイルエディターで編集した方が色々と楽です。

その前にそれぞれの格納できる場所と効果の範囲を今一度確認しておきましょう。

SWELLのCSSを格納できる場所について

JavaScriptを格納できる場所について

swellのstyle.cssについて

SWELLの子テーマをダウンロードしてインストールすると所定の場所に現れます。子テーマはSWELLの会員サイトにありますのでそこからダウンロードしてインストールしてください。

これをインストールすると外観→テーマファイルエディターの中にSWELL CHILD: スタイルシート (style.css) があるはずです。

＞SWELL CHILD: スタイルシート (style.css) を編集してCSSを追加

これに必要なCSSを追加していきます。

JavaScriptの追加の仕方

通常はJavaScriptの外部ファイルは読み込みませんので外観→テーマファイルエディターの中にはJavaScriptの項目は出てきません。

外部JavaScriptを読み込むスクリプトを仕込んで実際にJavaScriptが所定の場所に存在するとテーマファイルエディターの選択肢にご自分でUPした任意のJavaScriptファイルが見えるはずです。

このワードプレスの標準機能のテーマファイルエディターを使用してJavaScriptも管理できると視認性が上がって良いですのでそのようにします。

安全と操作性を上げるためにCode Snippetsを使用します。直接functions.phpに書いても動きますけど今後のメンテナンス性を考えるとCode Snippetsで運用することを推奨します。ただのプラグインですのでまずインストールして下さい。Code Snippetsの機能の詳細は別記事で書いているのでそちらを熟読して確認しておいてください。

追加するスクリプト

add_action('wp_footer', function() {
  $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
  wp_enqueue_script( 'my_script', get_stylesheet_directory_uri() .'/mlabo.js', [], $timestamp );
}, 12);

code snippets実際のedit画面

コピペしたら1番下の　save changes です。

save changeするとその時点からスクリプトが有効になります。

しかし現時点ではまだ読み込むjavascriptファイルがありませんので何も起こりません。

ブラウザのデベロッパーTOOLで確認すると404を吐いて処理終了するだけで他は正常に開始しますので大丈夫です。

このスクリプトの意味

このコードは、WordPressのフッター部分に特定のJavaScriptファイル（この場合はmlabo.js）を追加するためのものです。以下に、各部分の詳細な説明を示します：

1. add_action('wp_footer', function() {...}, 12);：この部分は、WordPressのwp_footerアクションフックを使用しています。wp_footerは、テーマのフッター部分にコードを追加するためのフックです。第三引数の12は、このアクションが実行される優先度を示しています。デフォルトの優先度は10で、数字が大きいほど実行が遅くなります。つまり、このコードは他のwp_footerアクションよりも少し遅れて実行されます。
2. $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );：この行は、現在のテーマのstyle.cssファイルの最終更新日時を取得し、それを特定の形式（年月日時分秒）でタイムスタンプとして保存しています。
3. wp_enqueue_script( 'my_script', get_stylesheet_directory_uri() .'/mlabo.js', [], $timestamp );：この行は、特定のJavaScriptファイル（この場合はmlabo.js）をキューに追加します。この関数の第一引数はスクリプトのハンドル名（一意の識別子）、第二引数はスクリプトのURL、第三引数はこのスクリプトが依存する他のスクリプトの配列（この場合は空）、第四引数はスクリプトのバージョンです。ここでは、先ほど取得したstyle.cssの最終更新日時のタイムスタンプをバージョンとして使用しています。これにより、style.cssが更新されるたびに新しいバージョンのmlabo.jsが読み込まれ、ブラウザのキャッシュ問題を回避できます。

以上のように、このコードはmlabo.jsをWordPressのフッターに追加し、そのバージョンをstyle.cssの最終更新日時に基づいて管理するためのものです。

サーバー上のstyle.cssとmlabo.jsの実際の位置はどこだ？

SWELLの子テーマがインストールできていれば

/wp-content/themes/swell_child/ に style.cssがあるはずです。

同じ場所にjavascriptファイルも設置します。

javascriptのファイル名はmlabo.jsになっていますがこれは私の環境ですので名前は任意に変更してください。
当然実際のxxxxx.js と　code snippetsに記載するスクリプト内のファイル名は合わせてくださいよ笑

まだjavascriptファイルを実際に作っていない場合は当然javascriptファイルはここにはありませんので

中身が空のテキストファイルを拡張子.js にしてアップロードしておくと良いでしょう。

すでに作成済みのjavascriptが手元にあるならそのファイル名を任意に変えて必ずstyle.cssとおなじ場所にアップロードしておいてください。

SWELLのキャッシュ類、設定してあるのならサーバー側のキャッシュ類、および自分のPCやスマホのキャッシュを全て削除してリロードして正常に読み込まれているか確認しましょう。

まとめ

私の場合は全体にjavascriptを効かせるためにカスタマイザーの中にある高度な設定にスクリプトを書いていました。

少ないうちはそれでよかったのですが色々と複数動作させるとなると非常にめんどくさいことになり速度的にも問題が出てくるので外部ファイル化してメンテナンス性と処理速度を上げる目的で今回の処置を行いました。

あなたもぜひやってみてください。非常に操作性が上がりますよ。

こんな感じで広々とエディットできるようになりますｗ

「高度な設定」に記述していた<script>javascriptの内容</script>をそのまま抜き出してmlabo.jsというテキストファイルに書き出して前述の読み込みスクリプトを利用してワードプレスに認識させてるということです。

当然<script>のタグはjsファイルの中では必要無いので外してくださいよ笑

あわせて読みたい

cocoonからSWELLに移行してみよう！ SWELL: ブログ運営を劇的に改善するワードプレステーマ ブログのデザイン作成や記事作成、面倒くさいと考えていませんか？でも大丈夫！ SWELLはあなたのブログを一瞬で…