Raindrops　取扱説明書

サポートバージョン 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アクションフックを使ってスクリプトやスタイルを追加していきます

add_action( 'wp_enqueue_scripts', 'extend_script_setup' );

function extend_script_setup() {
	global $wp_scripts;

//1.　jquery-ui-tooltip スクリプトをロードします　
	wp_enqueue_script( 'jquery-ui-tooltip' );

//2. 動作設定のスクリプト tooltip 位置　や　表示の方法を設定します
//<a class="tooltip" title="hello world">tooltip</a>の場合にツールチップを表示	

	$js= "jQuery(function() {
		jQuery( document ).tooltip({position: { my: 'left top+15', at: 'left bottom', collision: 'none' }});
		});";

//<a class="tooltip" data-title="title example" data-description="hello world">title以外の属性でツールチップ</a>
//title以外の属性でツールチップを表示する設定

	$js .= "jQuery(function() { 
	jQuery('.data-tooltip').tooltip({ items: '[data-title]', content: function() {
var title= jQuery(this).data('title');
var description= jQuery(this).data('description');
return '<h3>' + title + '</h3><p>' + description + '</p>';
 }
 });
});";
//3. 動作設定のインラインスクリプト を追加します。
	$wp_scripts->add_data( 'jquery-ui-tooltip', 'data', $js );

//4. スタイルの登録をフィルターで行います。
	add_filter( 'raindrops_embed_meta_css', 'raindrops_tooltip_style' );
}

//ツールチップのスタイル
function raindrops_tooltip_style( $css ) {
	$tooltip_style= ".ui-tooltip {
						background: #555;
						color: #ccc;
						border: none;
						opacity: 1;
						padding: 8px;
						position: absolute;
						z-index: 9999;
						max-width: 300px;
						-webkit-box-shadow: 0 0 5px #aaa;
						box-shadow: 0 0 5px #aaa;
						border-width: 2px;
					}
					.ui-tooltip-content {
						position: relative;
						text-align:left;
					}
					.ui-tooltip-content:before{
						content: \"\";
						position: absolute;
						top:-28px;
						left:5%;
						border: 10px solid transparent;
						border-bottom: 10px solid #555;
					}";
	return $css . $tooltip_style;
}

捕捉

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

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

add_filter( 'raindrops_embed_meta_css', 'raindrops_tooltip_style' );

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

 $ui= $wp_scripts->query( 'jquery-ui-core' );
	wp_enqueue_style(
	'jquery-ui-smoothness', "http://code.jquery.com/ui/{$ui->ver}/themes/smoothness/jquery-ui.css", array(), $ui->ver
	);

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