国内主要ECまとめサイトを作りました|WPのGridsbyでPinterest(タイル)風にするコツ

Pocket

最近はPHPでガツガツWebサービスを作ることが多かったのですが、メンテナンスや記事更新の必要があまり必要ないサイトでも作りたいなと思い、単純ですがギャラリーサイトを作りました。

今回でWordpress使ってサイトを作るのが4回目になって関数なんかをカスタマイズしつつ進めたので、そういった部分もご紹介します。

作ったもの:garellyEC

garellyEC

このサイトです。
一般的にはギャラリーサイトというのでしょうか?デザイン性の高いサイトをズラーっと並べて、デザイナーさんとかに参考にしてもらうたぐいのサイトです。
いくつかギャラリーサイトを探したのですが、EC(Eコマース)サイトに特化したものが無かったので、最初はニッチ戦略で行きたいということもあり、ECサイトのみを紹介するサイトとしました。

ちなみに、新しいサービスや製品を展開するときにはこのニッチ戦略というのはかなり重要なようで、業界の中で細かく分類すると1位だ!みたいなものをまず取りに行くのがとても大切らしいです。(この前ニッチ戦略の本で読みました)
世の中の事例でいうと、男性の眉毛カットの専門店とか、お風呂専用のメガネとか、特定のタイミングで特定のターゲットにのみ訴求するようなメリットを打ち出しているサービスがこれにあたります。
ただ、WebサイトやWebサービスを考えるときは最終的なパイ・需要をなるべく大きく捉える必要もあるため、個人的には最終的には多くの人に見られるサイトを目指して作りたい、と思って企画しました。

そういった意味ですと、今回の大方針としては
・ECサイトの紹介数では現存するサイトで1番になる。
という点でニッチ戦略を実現し、
・ターゲットはWebデザイナーさんなどの業界の方だけでなく、普通に買い物をしている方
まで広げ、将来的には
・ECサイトに限らないギャラリーサイトにしよう
と思っています。なので、今回はWordpressのカテゴリにてECサイトやコーポレートサイトなどの分類分けをするよう設計しました。

作った期間と各工程

今回はこんなの作ろう!と思ってから、1週間くらいでサイトを立ち上げました。
1週間と言っても平日は夜の少しの時間と土日くらいなもので、工数で言うと2人日くらいでしょうか。

各工程と期間は下記のような感じです。

■企画:2時間
どんなサイトにするか、投稿の方針とかどうするか決める。
競合になりそうなサイトを研究しながら、テキストエディタに思いついたことを書いていきます。
    
■検証:2時間
どのテーマが良いか、技術的にどこまでWordpressでできてどのくらいPHPを書くのか把握する。
今回はコンテンツ作成の手間を省力化したかったため、サイトに訪れた人がコンタクトフォーム経由で掲載依頼をできるようにしました。
さらに、掲載依頼をPostで受け取り、そのままmysqlに格納して記事にしたいと思っていたので、どのような方法があるのかを調べました。

■環境構築:1時間
今回くらいの規模ですと、検証環境はつくらず、普段使っているxserver上に本番環境を作ることから始めました。
昔はXAMP使ってローカルに環境作って、テーマファイルをサーバーにアップしてデプロイ、としていましたが、個人で作るサイトで特に誰に迷惑がかかるというわけでもないため、直接本番環境をいじりながら進めています。

■開発:3時間
上に書いたような、ユーザーがコンタクトフォーム経由でサイトの掲載依頼をする→依頼情報をmysqlにつっこみ、記事を作成するという部分。またはカスタムフィールドのフロントへの表示の仕方の修正などを行いました。

■主要ECサイト掲載:10時間
記事作成の時間です。世の中にどのようなECサイトがあるかを探し、上記で開発したコンタクトフォームからシコシコ登録をしました。
コンテンツ作成なので、このあたりが一番時間がかかります。

■SEOやらGAタグやら後処理:2時間
SEO設定、GA登録、GAタグ埋め込み、webmaster登録など通常必要になる後処理です。

採用したテーマ:gridsby

ギャラリーサイトといったらタイルでしょ!
ということでタイル形式のテーマを探し、イメージに近いGridsbyというテーマにしました。

Gridsby

このテーマのすごいところは、一覧ページ(トップページやカテゴリページ、検索結果など)からタイルの画像をクリックすると、画面遷移なしに詳細の情報がニュルっと表示される所です。
一般的にWebサイトはURLのリンクで情報をどんどん流していくという性質がありますが、画面遷移は結構時間がかかるため、なるべくなくす方が良いという意見もあります。そういった意味だと、GridsbyみたいにURLが変わらずにページが切り替わるというのは素晴らしいと思います。
(その分最初のページ読み込みに時間がかかるといった難点がありそうですが、、)

こだわった所・つまづいた所

投稿作業をほぼ自動化

今回はユーザーがコンタクトフォームに入力した情報をそのままmysqlにつっこみ、記事が生成される、というロジックを組みました。

まず、Wordpressのデータ構造を見てみました。
Wordpressには下記の11個のテーブルがあります。

wp_commentmeta
wp_comments
wp_links
wp_options
wp_postmeta
wp_posts
wp_terms
wp_term_relationships
wp_term_taxonomy
wp_usermeta
wp_users

案外少ないですよね。この中には記事の情報だけでなく、ユーザーの設定とか管理系の情報も入っています。データ構造を単純化するのってとても難しそう。
今回はこの中でwp_postmetaとwp_postsの2つのテーブルにinsertをしています。
wp_postsはその名の通り記事情報を保持するテーブルです。記事作成日や記事名など、どの記事にも共通して保持する情報を持っています。
wp_postmetaは記事に関わるメタ情報を保持するテーブルとのことなんですが、ようは別になくても記事としては成立する情報を記事に紐付けるテーブルです。例えばサムネイル画像のリンクやカスタムフィールドはここに登録されます。

ここの処理は、submit.phpというファイルでコンタクトフォームを生成し、そこからpostされた情報をpost.phpというファイルで受け取り、セキュリティチェック等をしてmysqlに格納するという流れになっています(とてもシンプルです)
submit.phpは今はリンクを貼っていないのですが、こんな感じのページです。

submit.php

post.phpでのmysqlとの接続はWordpressの機能を使っています。
Wordpressには『$wpdb』というDB接続の機能があるのですが、これを使うとPDOみたいにユーザー名とかを定義する必要がなく(PDOも十分便利ですが)、config.phpにある情報を自動的に取ってきて簡単にmwsqlと繋いでくれます。
このあたりはコードみた方が早いと思うので、一部コードを載せます。

	$name = $_POST['name'];
	$email = $_POST['email'];
	$company = $_POST['company'];
	$site_name = $_POST['site_name'];
	$url = $_POST['url'];
	$category = $_POST['category'];
	$remarks = $_POST['remarks'];
	
	$result = $wpdb->insert( $wpdb->posts, array(
	'post_author' => 1,
	'post_date' => current_time('mysql', 1),
	'post_date_gmt' => current_time('mysql', 1),
	'post_content' => '',
	'post_title' => $site_name,
	'post_excerpt' => '',
	'post_status' => 'pending',
	'comment_status' => 'pending',
	'ping_status' => 'pending',
	'post_password' => '',
	'post_name' => $site_name,
	'to_ping' => '',
	'pinged' => '',
	'post_modified' => current_time('mysql', 1),
	'post_modified_gmt' => current_time('mysql', 1),
	'post_content_filtered' => '',
	'post_parent' => 0,
	'guid' => 'http://gallerymotoi.com/?p='.'tobechanged',
	'menu_order' => 0,
	'post_type' => 'post',
	'post_mime_type' => '',
	'comment_count' => 0,
	));

こんな感じで、POSTで受け取った情報をmysqlに入れてるんですが、$wpdbからいきなりinsertの関数を呼び出してsql文をつっこんでます。
こりゃあ楽ですわ。
楽すぎて屁が出るレベルです。

単純なタイルではなくPinterst風に

通常のギャラリーサイトですと、紹介するサイトのイメージ同じサイズで、五目上に綺麗に並んでいますが、今回はPinterestみたいに縦の幅がマチマチなデザインにしようと開発しました。

これを実現するためには、大きく2つのステップがありました。

①縦の幅をランダムにトリミングする

WordPressでは、メディアアップロードから画像をアップするときに、add_image_size()という関数が呼ばれ、アップする画像のサイズの異なるものが複製されます。
どのサイズの画像が複製されるかはテーマ毎に異なり、これがfunction.phpに定義されています。今回使ったテーマ『Gridsby』でもこの関数が2回呼びだされ、それぞれトップページでのサムネイルに使用する前提の小さいサイズの画像と、それ以外で使う中くらいのサイズの画像が複製されていました。
今回はサムネイル用の画像を複製するadd_image_size()関数を

add_image_size( 'gridsby-gallery-thumb', 450 , rand( 300 , 500) , true); 

という風に書き換え、横幅は450px、縦幅は300pxから500pxの間の値がランダムで決定される、と定義しました。
また、関数に渡す第四引数がtrueになっていますが、このtrueにより画像を単純に縮小するのではなくトリミングして狭い範囲を見せる、という意味合いになります。

②トリミングの基点を『横:中央 縦:一番上』に指定する

add_image_size()の第四引数がtrueになっていると、media.phpにあるimage_resize_dimensions()という関数が呼び出され、トリミングが実行されます。
デフォルトの記述だと、画像のちょうど中心から縦横のサイズに合わせてトリミングをするという仕様になっているのですが、今回はECサイトのトップページを表示するため、縦の基点は一番上にする必要がありました。そのためimage_resize_dimensions()の

$s_y = floor( ( $orig_h - $crop_h ) / 2 );

という部分を

$s_y = 0;

と書き換えました。これで単純に縦の基点を画像の半分の位置という記述から、画像の一番上という内容に変えたことになります。

改めて感じるWordpressの素晴らしさ

今回PHP等大分わかるようになってきたからこそ感じたWordpressの素晴らしさがありました。
最初はheader.phpやfooter.phpなど複数ファイルによって各ページが作られることで、サイトの更新性や保守性が担保されている点に感動していましたが、今回もう少し深い部分をいじってみて感じたのは、Wordpressで定義されている関数によってかなり色々楽に実現できるという点です。
Wordpressはブログやコーポレートサイト作成によく使われていると思いますが、簡単なWebサービスや会員管理などなら、結構使えるんじゃないでしょうか。
今後はその辺りも研究してまた何か作っていきたいですね。


 

Pocket

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>