JavaScriptファイルを取り込み(wp_enqueue_script)or【WordPress】してHello Worldしてみる

  • ブックマーク

WordPressサイトで、JavaScriptのはじめの一歩で Hello World する手順。

JavaScriptファイルを読み込む設定

まず、子テーマ(Snow Monkeyだとmy-snowmonkeyプラグイン)のfunctions.phpに、JavaScriptファイルを読み込む設定を書く。

子テーマの場合

function my_add_files() {
	// 読み込み中止 - WordPress jquery.js
	wp_deregister_script('jquery');
	// jQuery CDN 読み込み
	wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "2.1.4", false );
	// JSファイル 読み込み - 子テーマ ディレクトリから
	wp_enqueue_script( 'smart-script', get_stylesheet_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true );
	}
add_action('wp_enqueue_scripts', 'my_add_files');

My Snow Monkey プラグインの場合

function my_add_files() {
	// 読み込み中止 - WordPress jquery.js
	wp_deregister_script('jquery');
	// jQuery CDN 読み込み
	wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "2.1.4", false );
	// JSファイル 読み込み - プラグイン ディレクトリから
	wp_enqueue_script( 'smart-script', plugin_dir_url( __FILE__ ) . 'js/main.js', array( 'jquery' ), '1.0.0', true );
	}
add_action('wp_enqueue_scripts', 'my_add_files');

どちらも、WordPressが準備してくれている jQuery は、扱い方が一筋違うので、読み込みを解除し、外部のjQueryを使うようにしている。

jQuery とは、JavaScriptを便利にしてくれるライブラリ。WordPressのプログラムはPHPで作るが、プラグインを導入するとカンタンに実現できる関係と今のところは理解してOK。(厳密には違うが、理解しやすい表現にしています)

次に、JavaScriptを記述するファイルを読み込む。

JavaScriptは、HTML本体に書き実行できるが、ファイルを分離する方が便利。

これもCSSファイルの関係と同じと思うと良い。

JavaScript ファイルを設置

今回は、子テーマ(もしくは、My Snow Monkeプラグイン)の直下に、”js”フォルダを作り、その中に、main.js を作成する。

子テーマ(my-snow-monkey)

js

main.js

ここに、JavaScript を記述する。

JavaScript を書いてアラートを表示

main.js に以下の1行コードを書き、保存する。

      alert('Hello World');

テストサイトを開くとダイアログが表示される

Local を使って、PC上に作成したWordPress、もしくは、テスト環境で試すと良い。

参考資料

最近の散財はこちら!

出張に便利そうなコンセントを買った!塩は、ぬちまーす。

【WordPressブログ スタートアップ講座 開催決定しました】

11月3日 祝日 水曜日
・10時から19時
・Kitchen Bee(4名)とオンライン(4名)のハイブリッド開催です。

オンラインのスタートアップ講座、気になっていたけど、4日間に分かれていて、スケジュールが、、というあなた。オンラインでも1日でOKなスケジュールを作りました。

ぜひ、この機会に、情報発信の母艦を一緒に作りましょう。

また、「ブログをスタートしたい」という方に、すごく良い講座あるよっと、ご紹介いただけると、飛び上がって喜びます。

よろしくお願いします。

(なお、リアルの会場は、Kitchen Beeにて人数を制限し、感染症対策を行って開催します。)

追伸、

また、3日の19時から20時の1時間、ものくろキャンプ交流会を開催します。こちらは、少人数ですが、Kitchen Beeのお席もご用意できる予定です。

オンラインとハイブリッド開催しますので、オンライン参加も大歓迎です。イベントを立ち上げますが、まずは、カレンダーに丸印を!

ブログスタートアップ講座のお申し込み告知ページを見逃したくない!という方は、下のメールマガジンにご登録ください。

お申し込み開始時にご案内をお送りします。

無料メルマガ発行中

メルマガも2021年は頑張って書いています。ぜひ登録して読んでくださいね。(無料です)

メールマガジン
無料で購読
メールアドレス *
* 必須項目

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


Youtube

  • ブックマーク

この記事を書いた人

情報発信ナビゲーター 大東 信仁

情報発信ナビゲーター / 博士課程中退 / ニックネーム : ものくろ / ブロガー / WordPressが得意 / orz レイアウト開発者 / 株式会社 あみだす 代表取締役

SNS でフォローする

最新の情報をお届けします

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします