WP Plugin 【Custom CSS and JS】 のパスをテーマフォルダに通しておくと便利

WordPressで、ページ単位で独自のCSSやJS（または外部ファイル）を設定できるプラグイン【Custom CSS and JS】。
初期状態だと外部CSSファイルや外部JSファイルは絶対パスで記述する必要があり、テスト環境から本番へ移行する際に面倒なので、デフォルトでテーマフォルダまでパスを通しておく設定。

これ系のプラグインは沢山あってプラグインの追加画面から検索しても出てこないのだが、

Custom CSS and JS
https://ja.wordpress.org/plugins/custom-css-and-js/

これの事。

Wordpressの管理画面から追加する際は、プラグイン名ではなく作者名の「PJ Dietz」で検索すると一発で出てくる。
（※古いプラグインなので、使用は自己責任で。）


使い方はここでは説明しないので、

WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS｜コリス

このあたりを参考に。


で、カスタムフィールドに「custom_css」と「custom_js」を作っておけば、設定したページのみに外部CSSファイル／外部JSファイルを読み込ませる事ができるのだが、、、
テーマフォルダの中に「css」「js」フォルダを作ってそこまでパスを通そうとすると、ドメイントップからの絶対パスで記述しなければならず、URLが長くて面倒だし、
何よりテスト（開発）環境と本番環境でドメインが違ったりディレクトリ階層が違ったりすると、本番移行の際にこの部分の設定を全て変えねばならず面倒だ。

ならば、ここは最初からテーマフォルダからの相対パスで指定できるようにしておけば、便利だよね？という事で。

しかし、そんな設定画面は無いので、プラグインのコードを直接書き換えて力技で変更する。
（※コードの書き換えは自己責任で。）
（※これをやってしまうと絶対パスの指定はできなくなるので注意。）

プラグインがインストールされたら、
wp-content/plugins/custom-css-and-js/custom-css-js.php
というPHPファイルがあるはずなのでそれの中身を書き換える。

全文は載せないが、
--------------------
前略

$post = $wp_query->post;
$id = $post->ID;
$theme_url = get_stylesheet_directory_uri();

中略

printf('<link rel="stylesheet" type="text/css" href="%s" />', $theme_url.$css);

中略

printf('<script type="text/javascript" src="%s"></script>', $theme_url.$js);

以下略
--------------------
赤い文字が書き足した部分。

テーマまでのパスを変数「$theme_url」に入れ（変数の名称は任意）、
「printf」で書き出されるlinkタグ／scriptタグの「%s」に放り込まれる文字列変数を「$theme_url.$css」「$theme_url.$js」としておく事で、
「テーマフォルダまでのパス」＋「カスタムフィールドに入力されたパス」で出力されるようにしただけ。

※テーマフォルダまでのパス取得に「get_stylesheet_directory_uri()」を使用しているのは、子テーマでの使用を前提としているため。


本来であれば「$css」「$js」の値を見て、httpまたはhttpsで始まっていたら「$theme_url」は足さない、といった分岐処理をすべきなんだけど、今はこれで間に合っているので・・・。