「Colorbox」の備忘録を書くのによく見かけるコード表記用「syntaxhighlighter」を導入したのでメモ。 WordPress用プラグインとしても提供されているようだが備忘録用カテゴリーのみ読み込ませるようにプラグインは使用しない。

意外とこのプラグインは読み込ませるスクリプトが多いので条件分けして備忘録カテゴリー且つフロント以外に読み込ませる。基本自分は’html’、’css’、’js’、’php’程度しか使わないのでそれ用だけfunction.phpに以下を定義。

function register_script(){
		wp_register_script('shCore', get_settings('site_url').'/wp-content/plugins/syntaxhighlighter/scripts/shCore.js');
		wp_register_script('shBrushBash', get_settings('site_url').'/wp-content/plugins/syntaxhighlighter/scripts/shBrushBash.js');
		wp_register_script('shBrushCss', get_settings('site_url').'/wp-content/plugins/syntaxhighlighter/scripts/shBrushCss.js');
		wp_register_script('shBrushXml', get_settings('site_url').'/wp-content/plugins/syntaxhighlighter/scripts/shBrushXml.js');
		wp_register_script('shBrushJScript', get_settings('site_url').'/wp-content/plugins/syntaxhighlighter/scripts/shBrushJScript.js');
		wp_register_script('shBrushPhp', get_settings('site_url').'/wp-content/plugins/syntaxhighlighter/scripts/shBrushPhp.js');
	}

登録した’js’を呼び出し。in_category()は’備忘録’カテゴリー内なら呼び出し。フロントページは抜粋呼び出しで無駄になるから’!is_front_page()’で省く。

function add_script(){
		register_script();
		wp_enqueue_script('jquery');
	if ( in_category('備忘録') && !is_front_page() ) {
		wp_enqueue_script('shCore');
		wp_enqueue_script('shBrushBash');
		wp_enqueue_script('shBrushCss');
		wp_enqueue_script('shBrushXml');
		wp_enqueue_script('shBrushJScript');
		wp_enqueue_script('shBrushPhp');
	}
}
add_action('wp_print_scripts', 'add_script'); 

css登録&呼び出し。

function add_stylesheet() {
	wp_register_style('shCoreDefault', get_settings('site_url').'/wp-content/plugins/syntaxhighlighter/styles/shCoreDefault.css');
	wp_register_style('shThemeDefault', get_settings('site_url').'/wp-content/plugins/syntaxhighlighter/styles/shThemeDefault.css');
	if ( in_category('備忘録') && !is_front_page() ) {
		wp_enqueue_style( 'shCoreDefault');
		wp_enqueue_style( 'shThemeDefault');
  }
}
add_action('wp_print_styles', 'add_stylesheet');

‘syntaxhighlighter’試し書きもかねてメモ。

ウチのブログはTOPに2カテゴリー並列に出るようにしてるがそのせいなのか「jQuery ColorBox」プラグインが正常に動かなくなってしまった。 しょうが無いので本家を導入したのでメモ。

1.WordPressで自動読み込みされるjQueryは「jQuery.noConflict();」が記述されていてそのままでは動かないので以下コードで変換する。

<script type="text/javascript">
    jQuery(function($){
        // jQueryコード記述：$＝jQueryに置換される
    });
</script>

2.Colorboxはデフォルトだと’example1～5’を’rel’要素に記述することでエフェクトを変更出来る。だが記事を書いたり何か変更を加えるたびにrelを記述するのでは手間がかかるのでリンク先が’.jpg’、’.gif’、’.png’の場合に自動的に’rel=example1’を挿入するコードを書き加える。

<script type="text/javascript">
    jQuery(function($){
        $('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"]').attr({rel:"example1"});// rel要素に'example1'追加
		//以下Colorbox用のjQueryコード
    });
</script>

これでリンク先が画像の場合自動的に’rel=example1’が挿入されグループ化される。
超忘れそうだからメモ。