1. なぜ「カスタムHTML直接記入」ではなく「functions.php」を使うのか？
カスタムHTMLブロック内に <script src="..."> を直接書く手法は直感的ですが、WordPressでの運用・拡張を考えると問題が発生しやすくなります。
| 項目 | カスタムHTML内 <script> 直書き | functions.php による一括制御（推奨） |
|---|---|---|
| 安全・確実性 | エディタの自動補正等でコードが崩れるリスクがある | WordPress標準機構（wp_enqueue_script）により安全に保護される |
| 外部ライブラリ依存 | JSZip等の読み込み順序が制御できず動作不全を起こしやすい | 依存関係（array('jszip')）を指定し正しい順番で読み込める |
| サイト軽量化 | 全ページで不要なJSが読み込まれたり管理が煩雑になる | 対象のページ（is_page）でのみピンポイントで読み込める |
2. フォルダ構成とファイル配置（実際の資産構成）
子テーマ（arkhe-child）内に js フォルダを作成し、多数のツール用JavaScriptファイルをまとめて管理します。また、API通信等のPHPファイルが存在する場合は子テーマ直下に配置します。
wp-content/themes/arkhe-child/
├── style.css ← 全体デザイン調整
├── functions.php ← JS読み込みと条件分岐の設定（要編集）
├── api.php ← PHP APIプログラム（直下に配置）
├── LocalStorage/ ← バックアップ等データ保持用フォルダ
│ └── bookmarks_backup.json
└── js/
├── index.js ← 【全ページ共通】ハンバーガーメニュー制御など
├── html-bundler-wp.js ← 【固定ページ用】HTML結合ツール
├── blood_pressure.js ← 【固定ページ用】血圧記録ツール
├── tree-ceremony.js ← 【固定ページ用】ツリー化ツール
└── (その他の各ツール用JSファイル)3. 実装と設定の4ステップ
FTPやファイルマネージャーを使って、子テーマ内の js フォルダ（arkhe-child/js/）へ使用するJSファイル群を配置します。
対象ページのURLが https://otokuhin.net/html-bundler-wp/ の場合、末尾のドメインとスラッシュを除いた部分がスラッグ（html-bundler-wp）となります。
子テーマの functions.php 内の wp_enqueue_scripts アクションへ、is_page() による条件分岐を追加します。
add_action( 'wp_enqueue_scripts', function() {
// 1. 親テーマおよび子テーマの style.css 読み込み
wp_enqueue_style( 'arkhe-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'arkhe-child-style', get_stylesheet_uri(), array('arkhe-style') );
// 2. 全ページ共通JS（ハンバーガーメニュー用）
wp_enqueue_script(
'hobbylog-index-js',
get_stylesheet_directory_uri() . '/js/index.js',
array(),
'1.0.0',
true
);
// =========================================================================
// 3. 固定ページごとの JS ピンポイント読み込み設定
// =========================================================================
// 例①：HTML結合ツール（スラッグ：html-bundler-wp）
if ( is_page( 'html-bundler-wp' ) ) {
// 外部ライブラリ（JSZip）の読み込み
wp_enqueue_script('jszip', 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js', array(), '3.10.1', true);
// ツール専用JS
wp_enqueue_script('html-bundler-js', get_stylesheet_directory_uri() . '/js/html-bundler-wp.js', array('jszip'), '1.0.0', true);
}
// 例②：血圧管理ツール（スラッグ：blood-pressure）
if ( is_page( 'blood-pressure' ) ) {
wp_enqueue_script('blood-pressure-js', get_stylesheet_directory_uri() . '/js/blood_pressure.js', array(), '1.0.0', true);
wp_enqueue_script('blood-pressure-graph-js', get_stylesheet_directory_uri() . '/js/blood-pressure-graph.js', array('blood-pressure-js'), '1.0.0', true);
}
// 例③：ツリー化ツール（スラッグ：tree-ceremony）
if ( is_page( 'tree-ceremony' ) ) {
wp_enqueue_script('tree-ceremony-js', get_stylesheet_directory_uri() . '/js/tree-ceremony.js', array(), '1.0.0', true);
}
} );WordPressの固定ページ編集画面の「カスタムHTML」ブロックからは <script> タグを消去し、純粋なHTML構造（フォームやボタン要素のみ）を貼り付けます。
4. サンプルコード内の「other-tool.js」に関する疑問と回答
A. 特別な意味やルールは一切ありません。ただの「仮のファイル名（プレースホルダー）」です。
「将来的に別のツールを追加する際は、ここをご自身が配置したJSファイル名（例: blood_pressure.js や tree-ceremony.js など）に自由に書き換えて使ってください」という意味で記載されています。
// 【解説】get_stylesheet_directory_uri() . '/js/〇〇.js' の仕組み get_stylesheet_directory_uri() ⇒ 子テーマ（arkhe-child）フォルダまでのURLを自動生成 . '/js/blood_pressure.js' ⇒ その後ろに /js/実際のファイル名 を結合する 【最終的に生成される内部URL例】 https://otokuhin.net/wp-content/themes/arkhe-child/js/blood_pressure.js
5. 安全なテスト・本番移行（Synology NASの活用）
ファイル数が非常に多いため、いきなり本番環境を書き換えるのではなく、所有している Synology NAS（Web Station / WordPressパッケージ） 上で事前テストを行うことを強く推奨します。
- Synology NAS の Web Station / WordPress を起動し、ローカル環境を準備する。
- ローカルの WordPress に
arkheおよびarkhe-childテーマをインストールする。 jsフォルダ内に各ツール用JSファイルを配置し、functions.phpに読み込み記述を行う。- ローカルの固定ページでツールが問題なく動作するか動作確認する。
- 問題がないことを確認後、本番サーバー（
otokuhin.net）の子テーマへ同様に反映する。
万が一コードの記述ミス（カンマの抜け等）で画面が真っ白になった場合でも、NASなどのテスト環境であれば安心して復旧作業を行えます。段階を踏んで移植を進めましょう！