鬼頭 遥貴
この記事では、プラグインなしでSnow Monkey テーマで Javascript を利用する方法を紹介します。
Javascript を利用する方法は主に以下の3つがあります。
- プラグインを利用する
- function.phpに直接記述する
- My Snow Monkeyにファイルを読み込む
この記事では、プラグインを利用しない2つの方法（2と3）を紹介します。まず最初に、なぜプラグインを利用しないほうがよいのかについて説明します。
プラグインを利用しないほうが良い理由
ここでは、主に３つの理由を紹介します。
【理由１】ページの読み込みが遅くなる
プラグインを追加すると、そのプラグインが読み込む追加のリソースやスクリプトが増えるため、サイトのパフォーマンスに悪影響を及ぼす可能性があります。特に、多数のプラグインをインストールすると、ページの読み込み速度が遅くなることがあります。
【理由２】互換性の問題
異なるプラグイン同士やプラグインとテーマとの間で互換性の問題が発生することがあります。これにより、サイトの表示が崩れたり、機能が正しく動作しなくなったりする可能性があります。特に大規模なアップデート後に問題が発生しやすくなります。
【理由３】プラグインの依存性
一度プラグインに依存すると、そのプラグインが提供する機能に依存することになります。もしプラグインが提供を停止したり、開発が中止されたりすると、その機能が使えなくなり、サイトの機能に影響が出る可能性があります。
function.phpに直接記述する
ちょこっとだけJavascriptを利用してサイトをカスタマイズしたい方
必ず、My Snow Monkeyを利用してください。
テーマのfunctions.phpをカスタマイズしても実装できるが、カスタマイズの結果、サイトが壊れてしまった時、以前の状態を復元できません。そのため絶対に、テーマのfunctions.phpのカスタマイズは避けて、My Snow Monkeyプラグインを編集しましょう。
まず、「プラグイン」＞「プラグインファイルエディター」に移動します。
編集するプラグインを選択で、「My Snow Monkey」を選択し、「選択」をクリック。
以下のコードを、My Snow Monkeyのmy-snow-monkey.phpに貼り付けて完成です。「// ここに追加のJavaScriptコードを記述」部分にJavaScriptコードを記載することができます。
function add_custom_script_to_footer() {
echo '<script>
document.addEventListener("DOMContentLoaded", function() {
// ここに追加のJavaScriptコードを記述
});
</script>';
}
add_action('wp_footer', 'add_custom_script_to_footer');My Snow Monkeyにファイルを読み込む
ガッツリJavascriptを利用してサイトをカスタマイズしたい方
上記で紹介したfunction.phpに直接記述する方法では以下のデメリットがあります。
- 大規模なカスタマイズには不向き
- コード管理が煩雑になる可能性がある
そのため、ガッツリJavascriptを利用する方は、My Snow MonkeyにJavascriptファイルを読み込む方法が良いです。
以下に手順を説明します。
1.まず、Javascriptファイルが入ったMy Snow Monkeyのzipファイルをダウンロードします。
2.ダウンロードが完了したら、WordPressダッシュボードにログインします。
3.「プラグイン」→「新規追加」に進み、「プラグインのアップロード」を選択し、上記でダウンロードしたMy Snow Monkeyの.zipファイルをアップロードします。
4.アップロードが完了したら、「今すぐインストール」をクリックします。
5.インストールが完了したら、「プラグインを有効化」をクリックします。
6.「プラグイン」＞「プラグインファイルエディター」に移動します。
7.編集するプラグインを選択で、「My Snow Monkey」を選択し、「選択」をクリック。
8.以下のコードを、My Snow Monkeyのmy-snow-monkey.phpに貼り付けて完成です。
// JavaScript ファイルの読み込み
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script(
'my-custom-script', // スクリプトのハンドル名
MY_SNOW_MONKEY_URL . '/js/custom-script.js', // スクリプトファイルの URL
array( 'jquery' ), // 依存するスクリプトのハンドル名の配列（jQuery に依存する場合）
filemtime( MY_SNOW_MONKEY_PATH . '/js/custom-script.js' ), // ファイルのバージョン、ファイルの最終更新日時でキャッシュを管理
true // スクリプトをフッターに配置するかどうか（true でフッターに配置）
);
});これで、My Snow Monkey の js ＞ custom-script.js にJavaScriptコードを記載することができます。
最後に
今回は、プラグインなしでSnow Monkey で Javascript を利用する方法を紹介しました。