Download 「tanzaku」(95KB)
Preview 「tanzaku」

グリッドレイアウトを実現するWordpressのテーマを製作いたしました。

テーマのバージョン履歴
ver.1.1.1
ver.1.1.0
ver.1.0.5
ver.1.0.4
ver.1.0.3
ver.1.0.2
ver.1.0.1
ver.1.0

テーマのライセンス
GPL v2

利用ライブラリ＆プラグイン
jQuery (GPL/MIT)
http://jquery.com/
jQuery Easing Plugin
http://gsgd.co.uk/sandbox/jquery/easing/
jQuery Variable Grid Layout Plugin
http://blog.xlune.com/2009/09/jqueryvgrid.html

動作環境
・WordPress: v2.8以上
・Browser: IE6/7/8, Firefox3/3.5, Safari3/4, Chrome3/4, Opera10

既知の不具合
・General : グリッドサイズが2倍以上（クラス “x2″以降）の時に綺麗に 並ばないことがあります。

カスタマイズをする上での参考情報です。以下、Tanzakuバージョン1.1、WPバージョン2.9 を元に解説します。

グリッドカラムの上限倍幅を指定する

＜編集箇所：index.php＞

[grid column setting]の箇所の、$max_colを変更します。1を指定すると、グリッドがすべて最小幅で表示されるようになります。3を指定すると、最大で3倍幅までグリッドが拡張されます。幅はグリッド内のコンテンツ（画像、ビデオ等）の大きさによって変化します。

$max_col = 2; // max column size (style div.x1 ~ xN)

グリッドのカラム幅、パディング・マージン等の数値を調節する

＜編集箇所：style.css＞

“Grid Items, Single Item and Comments”の箇所、div.x1からの箇所を変更します。

div.x1 { width:  290px; }
div.x2 { width:  615px; }
div.x3 { width:  940px; }
div.x4 { width: 1265px; }

カラム幅の倍数Nに対して「(幅 × N) + ギャップ幅 × (N – 1) 」の式で数値を求めます。ギャップ幅はパディング、マージン（もしあればボーダーも）の横幅に影響する数値を合算して指定します。ギャップ幅は下記のスタイルが関係します。

div.grid-item,
div.single-item {
	overflow: hidden;
	margin: 0 5px 5px 0;
	padding: 15px 15px 30px 15px;
	border: 0;
	background-color: #7b7f8b;
}

このほか、画面下部に配置されるサイドバー２（#sidebar2 li.widget）の調整も考慮してください。

＜編集箇所：index.php＞

[grid column setting]の箇所の、$col_w（カラム幅）, $gap_w（ギャップ幅）を変更します。

$col_w = 290; // width of grid column
$gap_w = 35;  // padding + margin-right (15+15+5)

＜編集箇所：header.php＞

Javascriptコードの gridDefWidth に、index.phpで指定した$col_w, $gap_wの合計値を指定します。

gridDefWidth: 290 + 15 + 15 + 5,

moreタグによる遷移先ページでの余計な移動を無効にする

moreタグによって生成されるリンク（本テーマでは “Details »”表示）にはフラグメント（#記号）が通常含まれているため、それをクリックするとクリック先の該当箇所に瞬時に移動してしまい、詳細ページのアニメーション効果が中途半端になってしまいます。この現象の修正に次のプラグインの導入をおすすめします。

WordPressのmoreタグを変更するプラグイン MoreLink#Remove
http://debeso.com/blog/2008/12/wordpress/morelinksharpremove/

画像にポップアップ系効果を追加する

Lightbox2プラグインなど、画像をポップアップ化するプラグインと併用できます。サムネイル画像に対して画像リンクが張られていれば、これらのプラグインを利用してポップアップ表示が可能になります。ただしメインインデックスで各グリッドに１つだけ表示される画像には、詳細ページへのリンクが強制的に張られます（画像へのリンクがあっても削除されます）。そのためメインインデックスのグリッド内の画像もポップアップ化するには下記の指定を変更します。

＜編集箇所：index.php＞

[grid image link setting]の箇所、$flg_img_forcelinkをfalseに変更します。

$flg_img_forcelink = false;   // add/overwrite a link which links to a single post (permalink).

投稿でのサムネイルの埋め込み方

投稿エディタで画像を挿入する際に、下のほうの「リンクURL」と「サイズ」を確認します。リンクURLには「ファイルのURL」ボタンを押してオリジナルサイズの画像へのリンクを貼り、サイズに「サムネイル」「中サイズ」など小さめのサイズを選択します。

WPの管理画面＞メディア設定画面でサムネイル画像の設定ができます。ここのサイズをグリッドのカラム幅と合わせておいても良いかもしれません（ただし合わせてなくても、このテーマは自動的に画像サイズをグリッドにフィットさせます）。
サムネイルの場合、「実寸法にトリミング」チェックボックスにチェックを入れておくと完全に縦横の画像サイズを固定化することもできます。グリッドを縦横に規則正しく整列させたい場合はこのオプションを利用すると良いでしょう。

詳細ページでサムネイル画像を大きく表示する

＜編集箇所：index.php＞

[grid image link setting]の箇所、$flg_img_extractをtrueに変更します。最初のサムネイル画像に画像へのリンクが張られていれば、詳細ページでリンクを画像タグに展開して表示します。

$flg_img_extract = true;    // in single post page, extract thumbnail link to an original image.

ビデオを表示する

Youtubeなど動画共有サイトのタグ埋め込み（obejctタグ）に対応しています。
投稿エディタの「HTMLタブ」を開いてタグを貼りつけます。

また、WP2.9からの新機能では動画共有サイトのURLをじかに記述するだけでもビデオの埋め込み（objectタグへの変換）ができるようになっています。

自前のサーバー内のビデオを表示する

WPのメディアライブラリにアップロードしたビデオも挿入できます。投稿エディタ（ビジュアルタブ）を開き、ツールバーの右端「アドバンスとツールバー」ボタンを押してツールバーの２段目を表示します。その中の「埋め込みメディアの挿入」ボタンを使います。

ビデオ埋め込み用プラグインも利用できます（Embedded Videoプラグインで確認）。
基本的にビデオ用に生成されるobjectタグやembedタグにwidth, height属性がセットされていればグリッドにフィットします。

ビデオのグリッドへのフィット方法を変更する

＜編集箇所：index.php＞

[grid image link setting]の箇所、$flg_obj_fitを変更します。”none”, “small-fit”, “large-fit”のいずれかを指定できます。それぞれ「フィットしない（サイズ無調整）」「小さめのグリッドにフィット」「大きめのグリッドにフィット」になります。

$flg_obj_fit = 'large-fit';  // none | small-fit | large-fit ... how to fit size of object tag.

メインページでコメント数を表示する

＜編集箇所：index.php＞

113行目付近のPHP内のコメントを消して元に戻します。

<?php comments_popup_link(); ?>

投稿者名を表示する

＜編集箇所：index.php＞

次のコードを113行目付近に追加します。

Author: <?php the_author(); ?><br />

サイドバー２（下方領域）のデフォルト表示を消す。

２番目のサイドバー領域に限り、何もウィジェットを設定してない場合にデフォルトの内容物を設定しています。これを「何もないときは何も出さない」ようにします。

＜編集箇所：sidebar-2.php＞

ifブロックの中身（中略の部分）をすべて削除するか、あるいは

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
（中略 ここを削除）
<?php endif; ?>

代わりにifブロックの中をさらにif(false)で囲います。

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php if (false) : ?>
（中略）
<?php endif; ?>
<?php endif; ?>

Title : ベストウェスタン福岡中洲イン
Client : ベストウェスタンホテル
Launch : 2010
Visit Site : http://www.bwjapan.co.jp/fukuokanakasuinn

Title : 美創
Client : 株式会社 美創
Launch : 2009
Visit Site : http://www.biso-kagu.com/

Title : K＆Cファクトリー
Client : 株式会社 K＆Cファクトリー
Launch : 2009
Visit Site : http://www.kc-factory.co.jp/

Title : カタナゴルフ
Client : 株式会社カタナゴルフ
Agency : 株式会社日本経済広告社
Launch : 2006
Visit Site : http://www.katana.ne.jp/

Title : 焼肉セナラ
Client : 株式会社コーフク
Launch : 2009
Visit Site : http://www.senara.jp/

Title : としまフューネス
Client : 株式会社 としまフューネス
Launch : 2008
Visit Site : http://www.toshima-f.co.jp/

Title : 立川マザーズウエディング
Client : マザーズオリエンタル
Launch : 2008
Visit Site : http://www.mothersgroup-wedding.jp/

Title : 財団法人 東京都予防医学協会
Client : 財団法人 東京都予防医学協会
Launch : 2007
Visit Site : http://www.yobouigaku-tokyo.or.jp/

Title : ハイアットリージェンシー大阪
Client : ハイアット・リージェンシー・オーサカ株式会社
Launch : 2005