ワードプレスで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

Similar Posts

最近の投稿

アイキャッチ
バックドア型ウィルスにかかった時のワードプレスセキュリティ対策

今回はセキュリティについてご紹介したいと思います。ワードプレスでのセキュリティ対策って何をすれば良いの?という方も多いかと思います。相談が多かったので記事にしました。 ほんとうは怖いワードプレ...

14 Sep 2017

アイキャッチ
ワードプレスでJSのインラインスクリプト設置方法

今回はワードプレスにインラインスクリプトを入れる場合の対処方法です。 jQueryなどでオプション指定したりタグなどを入れ込んだりするときに有効です。 結構簡単です。割と最近なんですがそれ用...

02 Sep 2017

アイキャッチ
ブートストラップv3からv4の変更点をご紹介

ようやくv4のβ版が登場しました。あれから2年です。。。長いですね。 あとはβ版が何個か出たら正式リリースするようなのでもう少しで正式版はリリースしそうです。 多少変わるところはあるかもしれ...

27 Aug 2017

アイキャッチ
電話番号の正規表現をJavaScriptを使ってチェック

さて今回はフォームの中での電話番号正規表現についてご紹介します。 電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回...

19 Aug 2017

アイキャッチ
画面共有中だけ通知を一時的にオフ機能のMac用アプリMuzzle

本日はアプリのご紹介、画面を共有しているときやビデオ通話などをしているときに通知を一時的にオフにするアプリのご紹介です。 プレゼンの発表中などスクリーン共有やビデオ通話などの際に役立ちます。S...

13 Aug 2017

著者

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

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

タグクラウド

wordpress inline javascript
フッターイメージ