BootstrapっていうCSSフレームワークが最近話題になってますね。Twitter謹製のフレームワークだそうで。確かにTwitterっぽいデザインをやりたいときはこれ、かなり便利だと思います。Webアプリとかにはいいですね。

ただ、いきなりHTML書いたりCSS書いてってやるのも僕はしんどいので、Bootstrapのパーツなどが入ってるPSDとかAIとかFireworksPNGとか探してみました。

Bootstrap PSD v1.0

http://gui.repixdesign.com/#freebies

Twitter Bootstrap Illustrator file

http://checkthis.com/6i6g/

Twitter Bootstrap 1.4 Assets

http://fireworkswireframingkit.com/2012/02/02/twitter-bootstrap-1-4-assets/

やっぱりこういうのがあると楽ですよねー。

かちびと.netさんのTwitter Bootstrapのデザインを簡単に変更出来るWebサービス・StyleBootstrapも、Bootstrapを使うときに役に立ちそうなので、上手いこと活用して行きたいもんです。

http://www.torounit.com/blog/2012/02/20/1271/Bootstrapでデザインするときに使えるPSDファイルとかaiとかpngとかToro_Unit

普段は画像置換+CSS Spriteでロールオーバーをやっつけています。リクエストが少ないし、CSSだけなので、高速です。

でも、画像の差し替えなどは若干手間なのでメンテナンス性などを考えたときはJavascriptで実装した方が良い場合もあったり。
ただ、javascriptで普通にsrcを書き換えると、そこから画像のダウンロードが始まるので、マウスオーバーとのタイムラグが発生したりで、どうも頂けない。

そんなわけで、jQueryでプリロード付のロールオーバーを実装するスクリプトを書いてみました。

jQuery(function(){
	var supfix = "_on";
	$("img.rollover").hover(
		function(){
			$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1"+supfix+"$2"));
		},
		function(){
			$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
		}
	).each(
		function(){//preload
			$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1"+supfix+"$2"));
	});
});

<img src="img.gif" alt="" class="rollover" />

jQueryの$()とかjQuery()ってセレクタを入れてjQueryオブジェクトを取得するだけのものと思いがちですが、中身にHTML文字列をぶち込んであげることで、非表示のjQueryオブジェクトを作成できるんですよね。

jQuery(html, [ownerDocument]) – jQuery 日本語リファレンス

良く$.ajaxで取得したHTMLから要素をDOMエレメントを作成してappendするような使い方をします。

これを活用して、画像のプリロードを実現している訳です。
まぁ、それでも、読み込まれて実行されるまでは使えないので、そこら辺はCSSの方が強いですね。また、Jsの実行速度や、読み込むスクリプトの量にも左右されると思うので何でもかんでもjsでって訳にはいかないですね。そこら辺は使い分けましょう。

http://www.torounit.com/blog/2012/02/17/1265/プリロード付のロールオーバーを実装するjQueryToro_Unit

Twitterのタイムラインを見てたらこんな記事が流れてきました。

@bubbleblow_c3
Moriyen@焼きおにぎり「WP OS FLV」というプラグインで、Trojan.JS.Redirector.ueというのをねじ込まれそうになる・・・ 名前からしてガンブラー系のアレかと予想汗 23 hours ago via Silver Bird ·  Reply ·  Retweet ·  Favorite · powered by @socialditto

いやいや、そのプラグイン昔使ったことあるけど！！！！いやはやなんとまぁ・・・・

WordPressのプラグインやテーマに不正なコードが挿入されたなんて話がここ最近増えてきましたね。

有名処のプラグインにも不正なコードが入っていたってことで、去年ニュースになった気がします。
WordPressのプラグインに悪質なコードが混入 – ITmedia ニュース

かといって基本的に利用は自己責任なので、何とか考えなくてはいけない問題です。
プラグイン無しでWordPress案件をこなすのはなかなかしんどいものがありますし。少なくともContact Form 7 、Head Cleaner、Admin Menu Editorとかが使えないとホントどーしましょうって感じです。こんなの自分で作れる気がしないですし。

あんまり気軽にプラグインプラグイン・・・ってのも考え物ですね。
案件によっては、VaultPress等の導入も検討が必要だと思います。

サイト改ざんが身近になっている今、改めて考えないといけないことですね。。。。

http://www.torounit.com/blog/2012/02/15/1258/自分の身は自分で守る！WordPressプラグインを使うときに注意していることToro_Unit

静的サイトの構築などで地味ですが有ると便利な関数です。

<a <?php print_href('/permalink/');?>>

とすると、/permalink/にアクセスしているときに

<a href="/permalink/" class="current">

となります。地味ですが・・・・・

<?php
$url = $_SERVER["REQUEST_URI"];
$url = str_replace('/index.php', '', $url);

function print_href($href){
	global $url;
	echo 'href="'.$href.'"';

	//home用の処理
	if($href == "/"){
		if($url == $href or !$url ){
			echo ' class="current"';
		}
		return;
	}

	if(strstr($url.'/',$href)){
		echo ' class="current"';
	}
}
?>

http://www.torounit.com/blog/2012/02/13/1246/リンクに activeとかcurrentとかを簡単につける関数Toro_Unit

WordPressを使ったWebサービスを作るとき、ログアウト後のリダイレクト先を変えたいって事がありました。特にユーザー機能は使うのに管理画面は見せたくない！っていうわがままな仕様の場合。

そんなわけで。

function redirect_fix(){
	wp_safe_redirect("http://example.com");
	exit();
}
add_action('wp_logout','redirect_fix');

これだけ！

http://www.torounit.com/blog/2012/02/13/1248/WordPressでログアウト後のリダイレクトの変更Toro_Unit