というわけで先日グランドオープンした WordCamp Yokohama 2010 公式サイト。このサイトを構築するにあたって使ったプラグインとテーマをご紹介します（をかもとさんと記事まるかぶりのため、ぼくが選んだプラグインを中心にしていますｗ）。

言わば、「WordCamp 公式サイトの作り方～これであなたも WordCamp 公式サイトディベロッパー～」。

それではいってみましょう。

Akistmet

まずは何をおいても Akismet 。イベント系サイトの CMS でコメントをオープンにすることは少ないかもしれません。でも、イベントをブログしてくれたらピンバックやトラックバックが飛んでくるから、ユーザの反応は見たいよね、と思うことありませんか？うんうん、あるよ、あるよ。

WordCamp Yokohama 2010 サイトでも、ピンバック/トラックバックをオープンにして、面倒なスパム対策は Akismet におまかせしています。

Akismet といえば、WordPress.com API キー。アクセス状況を見るのであれば WordPress.com Stats でも必要になりますので、イベント実行委員会でひとつ .com API キーを取得してしまうのをおすすめします。

Contact Form 7

問い合わせのフォームが必要だよね、ということになり、取り出したのはもちろん Contact Form 7 です。

柔軟に作りたいフォームを作れるということもおすすめの理由のひとつでもありますが、とりあえず時間がない中でぽーんと丸投げできる簡単さが採用の理由だったりします。

Google Maps Anywhere

イベントには会場までのアクセスマップが不可欠です。

今回サイト作成チームの頭の中には、Google Map 上に会場までの道順を描いて、地図ではわかりにくいところはクリックして写真で表示しよう、という明確なイメージがありました。

Google Maps Anywhere は、Google Map を記事に埋め込むのに適したプラグインです。主な使い方はプラグイン配布元を参照していただくとして、配布元に書かれていないのはマイマップの使い方。

Google Map でマイマップを作成したら、編集状態のままで、「Google Earth で表示」リンクをクリックします。kml ファイルを保存できるので、このファイルをサーバにアップロードします（/wp-content/uploads/ とかの中で大丈夫です）。

ページや投稿に google map を挿入する際に、KML という欄に、さきほどアップロードした kml ファイルまでのパスを記入します。/wp-content/uploads/hoge.kml とかですね。

実際の動作は、アクセス・会場案内ページを御覧下さい。

Random Text

登録したテキストをランダムで表示するウィジェットで、プラグインとして配布されている Random Text です。

サイドバーでスポンサー様やスピーカーの面々をご紹介するにあたって、アクセスする度にランダムで表示を変えたいと思ったこと、内容は管理画面から登録できるものが望ましい（ハードコーディングは NG）と思ったことからこちらを採用しました。

Random Text 専用のカテゴリーを設定し、同じカテゴリーに属するテキストをランダムで表示することができるようになっています。

Twitter Hash Tag Widget

Twitter Hash Tag Widget は、Twitter に投稿されたハッシュタグ(#hogehoge）のついたつぶやきをまとめて表示するためのウィジェットです。

公式サイトでは #wcYokohama を表示するように設定して、サイドバーに配置しています。Twitter の検索結果を用いるため、ハッシュタグの前にスペースがないと、この中には表示されません。

WP-Cycle

今回のサイトでは当初のデザイン案から、過去の WordCamp の写真を見てもらい、WordCamp の様子を知ってもらうための写真スペースがありました。

写真を選択して選べるように、という案や、紙芝居形式の案もあったのですが、工数がかかってしまうということで、jQuery のスライドショーで自動的に写真を変更する案に落ち着きました。

WP-Cycle は jQuery のライブラリを WordPress で簡単に使うことができる上、スライドショー部分の埋込みにも対応しているので採用しました。ランダム表示や1枚目だけ固定といったカスタマイズはをかもとさんの手によるものです。

WP FollowMe

WordCamp Yokohama 2010 実行委員会では早くから Twitter を告知に利用していましたので、この Twitter アカウントを告知するために、FollowMe バナーを表示したいと思いました。

FollowMe バナーを作る方法はジェンレータも含めていろいろありますが、WordPress であればプラグインがやっぱり簡単です。

WP FollowMe は WordPress の管理画面からアカウントやバナーの色を設定できるので採用しました。ただし、なぜか Flash を使用しているため、Flash 未対応デバイスでは表示しないよう、をかもとさんがカスタマイズしてくれました。

thematic テーマ

選別したプラグインをみていただくと、ウィジェットに配置するだけで表示できるものや、自動的に挿入できるものが多いことがお分かりいただけると思います。

WordCamp Kyoto 2009 でもプレゼンさせてもらった thematic テーマは、ヘッダの下、サイドバー、エントリの上下、フッターの上、と多くのウィジェットエリアを持っています。

ウィジェットエリアに格納するウィジェットを入れ替えるだけで柔軟に表示する要素を変えられるため、工数の削減には持って来いです（当社比）。

また、HTML 要素の追加は、テンプレートファイルの上書き、および functions.php への追記で対応をしています。

WordPress 3.0 のテーマ ”TwentyTen” にも多大な影響を与えたテーマ “thematic”、ぜひ触ってみていただければと思います。

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。

長らく同じテーマでほったからしていたこのサイトですが、このたびデザインリニューアルしました！ぱちぱちぱち。

全然かわってないじゃん！と一部で話題沸騰ですが、本当はもっとドットでポップになる予定でした。

けれど、ドット絵をかき上げるのを待っていると何時まで経っても出来上がらない気がしたので、大枠ができたところでリリースであります。すこしずつ成長していくサイトがコンセプトであります。

内部的にも WordPress の Sandbox テーマから、WordCamp Kyoto でもプレゼンした Thematic テーマへと変更。CSS 3 も大量に使ってみたので、IE 6 ウルトラ無視なサイトになっていますが、まぁ見えないことはないので大丈夫のはず！

これからの おでげーとにご期待ください(*'-')

追記：全然変わってねーじゃんと言われたので、以前のスクリーンショットを掲載。

変更点はロゴ、トップのイメージ（マップチップ・スプライトも描き直しました）、サイドバーをはじめとするウィンドウのデザイン変更などなど。

似てるけど、結構変わってるんですよ(笑)

© 2012 Odysseygate.com This Feed is for personal non-commercial use only. If you are not reading this material in your news aggregator, the site you are looking at is guilty of copyright infringement. Please contact odysseygate@gmail.com so we can take legal action immediately.

鼻からカフェモカ。