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

contents

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

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

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

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

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

方法	説明
カスタマイザー→ 追加CSS	この方法は、フロント画面と管理画面（エディター画面等）の両方にCSSを適用します。効果の範囲はサイト全体になります。具体的な手順は以下の通りです： 1. 外観をクリック 2. カスタマイズを選択 3. 追加CSSをクリックしてCSSを追加
子テーマのstyle.css	この方法は、フロント画面にのみCSSを反映します。子テーマは会員サイトからダウンロード可能です。効果の範囲はサイト全体になります。具体的な手順は以下の通りです： 1. 外観をクリック 2. テーマファイルエディターを選択 3. SWELL CHILD: スタイルシート (style.css) を編集してCSSを追加
任意の投稿・固定ページのみCSSを追加する	この方法は、特定の投稿や固定ページにのみCSSを適用します。効果の範囲はそのページのみになります。具体的な手順は以下の通りです： 1. ブロックエディターの下部に移動 2. カスタムCSS &JSをクリック 3. CSSを選択してCSSを追加

cssの格納

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

方法	説明
カスタマイザー→ 高度な設定	[bodyタグ終了直前に出力するコード] この場所に<script></script>で囲んで直接javascriptを追加する。しかし画面が狭いのでコードが長いとメンテナンス性が非常に悪い。基本的には短い簡単なコード以外はやめておいた方が良い。効果範囲はサイト全体になります。
子テーマのfunctions.phpを利用して外部jsを読み込む	子テーマのfunctions.phpに外部ファイルのjs追加用のスクリプトを直接記述するかCode Snippetsプラグインなどを使用して同じことをやります。効果範囲はサイト全体になります。
任意の投稿・固定ページのみJavaScriptを追加する	特定の投稿や固定ページにのみJavaScriptを適用する場合、ブロックエディター下部のカスタムCSS &JS > JSを使用します。効果範囲はそのページのみになります。具体的な手順は以下の通りです： 1. ブロックエディターの下部に移動 2. カスタムCSS &JSをクリック 3. JSを選択してJavaScriptを追加

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）を追加するためのものです。以下に、各部分の詳細な説明を示します：

add_action('wp_footer', function() {...}, 12);：この部分は、WordPressのwp_footerアクションフックを使用しています。wp_footerは、テーマのフッター部分にコードを追加するためのフックです。第三引数の12は、このアクションが実行される優先度を示しています。デフォルトの優先度は10で、数字が大きいほど実行が遅くなります。つまり、このコードは他のwp_footerアクションよりも少し遅れて実行されます。
$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );：この行は、現在のテーマのstyle.cssファイルの最終更新日時を取得し、それを特定の形式（年月日時分秒）でタイムスタンプとして保存しています。
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やスマホのキャッシュを全て削除してリロードして正常に読み込まれているか確認しましょう。

ワードプレスでCSSやJavaScriptが反映されない？ここが解決策

まとめ

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

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

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

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

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

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

この記事を書いた人

makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在　ほぼ自由人。