[Google Calendar Events] イベントの内容に応じて数字の色を変えてみた

Googleカレンダーが出力するフィードを引っぱってきて、WordPressのサイト内に表示させることのできるプラグイン『Google Calendar Events』。GoogleカレンダーのスマートなUIでイベント管理しつつ、サイトのデザインに合わせたカスタマイズができるなかなか有用なプラグインです。

先日、このプラグインを使ったサイト構築の案件で「カレンダーの内容（＝イベントのタイトル）に応じてカレンダーの色を変えたい」というリクエストがあったので、jQueryを使って解決してみました。いつもどおり「ご利用は計画的に」の技術情報ですが、どなたかのお役に立てれば。

なお今回は、カレンダーをグリッド表示させている場合のカスタマイズ例なので予めお含み置きを。

↑こんな感じにカレンダーを表示させた場合ですね

仕込みの前に

Eternal-tearsさんが『Google Calendar Events』の日本語化ファイルを制作されているので、もろもろの仕込みを始める前に設定しておくのがおすすめです。

jQueryの設定ファイル（config.js）の作成

テーマディレクトリ内に js ディレクトリを作り js/config.js という構造でテキストファイルを一つ作ります。例えば、イベントに「hoge」という文字列が含まれているときにカレンダーの文字を赤くしたい場合、config.js の記述は以下のようになります。

jQuery(document).ready(function($) {
    // イベントに hoge が含まれているときカレンダーの数字を赤くする関数
    function myAddColor() {
        $('.gce-day-number').each(function() {
            var str = $(this).nextAll().text();
            if(str.indexOf('hoge') != -1) {
                $(this).css('color', 'red');
            }
        });
    }
    myAddColor();
 
    // Ajaxでカレンダーが遷移したときも関数を有効にする
    $(document.body).ajaxStop(function() {
        myAddColor();
    });
}

wp-includes/js/jquery に含まれるjQueryと config.js の読み込み

ともかく破綻のないよう読み込めばいいのですが、私自身はもっぱらテーマフォルダ内の functions.php にこんな感じで書いて組み込んでます。

<?php
if ( !is_admin() ) {
    function my_register_script() {
        wp_register_script( 'config', get_stylesheet_directory_uri() . '/js/config.js' );
    }
    function my_add_script() {
        my_register_script();
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'config' );
    }
    add_action( 'wp_print_scripts', 'my_add_script' );
}
?>

以上です。「こうするとスクリプトがよりすっきりするよ」というアドバイスがありましたら、ぜひお寄せくださいませ。

［2012.9.1加筆］
JavaScriptの読み込みはこんなに回りくどくしなくてもいいですね。

<?php
if ( !is_admin() ) {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'config', get_stylesheet_directory_uri() . '/js/config.js', array('jquery') );
}
?>