javascriptによるテーマのカスタマイズ

サポートバージョン Raindrops 1.349以降 Raindropsテーマは、フロントエンドでは raindrops.js, raindrops-helper.js の2種類のファイルが使用されています。

raindrops.js
このファイルは、スクリプトを列挙しただけの単純なjsファイルです
raindrops-helper.js
このファイルは、PHPの設定に応じたjavascriptを動的に書き出すものです。

これらのファイルは、親テーマの複製をチャイルドテーマに同名で配置していただくだけで、チャイルドテーマのファイルを読み込むようになりますので、簡単なものであれば、raindrops.jsにスクリプトを追加する事で、処理できるのではないかと思います。

このページでは、「jQuery tooltip」という、WordPress本体に付属するプラグインを動作させる手順を示しながらjavascript動作させる手順について説明していきたいと思います。

何かしらのスクリプトを動作させる場合、以下の3つはセットで必要になってくると思います。

  1. スクリプト本体
  2. 動作設定のインラインスクリプト
  3. 表示する場合のスタイル設定

それでは、スクリプトの追加の手順を見ていきたいと思います

wp_enqueue_scriptsアクションフックを使ってスクリプトやスタイルを追加していきます

捕捉

1.付属スクリプトでない場合は、wp_register_scriptを使ってスクリプトを登録する必要があります

2.今回は、スタイルの量も少量なので、テーマのフィルターを使って処理していますが

外部ファイルを読み込むようにしたい場合など、以下のように呼び出す事もできます。

3.Raindropsテーマ以外で、インラインスタイルの追加を行う場合には、 wp_add_inline_style( $handle, $data )を使う事でスタイルの挿入が可能です。


コメントは受け付けていません。