日本語WordPressサイト事例集『WordClip』を作ったよ #wacja2012

ども! teckingです! WordPressコミュニティでは「レオ社長」と呼ばれてます(というか呼ばせています)。カエルじゃありません。「社長」と呼ばれないと振り向かないので注意してくださいね 🙂

さて、rie05さんの『WordCamp Osaka 2012実行委員長から見た振り返りレポート前編』・GOUTENさんの『WordCamp Osaka 2012参加登録サイトの裏側見せます』からバトンを受け継いだ12日目の『WordPress Advent Calendar 2012』。

私からは、いつもWordPress関連のイベントに同行している秘書・テツ氏が今日リリースした『WordClip』というサイトを紹介したいと思います。ステマ?……いえいえここまであからさまにお知らせしちゃったらステマなんてレベルのもんじゃありませんよ。もんじゃおいしいね。

『WordClip』ってナーニ?

一言でいうと、日本語圏でつくられたWordPressサイトの構築事例集です。

WordPressを2006年から使いだし、さまざまな情報源に助けられながら実務でウェブサイトをつくってきたテツ氏。制作を通じて彼が感じていたのは、日本の企業(特に中小企業)や団体におけるWordPressサイトの導入事例をまとめた資料集でした。実務のうえでデザインや実装の参考にしようにも、そうした〈まとめサイト〉を見受けることがあまりなかったからです。

〈クールなデザイン〉や〈カッコいい実装〉をまとめたサイトは数多く存在します。しかしその大半は、海外サイトをまとめたものだったり、クールでカッコいいブログを集めたものです。資料集としては上質ですが〈企業サイト制作・運営のヒント〉というには「ん、んんー」というものも少なくありません。

そんなわけで、「NAVER まとめ」にて『WordPressでのサイト構築事例を淡々と並べるまとめ』を2012年4月につくりはじめたのですが

  • 情報量が多くなってくると並び替えなどの整理がたいへん
  • 定型の項目以外は盛り込むことができない(裏を返せば、定型の項目をまとめるにはよくできたUIだと思います)
  • データのエクスポートができない

といった諸問題や、なにより「WordPressに関する情報源はWordPressで作らなくてどうする?」という疑問がもたげたこともあり、独自サイト『WordClip』としてリスタートすることになったわけです。

どんなサイトが『WordClip』には載ってるの?

主に扱うのは、コーポレートサイト・イベントサイト・ECサイト・公共機関などのサイト。デザインよりも「どういう企業や団体が導入しているのか」を重視したまとめです(なので、デフォルトテーマそのまま、というサイトも載ったりします)。

構築事例は1事例・1ページで構成。サイトトップのスクリーンショットや紹介文のほか、使用テーマ名や使用プラグインについてもサイトごとにソースを開いてできる限り載せるようにしています。

構築事例はどうやって探してる?

テツ氏による〈一人人海戦術作戦〉なんですと。もっとも、あてずっぽうに探していてもラチがあかないので、こんなふうにして事例を集めているんだそうです。

Facebook・Twitterの活用

WordCampやWordBenchなど、WordPressコミュニティで知り合ったかたがたのウォールやツイートは毎日必ずチェック。実務でWordPressのサイト構築をなさっているような方だと、「こんなサイトつくりました公開しました」的な投稿をされることがあるので、すかさず「いいね!」したり、ふぁぼったりしてクリッピングしておきます。

Chrome SnifferでWordPressサイトをくんくんと嗅ぎとる

予期せぬところでWordPressサイトに遭遇してもおもらししないよう、普段づかいのブラウザ(Chrome)に『Chrome Sniffer』という拡張機能を入れています。

これは、あるサイトにどのようなアプリケーションやフレームワークが使われているかをアイコン表示してくれるという優れもの。アイコンにマウスオンすると、そのバージョンがツールチップ表示されるのもステキすぎて悶えそうとテツ氏は言ってました。

運よくWordPressサイトに遭遇したら、とりあえずクリッピングしておかないといけません。クリッピングには拡張機能『Taberareloo』を使い、「wordpress」「examples」というタグをつけて『はてブ』に取り込んでいます。

……「WordPressはちゃんとCamelCaseで書かないといかんデショ」って、ひーひーごめんなさいごめんなさい!

検索オプションをつけてググる。

画像ファイルをはじめとするメディアファイルのアップロード先が wp-content/uploads ディレクトリになることに着目して、この方法を考えたとのことです。

たとえば今日、foo.jpg という画像ファイルをWordPressの管理画面からアップロードすると、デフォルトでは wp-content/uploads/2012/12 ディレクトリ内に格納されます。そのファイルにリンクをかけた状態で記事に挿入すると当然、記事内には http://www.example.com/wordpress/wp-content/uploads/2012/12/foo.jpg というような文字列が埋め込まれます。

Google検索には、そうしたリンク先URLをフィルタリングできるオプションがあるんです。

Google検索の画面右上より[検索オプション]を選び、以下のように設定します。

すると、こんな感じの検索結果が現われます。

まさにWordPressサイトの地曳網漁。検索結果はあくまでもメディアファイルへのリンクなので、そこからドメイン部分のみ取り出してアクセスすればサイトトップへおいでませ。あとは、片っ端からクリッピングして『はてブ』に溜めていくだけです。

ということで、本日公開の日本語WordPressサイト構築事例集『WordClip』。WordPressラヴなみなさんの制作のヒントになれば幸いです。末永くよろしくーネッ!

実務に役立つ日本語WordPressサイト事例集『WordClip』

明日は13日目。kiichi katoさん・aimin10さんの登場です。どうぞお楽しみに。

「日本語WordPressサイト事例集『WordClip』を作ったよ #wacja2012」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください