WEBデザインの参考になるようなサイトを集めたサイトが最近たくさんありますよね。
僕もよくお世話になっています。
どのサイトも個性があったりで面白かったり。
などetc…
でも、それとは別に、自分のためのブックマークサイトを持ったほうがいいと思います。昔はよくあれもこれもはてなブックマークに入れていたのですが、探し出すのに一苦労だったわけです。だいたい、記事の内容ではてブしたサイトはキーワードで検索できるんですけど、ビジュアルが素敵なサイトとかは、全然探せないのです。
というわけで、自分で作ってしまおうと思ったわけです。とりあえず作ったものはこちら:http://bm.torounit.com/
というわけで、WordPressでブックマークサイト自作のチュートリアルです。
自作するメリット
- タグ・カテゴリなどが自分仕様にできる。
- Press This(ブックマークレット)が使えて便利！
- 自分の勉強になるかもしれない。
- コードが書けて楽しい。
- 自分も有名なWEBデザイナーになった気分。
まぁ、とりあえず、Press Thisが使えるってのは便利だと思います。見てるページをそのままクリックだけで登録できるのはなかなか便利です。
作り方
とりあえず、Press Thisをすると、
[html]
<a href="http://hoge.com">ほげほげ</a>
[/html]
のような形で、ページのURLとタイトルが本文中に挿入されます。
なので、それを正規表現で取り出して、カスタムフィールドに保存します。
[php]
function save_post_url($post_id){
$postData = get_post($post_id);
preg_match(‘/<a .*href=[\’"]+([^\’" ]+).*?>(.*)<\/a>/’,$postData->post_content,$match);
save_post_meta($post_id,"site_url",$match[1]);
save_post_meta($post_id,"site_title",$match[2]);
}
function save_post_meta($post_id,$data_key,$save_data){
if ( "" == get_post_meta( $post_id, $data_key)) {
add_post_meta( $post_id, $data_key, $save_data, true ) ;
} else if ( $save_data != get_post_meta( $post_id, $data_key )) {
update_post_meta( $post_id, $data_key, $save_data ) ;
} else if ( "" == $save_data ) {
delete_post_meta( $post_id,$data_key) ;
}
}
add_action("save_post","save_post_url");
[/php]
これで、カスタムフィールドのsite_url,site_titleにそれぞれ、URLとページのタイトルが保存されました。
次に出力部分です。サイトのスクリーンショットですが、WordPress.comのAPIでスクリーンショットがとれる奴があるので、有り難く使わせて頂きます。
[php]
$url = post_custom("site_url");
if( $url ){
echo "<img src=’http://s.wordpress.com/mshots/v1/".urlencode(clean_url($url))."?w=300&h=250′ alt=” />";
}
[/php]
で、サイトのスクリーンショットが取得できます。これをループ内で実行すれば良い訳です。
これで、デザインとかHTMLをちゃんと書いてあげれば、完成です。
デフォルトテーマに書き込んでも良いと思います。でも、『俺も有名なあの人達みたいに・・・』的な気分を味わいたいならちゃんとテーマを作った方がいいです。
あと、検索フォームを設置するなら、タグやカテゴリーで検索できると使い勝手が良いので、Search Everything
を導入しておくと良いと思います。
これでみんなもあの人達みたいに・・・！って訳にはそう簡単にいかないわけですが、少なくとも自分の気になるサイトをアーカイブしていけるので、自分の情報の整理くらいには活用してもらえるのではないでしょうか？
もし作ってみた人いたら、絡んでくれると嬉しいです。
Favorite
Retweet
Reply