★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる
この記事には「PR」「宣伝」が含まれます

子テーマにjavascriptファイルを追加してスクリプトを呼び出す方法

WordPressではテーマを使うことでサイトのデザインを変えたり、独自の機能を付け加えることができます。

ただしテーマのテンプレートやCSSをさらに改造して独自のスタイルや機能をつける場合、「子テーマ」という親となるテーマから派生したものが使われます。

この子テーマではテンプレートなどは親からコピーするだけで動せるものの、javascriptファイルは子テーマフォルダ内に置いただけでは実行できません

そこでここでは子テーマ内で独自のスクリプトを呼び出す方法についてまとめました。

子テーマとは

冒頭に書いたように子テーマとは親テーマから派生させて自分好みのスタイルやテンプレートを追加できるようにしたテーマのことです。

なぜわざわざ子テーマを使うかというと親テーマを直接編集すると次のようなデメリットがあるからです。

  • テーマのアップデートがあると上書きされる
  • テーマがアップデートされると今までの変更も全て消される

WordPressで配布されているテーマの場合、テーマのアップデートをWordPressを感知して自動的に更新されてしまい、今までのカスタマイズが全て消されてしまいます

それを防ぐために親テーマと分離させたいファイルを別のフォルダに移すために子テーマが使われます。

親テーマと子テーマはWordPressをインストールしたフォルダ内にある「themes」フォルダの中に次のような関係で作られます。

WordPressでの親テーマと子テーマのフォルダ上での関係図

この図のようにWordPressで子テーマを作るのに子テーマフォルダ内に最低限必要なのは「functions.php」と「style.css」の2つで、これだけあれば子テーマとして認識されます。

子テーマの作成にはFTPでサーバーに接続して手作業でフォルダやファイルを作る方法もありますが、「Child Theme Configurator」プラグインを使うと楽に作れます。このプラグインを使って子テーマを作成する方法については次の記事で解説してあります。

WordPress子テーマを面倒なことせず1分で作成する方法
WordPressで子テーマを作る場合、手動作成するのは慣れない人にとって無駄に手間と時間がかかる作業です。そこでここでは初心者でも簡単に子テーマが作れる Child Theme Configurator の使い方を紹介します。

子テーマでテンプレートをカスタマイズするにはただ単にテンプレートを書かれたPHPファイルをコピーするだけですが、javascriptなどのスクリプトファイルはただファイルを作成するだけでは子テーマ内では呼び出すことができません

そこでここでは子テーマ内でスクリプトを呼び出す手順を解説します。

子テーマでスクリプトを呼び出す手順

子テーマでjavascriptファイルを作成してスクリプトを実行する手順は次の通りです。

1.ファイルマネージャーのインストール

(注意) : ここではプラグインを使って子テーマフォルダのファイルを操作しますが、もしFTP操作に慣れているならFTPソフトを使ってください。

まず最初にWordPress内でファイル操作が行える「WP File Manager」というプラグインをインストールして有効化します。

参考記事 : FTP不要のファイル操作ができる File Manager の使い方

まずメニューから「プラグイン」ー>「新規追加」をオープン

そして新規追加画面の検索欄で「file manager」というキーワードを入力

しばらくすると検索結果に次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしてください。

File Managerプラグインをインストール

ちなみに手動インストールする場合は次ページからzipでのダウンロードも可

https://ja.wordpress.org/plugins/wp-file-manager/

インストールしたら「有効化」ボタンを押して有効化するのも忘れないでください。

2.子テーマにJavaScriptファイルを追加

次にファイルマネージャーを使ってスクリプトファイルを追加します。

手順ですがまずWordPressのメニューから「WP File Manager」を開きます。

WordPressのメニューから「WP File Manager」をオープン

開くと次のようなファイルマネージャーが開きます。

File Managerプラグインで開いたファイルエクスプローラー画面

そして左のファイルエクスプローラーから「wp-content」ー>「themes」フォルダを開き()、子テーマのフォルダを開いてください)。例えば「simplicity」というテーマの子テーマとして「simplicity-child」を作ったならその名前のフォルダを開きます。

File Managerプラグインでの子テーマフォルダの作り方を説明している画像

子テーマフォルダを開いたら上のツールボタンから新規追加ボタンを押し)、ファイル名に「javascript.js」などの名前をつけてスクリプトファイルを作成)してください。

子テーマにJavaScriptファイルを追加する手順画像

スクリプトファイルを編集するにはファイルを選択した状態で上のツールボタンから編集ボタンを押してください。

子テーマのJavaScriptファイルの編集手順を示した画像

するとファイルエディターが開くのでそこに実行したいスクリプトを入力してください。

3.スクリプトをfunctions.phpから呼び出し

javascriptファイルを作成しただけではスクリプトは実行されないので、functions.phpにスクリプトを呼び出す処理を追加します。

手順ですがまずファイルマネージャーの子テーマフォルダの中にある「functions.php」を開いて次のコードを追加してください。

function link_scripts(){
  wp_enqueue_script('jquery', dirname(__FILE__).'/javascript.js', array(), false, true);
}

add_action('wp_enqueue_script', 'link_scripts');

こうすることで適切なタイミングでスクリプトファイルがページの中でリンクされます。

ここでは「javascript.js」というスクリプトファイル名にしましたが、PHPコードで呼び出すファイル名を変えればどんな名前でも構いません。また親テーマにも「javascript.js」という名前のファイルがあっても子テーマのそれとは違うものだと認識されます。

以上が子テーマでスクリプトファイルを追加して読み込む手順です。

まとめ

このように子テーマではスクリプトファイルをただ作成するだけでは実行されず、functions.phpに読み込む処理を追加する必要があります。

スクリプトを作って独自機能を付け加えるときはこの手順を忘れないようにしましょう。

以上子テーマにjavascriptファイルを追加する方法についてでした。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。メールアドレス : fukuropress@gmail.com

コメント

  1. ひろ より:

    こんばんわ。プラグインのJSファイルのオーバーライドが上手く行かなくて調べていたところこちらのページを見つけたのですが書かれている内容は以下のような意味合いで合ってますでしょうか?

    子テーマのfunction.phpに以下を追加。
    function link_scripts(){
    wp_enqueue_script(‘jquery’, dirname(__FILE__).’/javascript.js’, array(), false, true);
    }

    add_action(‘wp_enqueue_script’, ‘link_scripts’);

    子テーマ直下にjavascript.jsを作り以下のようなコードを追加。
    setTimeout( function() {

    if ( $( “.tribe-amount:contains(‘.00’)” ) ) {

    $(‘.tribe-amount’).html( $(‘.tribe-amount’).html().substring(0,$(‘.tribe-amount’).html().length – 3) );

    };

    }, 10);

    $( document ).ready( function() {

    if ( $( “.tribe-amount:contains(‘.00’)” ) ) {

    $(‘.tribe-amount’).html( $(‘.tribe-amount’).html().substring(0,$(‘.tribe-amount’).html().length – 3) );

    };

    } );

    • フク郎 より:

      コメントありがとうございます。
      はい、その手順で問題ありません、

      ただしPHP編集については本当に慎重に行ってください。JavaScriptならまだしも、PHPでエラーが出たら大変です。特に古いWPバージョン(恐らく3.x未満)はエラーが出たらホワイトスクリーンなので・・・

      とはいえPHPコード的には恐らく問題ないですね。それからJavaScriptコードは環境によるので、一概に「全く問題ない」とは断言できません。