「東大阪なび」という地域密着のポータルサイトを制作しました。
2010年の夏ごろから、β版として公開し、2010年末に本オープンしていたのですが、紹介させていただきます。
後々、WordPressでポータルサイトの構築方法。
みたいな感じでブログも書きたいと思っていますが、とりあえず紹介しておきます。
「こんな機能がありますよ!こういう目的のサイトです!便利に使ってくださいね!」
という風なユーザー目線での紹介では、わずかながらでもこのブログを読んでくださっている、Web制作者の皆さんには面白くないと思うので制作者目線でこのポータルサイトを紹介したいと思います。
東大阪なびは今も毎日修正、改善しています。
なのでエラーや表示の悪さなどあるかと思いますが、優しく見てあげてください。w
東大阪なび概要
※ユーザー目線ではなく制作者としてのサイト概要。
- 街のイラストなどのデザインは、イラストレータで。その他主にフォトショップで制作しました。
- 基調とするカラーを青と白色に。あまり堅くなりずぎず優しく、少しかわいいイメージを与えるように考えました。
デザインの参考サイトは山ほどあるのでここでは割愛。 - CSS3は、使えなくても問題ないだろうという箇所で使用しました。
角丸やテキストシャドウを主に使いました。 - 店舗・施設のサムネイル画像はモバイル版でも使えるようなサイズで考えました。
- ホームページ(トップページ)の東大阪関連ブログは、Googleリーダーでまとめてから取得、表示。ホームページ(トップページ)JavaScriptで表示、CSSでデザイン。
ブログ一覧はRSSを取得して表示するというワードプレスの機能で。 - ホームページのTwitterはphpで取得、表示してCSSでデザインという感じ。
- 店舗・施設情報詳細ページのQRコードはGoogleのAPI 「Google Chart API」を使用。
- 店舗・施設情報詳細ページのソーシャルブックマークは、以前紹介した、
[JavaScript]ブログにTwitter、facebookいいね!、はてブボタン等をカンタンに設置できるプラグイン「jQuery.socialbutton」 を使用。
システム部分・更新箇所はブログツールWordPressで構築。
- お知らせ・ニュース部分はRSSを取得して表示するというワードプレスの機能で。
RSSのないサイトはWebサービスを使ってRSSを取得。 - ホームページ サイドバーのランキングは query_posts 条件分岐で取得、表示。そしてCSSでデザイン。
- タグを使わず、カスタムタクソノミーを使いました。
- サムネイル画像はアイキャッチ画像を使用。
- 店舗・施設情報の並び順を人気順に変更するのはプラグインでのデータをもとに query_posts で。
- 口コミはコメントを使用。
- 店舗詳細とは別に印刷ページと店舗・施設情報修正フォームを設置。
- 修正・編集フォームはプラグイン「Contact Form 7」で。送信元ページとタイトルの取得も Contact Form 7 のオプション機能としてついています。
- 絞込み検索や、各ページ上部のランダムバナー、詳細ページスターレーティング(星の評価)などもプラグインで。
把握しきれてませんが、だいたいこんな感じだと思います。
よく解からないなど何かありましたらコメントをお願いします。
ポータルサイトを、ワードプレスで構築だとやはり限界があるかと思います。
ですが、ワードプレスは実に様々なことを実現可能としてくれます。
ほんとにいろんなことができるので、ワードプレスのカスタムに興味はあるけど、まだしていないという方はぜひカスタムしてみてください!
著者/訳者:エ・ビスコム・テック・ラボ
出版社:毎日コミュニケーションズ( 2010-09-11 )
定価:¥ 2,940
Amazon価格:¥ 2,940
WordPressサイト構築スタイルブック―デザイナーのためのテンプレートタグリファレンス+サイトデザインテクニック
著者/訳者:エ・ビスコム・テック・ラボ
出版社:毎日コミュニケーションズ( 2006-11 )
定価:¥ 2,940
はじめまして
「東大阪なび」拝見しました♪すばらしいです
僕もワードプレスでポータルできるかなと色々調べていましたら「東大阪なび」に辿りつきました。
完成度の高さにびっくりですデザインも素敵ですね。
「東大阪なび」はテーマも独自カスタマイズなのですか?
ワードプレス初心者なので。。。使用してるテーマとかあったお聞きしたいと思います。
よろしくお願いします
はじめましてsakumaさん。
ありがとうございます!そう言っていただけるとうれしいです^^
テーマは「sandbox」をベースにカスタムしました。けれどsandboxの原型がほとんどないです。。
ワードプレスをさわりはじめたところで、新しくテーマを作るんでしたら、今なら「twentyten」をベースにカスタムするのがいいのではないでしょうか。
同様のサイトを作りたいのですが、なかなか敷居が高いです。
トホホ
私もそうでした。最初はまったく理解できなかったのですが、ワードプレスを触っているうちに、少しずつ、なんとなくわかってくるようになりました^^
続けているとできるはずです!お互いにがんばりましょー^^
はじめまして。「東大阪なび」拝見しました。
素敵なサイトですね。感動しました…
特に検索のフォームがすごく便利だと思いました。
最近ワードプレスを触り始め、カスタムサーチを導入してみたのすが、
「東大阪なび」のような設定をすることができません。
何か特別なコード?等を書かないといけないのでしょうか。
お仕事に差し障りのない範囲でアドバイスがいただけたら幸いです。
お問い合わせありがとうございます。
返信大変遅くなりまして申し訳ございません。
さてもう解決しているかもしれませんが、
早速質問に答えさせていただきます。
東大阪なびの絞り込み検索には
「WP Custom Fields Search」
というプラグインを使用しています。
基本的にはこのプラグインを有効後、表示したい箇所に
<?php if(function_exists(‘wp_custom_fields_search’))
wp_custom_fields_search(); ?>
と書いてあげれば表示されると思います。
解決済みでしたら申し訳ございません。
また何かあればお気軽にご質問ください。
はじめまして、hanabusaともうします。
wordpress初心者ですがwordpressを使ってポータルサイトを作成したいと調べていると貴サイトに辿り着きました。とても参考になるサイトで嬉しいです。少し質問ですが「東大阪なび」のTOPで使用している絞り込み検索はwordpressのプラグインを使用しているのでしょうか?
まだまだ未熟で至らないばかりですがご教授のほど宜しくお願い致します。
コメントありがとうございます。
絞り込み検索には、ワードプレスのプラグインを使用しております。
プラグイン名は「wp custom fields search」です。
駅前情報のページの下に表示されている「~駅付近の店舗・施設一覧」というのはどのようにして出しているのですか?
「Word Pressでポータルサイトを作りたいな」と検索してこちらにたどり着きました。
東大阪のポータルサイトは、これこれ!こういうのを作りたいのよ!
と思ったけれど、構築についての文章を読んだら私の技術では無理そうです(笑)
やっぱり、ポータルサイトはXoopsが一番なんでしょうかねぇ・・・
「Word Pressでポータルサイトを作りたいな」と検索してこちらにたどり着きました。
東大阪のポータルサイトは、これこれ!こういうのを作りたいのよ!
と思ったけれど、構築についての文章を読んだら私の技術では無理そうです(笑)
やっぱり、ポータルサイトはXoopsが一番なんでしょうかねぇ・・・
のり子さん。
コメントありがとうございます。
Xoopsは使ったことが無いのでなんとも言えませんが、どちらで構築するにしろ、多少は勉強しないといけないかもです。
ただ、ワードプレスは、ネット上に情報が沢山あるので、作りやすいと思いますよ。
凄いです!wordpressでここまで出来る事に感激しています。
こんなにわくわくするデザインの地域ポータルサイトなんて素敵です。
私は素人ですが、
同じ様にwordpressで地域サイトを作れたらな~と考えていたので、
頑張ってチャレンジしてみようと思います。
いつも拝見してます。
東大阪なびみたいなポータルサイトを作りたいと思っていますが、いくつか質問がありますがここで質問してもよろしいでしょうか?
よろしくお願いします。
はじめまして。
サイトを拝見させていただきました。
掲載がたくさんありますね。
ここまで来るまでにご苦労なされたことはどんなことですか?
ページを作ったからといっても、これだけの人が集まるページを作るのは難しいと思いますので、ご参考にさせていただきたいのです。
よろしくお願いいたします。
サイトを拝見させていただきました。
とても役に立ちました^^
はじめまして。
「wp custom fields search」でドロップダウンを連動させるには、どのようにすればいいのでしょうか?