1.8.6 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は初期設定からヘッダーで読み込み済みです。

10 COMMENTS

さんの 2019/09/22

いつもお世話になっております。また、素晴らしいテーマのおかげで快適に運営させていただいています。

今回ですが、トップページ、個別記事ページ、記事一覧ページのソースコードにおけるJavaScriptとCSSを外部ファイル化したいのですが、いくつか疑問点があります(というか自分で出来る自信がない・・・汗)。まず、私が調べた限りでは、以下のような流れになると推測しています

1.header.phpにおけるheadタグ内の を設定している、「/wp-includes/default-filters.php」を開く
2.上記における add_action( ‘wp_head’, ‘wp_enqueue_scripts’, 1 ); を削除して、「何かしらのコードを追加する・・・1」⇦削除するのは外部ファイル化した.jsとの二重を防ぐため。
3.ソースコードにおける各スクリプトタグをコピーして、それぞれ名前をつけて.jsで外部ファイル化「ただ、どのディレクトリに保存すべきなのか分からない・・・2」「ソースコードのスクリプトタグをコピペして良いのか・・・3」File Managerというプラグインで.jsをアップロードしようと思います。

大まかには、このような流れで出来そうだ・・・と推測していますが、PHP未経験者である私にミスなく出来るのかという点も不安です。(専門家におねがいした方が良いのでしょうか・・・)

疑問点は上記の
・何かしらのコードを追加する・・・1
・どのディレクトリに保存すべきなのか分からない・・・2(wp-include…?)
・ソースコードのスクリプトタグをコピペして良いのか・・・3(wp_head();の出力元のいJSやCSSがどこかにあるのでしょうか?)

稚拙な質問で申し訳ありませんが、ご回答いただけたら幸いです。よろしくお願いいたします。

回答を見る
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 に関する記述があるのは、どのファイルになりますか、
教えていただくことは可能でしょうか?

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

回答を見る

コメントを残す

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