lesson-scheduler

プラグインを作ろう! ~実装編~

2013.07.30(火) WordPress, プラグイン
このエントリーをはてなブックマークに追加

このたび、めでたくWordPress用出欠管理プラグイン「LessonScheduler」をリリースしました!どんなものかというのは、こちらのページを参照してください。公式ページにも登録されていますので、ダウンロードはそちらからお願いします。

さて、前回は準備編ということで、準備ができたみなさん、いよいよ中身についての実装です。ただ、中身についてといっても、プラグインの中身は様々ですので、プラグインを作る際に、気を付けたほうがよい所をいくつか書いていきます。
そのひとつ目が、javascriptとCSSの使い方です。



STEP1 Javascript,CSSは直接呼び出さない

WordPressの中にも標準で利用されているjQueryや、prototype.jsなど、便利なJavaScriptライブラリを使いたい人は多いと思います、というか、最近のウェブデザイン上、使わざるを得ないかと思いますし、CCSもまたしかりです。ただ、プラグインの中で、直接以下のような感じで呼び出すことはできません。

<?php
function myfunction{

?>
<script type="text/javascript">
$(function(){
    $("#lesson_schedule").tablesorter({widgets: ['zebra'] }); 

});
</script>

<link rel="stylesheet" type="text/css" href="<?php echo home_url('/'); echo "wp-content/plugins/lesson-scheduler/css/lesson-scheduler.css";?>" />

}



上記のように、プラグイン内で直接CCSや、javascriptを呼び出すと、一見動作する場合もあります(僕の場合もそうでした)。ただ、プラグインを有効化する際に、以下のような、「プラグインを有効化する際に、n文字分の予期しない出力が発生しました。~」というエラーがでます。

有効化エラー

有効化エラー



これはどういうエラーかというと、javascriptやCSSというのは、通常headタグ内で宣言されるものなので(場合によってはフッター)、プラグイン内で直接呼び出すと、予期しないところでjavascriptやCSSが宣言されたことになってしまい、有効化時にエラーになります。


STEP2 wp_regist_script,wp_enqueue_scriptにより、javascriptを呼び出す

ボクの場合、実際の処理はそれでもうまくいってましたが、さすがに有効化してこんなエラーがでるのは使う人にとって良くないというか、すげーカッコ悪いので直しました。
直し方としては、これまたアクションフックで対応します。

function add_script() {
    wp_register_script( 'jquery_1_8_3_js', 'http://code.jquery.com/jquery-1.8.3.js', false );
    wp_register_script( 'jquery_core_js', 'http://code.jquery.com/ui/1.10.3/jquery-ui.js', false );
    wp_register_script( 'tablesorter_js', plugins_url('js/jquery.tablesorter.min.js', __FILE__), false );
    wp_register_script( 'lesson_scheduler_js', plugins_url('js/lesson_scheduler.js', __FILE__), false );
    wp_enqueue_script('jquery_1_8_3_js');
    wp_enqueue_script('jquery_core_js');
    wp_enqueue_script('tablesorter_js');
    wp_enqueue_script('lesson_scheduler_js');
}
add_action('wp_print_scripts','add_script');

wp_print_scriptsとは、headタグ内にあるscriptを出力する直前に呼び出されるらしいので、add_script関数内でjavascriptの呼び出し処理を実行します。
その際に使う関数は、wp_register_scriptと、wp_enqueue_scriptです。前者は、呼び出し対象のscriptファイルパスを登録し、後者で呼び出します。


wp_register_script

引数 説明
jquery_1_8_3_js 登録用キーワード。多分、任意の文字列
http:// ~ 登録用javascriptパス
false headに書く(trueの場合はフッター)



wp_enqueue_script

引数 説明
jquery_1_8_3_js wp_register_scriptで登録したキーワード


STEP3 wp_regist_style,wp_enqueue_styleにより、CSSを呼び出す

CSSの場合は、アクションフック名が、wp_print_style、関数名がwp_register_style、wp_enqueue_styleとなるだけで、呼び出し方法はほぼ同じです。

function add_styles() {
    wp_register_style( 'lesson_scheduler_css', plugins_url('css/lesson_scheduler.css', __FILE__) );
    wp_enqueue_style('lesson_scheduler_css');
}
add_action('wp_print_styles','add_styles');



wp_register_style

引数 説明
lesson_scheduler_css 登録用キーワード。多分、任意の文字列
plugins_url(‘~’) 登録用CSSパス



wp_enqueue_style

引数 説明
lesson_scheduler_css wp_register_scriptで登録したキーワード


STEP4 管理画面用(設定画面など)のCSSを呼び出す

CSSについては、上記で設定できるのは、表示用のページのみで、管理画面には適応されません。そのため、設定画面で使いたいCSSがあった場合(ボクの場合は、日付入力用にjQueryのdatepickerを使ったのですが、そこのCSSに使いました)は、さらにadmin_headというフックで呼び出します。

// 管理メニュー初期設定にフック
function myplugin_admin_menu() {
	echo '<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />'."\n";
}
add_action('admin_head', 'myplugin_admin_menu');

これでjavascriptとCSSファイルを呼び出すことができ、有効化の際にエラーでなくなりますので、お悩みの方はお試しください。
また、上記のwp_register_script,wp_register_styleは、もう少し細かい引数も用意されています。こちらのページの説明がわかりやすかったので、紹介しておきます。

  • wp_register_scriptとwp_register_styleの使い方
  • さて、次回はプラグインの多言語化について書く予定ですので~。

    コメントをどうぞ