1.8.2 Released!

カスタマイズでJavaScriptを利用する方法

SANGOのカスタマイズをする中で「Javascriptを使いたい」ということもあるかと思います。今回はそんなときの対応法を解説します。なお、以下で紹介する方法は子テーマを利用している場合用のものです。

WordPressの子テーマとは?安全にカスタマイズを行う方法

手順1:子テーマにJSファイルを作成

子テーマのディレクトリの中にscripts.jsという名前のファイルを作成します。この中にJavascriptを書いていくことになります。なお、ファイルを作成するためにはFTPソフトを使用する必要があるのでご注意ください。

【FileZillaの使い方】WordPressでFTPソフトを使おう
【FileZillaの使い方】WordPressでFTPソフトを使おう

scripts.jsを作成

FileZillaを使っている場合には、右クリック⇒[新しいファイルを作成]で作成できます。

手順2:functions.phpに読み込むためのコードを書く

次に子テーマのfunctions.php内を開きます。ファイルの冒頭に以下のようなコードが書かれているかと思います。

functions.php
//子テーマのCSSの読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'child-style', 
  	get_stylesheet_directory_uri() . '/style.css', 
  	array('sng-stylesheet','sng-option')
	);
}

この中の}の手前に以下のコードを挿入します();の後ですね)。

コピペするもの
//jsの読み込み
wp_enqueue_script( 'sng-js', 
    get_stylesheet_directory_uri() . '/scripts.js', 
    array(), '', true );

挿入後は以下のようになりますね。

functions.php
//子テーマのCSSの読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'child-style', 
  	get_stylesheet_directory_uri() . '/style.css', 
  	array('sng-stylesheet','sng-option')
	);

  //jsの読み込み
  wp_enqueue_script( 'sng-js', 
        get_stylesheet_directory_uri() . '/scripts.js', 
        array(), '', true );
}

これでフッターでscripts.jsが読み込まれるようになります。ちなみにjQueryは初期設定からヘッダーで読み込み済みです。

4 COMMENTS

kodama 2019/03/02

クリッカブルマップを作成中でして、jquery.rwdImageMaps.min.js(jQuery RWD Image Mapsというライブラリの中のファイル)を子テーマ内に作成したjsフォルダに格納し(script.jsと同じフォルダ内)、表示させたい記事にクリッカブルマップのコード(HTML Imagemap Generatorで生成)を記述し、その下にネットで拾った以下コードを記述しているのですがうまく動きません(レスポンシブに対応せず、画像とクリック位置がずれる)。

$(document).ready(function(e) {
$(‘img[usemap]’).rwdImageMaps();
});

原因として、jQueryの読み込みがうまく言っていないのかなと思うのですが、そもそもwordpressやテーマの構造の中でのjQuery自体の位置付けや概念がぼんやりしており、、、

「ちなみにjQueryは初期設定からヘッダーで読み込み済みです。」

とありますが、この点がいまいちわかっていません。パスはheader.phpを指定するべきなのでしょうか?(の1行目)
とてもトンチンカンな質問っぽいですが、わからないことが分からない状態に陥っております。お手数ですが教えて頂ければ幸いです。

回答を見る
マリオ 2018/10/23

こんにちは。こちらから質問させていただきたいと思います。
どうぞよろしくお願いいたします。
paginate_links に関する記述があるのは、どのファイルになりますか、
教えていただくことは可能でしょうか?

お忙しい中大変申し訳ありません。どうぞよろしくお願いいたします。

回答を見る

コメントを残す

メールアドレスは公開されません。* は必須項目です。コメント投稿のガイドライン