ワードプレスでJSのインラインスクリプト設置方法

ワードプレスでJSのインラインスクリプト設置方法

  • 2017-09-02  最終更新日:2017-09-02

今回はワードプレスにインラインスクリプトを入れる場合の対処方法です。

jQueryなどでオプション指定したりタグなどを入れ込んだりするときに有効です。

結構簡単です。割と最近なんですがそれ用の関数がもう出ています。ワードプレスの4.5以上の機能になりますのでご注意下さい。

wp_add_inline_script( $handle, $data, $position );
$handle:インラインスクリプトを追加するスクリプト名(必須) 。
$data:追加するJavaScriptを含む文字列(必須)。
$position:インラインスクリプトを$handleの前または後に追加する。デフォルトは後(オプション)。

これですね。

jsライブラリなどをwp_enqueue_script関数で読み込んでいるところに一緒に記述すると良いですね。

主にfunction.phpに記載します。

簡単に実装例を載せておきます。


実装例

インラインスクリプトの表示例です。

<?php

function load_inline_script() {
	wp_enqueue_script('app',  get_template_directory_uri().'/js/app.js', array('jquery'), '1.0', true);
	if ( function_exists( 'wp_add_inline_script' ) ) {
		$tag = "";
		if(is_home()){
			$tag = "
			(function($){
				apps.mainslider();
				apps.pagescroller();
			})(jQuery);";
		}

		wp_add_inline_script('app', $tag, 'after');
    }
}

add_action('wp_enqueue_scripts', 'load_inline_script');

上記の例はapp.jsを読み込ませてその下にインラインで表示されるスクリプトです。 条件としてトップページのみの条件にしてあります。

<script type='text/javascript' src='http://example.com/wp-content/themes/themenames/js/app.js'></script>
<script type='text/javascript'>
	(function($){
		apps.mainslider();
		apps.pagescroller();
	})(jQuery);
</script>

それからスクリプトタグも載せたい場合は以下の方法でできます。

apply_filters( 'script_loader_tag', $tag, $handle, $src )
$tag:キュースクリプトのタグ(文字列)。
$handle:スクリプトの登録ハンドル(文字列)
$src:スクリプトのソースURL(文字列)

キューに入れられたスクリプトをHTMLスクリプトタグでフィルタリングします。

<?php

function app_script() {
	wp_enqueue_script('app',  get_template_directory_uri().'/js/app.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'app_script');
function load_inline_script( $tag, $handle, $src ) {
	if ( $handle == 'app' ) {
		if(is_home()){
			rreturn $tag .
			'<script id="inline-script">
				(function($){
					apps.mainslider();
					apps.pagescroller();
				})(jQuery);
			</script>'."\n";
		}
	}
	return $tag;
}
add_filter( 'script_loader_tag', 'load_inline_script', 10, 3 );

とくにapp.jsとか読み込ませていない場合は必ず読み込まれているjquery-migrateの後に表示させる方法が簡単かもしれません。

<?php

function load_inline_script( $tag, $handle, $src ) {
	if ( $handle == 'jquery-migrate' ) {
		if(is_home()){
			return $tag .
			'<script id="inline-script">
				(function($){
					apps.mainslider();
					apps.pagescroller();
				})(jQuery);
			</script>'."\n";
		}
	}
	return $tag;
}
add_filter( 'script_loader_tag', 'load_inline_script', 10, 3 );

最近はフェイスブック、ツイッター、グーグルやヤフーのタグマネージャーなどはこのパターンで入れると良いかもしれませんね。

読み込んでいるスクリプトにidを付加することも可能です。以下は例です。

<?php
function add_id_to_script( $tag, $handle, $src ) {
	if ( 'app' === $handle ) {
		$tag = '<script type="text/javascript" src="' . esc_url( $src ) . '" id="appjs" data-app-key="MY_APP_KEY"></script>';
		}
		return $tag;
}
add_filter( 'script_loader_tag', 'add_id_to_script', 10, 3 );

いろいろと使えますね。

参考になれば幸いです。


∞Tadashi Suyama∞

wordpress inline javascript
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

wordpress inline javascript
フッターイメージ