プログラマーがWordPressでホームページを作成した時に、ある程度設定を行ったら次はJavaScriptで自作関数を呼びたしたくなるのではないでしょうか？
業務で作成したWebアプリケーションであれば、だいたい「./js」のディレクトリ探して、その中の「○○.js」とかをコチョコチョ編集すれば楽に呼び出せますが、WordPressでも同じようにできないのでしょうか？
そんな古い編集方法を業務で行っている管理人が、WordPressの仕組みに感動しつつ自作ファンクションを呼び出した軌跡を記述します。
自作jsファイルの読み込み手順
１．jsファイル作成
２．子テーマの圧縮ファイルを開き、「js」ディレクトリまで移動
３．１で作成したjsファイル作成をコピペ
４．子テーマをインストール
５．functions.phpを編集して、アップロードしたjsファイルを読み込むようにします。
６．「テーマの編集」から、作成したjsファイルを編集して完成 以上です。
では以下で詳しく見ていきます。
１．jsファイル作成
とりあえずメモ帳なり何なりでjsファイルを作成します。
動作確認できればなんでもいいので、とりあえずファンクションを作成します。
【ex_biiver.js】 //ただOKを表示するだけ
function testAlert() {
alert("OK");
}
２．子テーマの圧縮ファイルを開き、「js」ディレクトリまで移動
使用しているテーマの子テーマの圧縮ファイルを開き、「js」ディレクトリを探して移動します。
３．１で作成したjsファイル作成をコピペ
そのままポンと投げ込んで圧縮します。
４．子テーマをインストール
テーマをインストールした時と同じ手順で、WordPressの「ダッシュボード」から「外観＞テーマ」を開きインストールするだけです。
５．functions.phpを編集して、アップロードしたjsファイルを読み込むようにします。
「外観＞テーマの編集」を開かれると、左側にテーマファイルが表示され「テーマのための関数(functions.php)」の表記が見受けられると思います。
クリックしてエディタを開き、下記のように修正します。
wp_enqueue_script( ‘extrajs’, get_stylesheet_directory_uri() . ‘/js/ex_biiver.js’, array(), ”, true );
WordPressでは「wp_enqueue_script()」を使用して使用するファイルを呼び出します。
引数を解説します。
１．登録名は何にしますか？
２．使用するファイルの場所はどこですか？
３．使用するファイルより前に読み込んでおく必要があればこちらに記述。
jQueryを使うならarray(jquery)と記述します。
４．ファイルのバージョン（省略可）。
５．footerで出力：true / headで出力：false 子テーマを使用する場合、「get_stylesheet_directory_uri()」でリンクを呼び出せます。
今回は子テーマを使用するので「get_stylesheet_directory_uri() . ‘/js/ex_biiver.js’」と記述。
６．「テーマの編集」から、作成したjsファイルを編集して完成
この手順は追加でファンクションを作成する際に使用するだけですので、必要ない方は読み飛ばしてください。
作成したjsファイルを選択すると、エディタが表示されますので、今後簡単に修正する場合はこちらから修正を行っていけば可能です。
アップロードしたjsファイルのテスト
では原始的なテストを行います。
以下は作成したtestAlert()を呼び出すだけのボタンです。
クリックして「OK」と表示されればjsが正常に読み込まれたということになります。
以上です。
[…] 【WordPress】JavaScriptを自作して読み込みたい！ファイルの追加方法も記載 […]