Ver1.3.1をリリースしました(11/22)

カスタマイズで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

こちらの記事を試してみたのですが、出来なかったので質問をお願いします。

バリューコマースのLinkSwitch下記コードを~に貼り付けると使えるとのことだったので、header.php(子テーマ)の~内に貼り付けてみたのですが、うまく動きませんでした。
また、この記事にあるやり方もやってみたのですが、出来なかったのでお忙しいと思いますが、どのようにすればいいのか教えて頂きたくてコメントしました。

var vc_pid = “××××××”;

お忙しいと思いますが、宜しくお願いします。

返信する
サルワカくん

申し訳ありませんが、VCさんと提携しているわけでもなく
『LinkSwitch』という機能を使ったこともないので、
ご回答をするのが困難です。
1つ言えるのは、動かない原因は、SANGOの仕様によるものではありません。

子テーマのheader.phpのhead内にスクリプトが正しく貼られていて、
そのheader.phpがたしかに読み込まれているかどうかを確かめてみてください。

それでも動かない場合には、VCさんにお問い合わせ頂くのが良いかと思います。

返信する

お忙しいところご回答頂きありがとうございました。
VCに問い合わせしてみます。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です