もっと実用的なカスタマイズ方法を学べたらなとTwitterで呟いたとところ、フロッグマンオフィス代表の吉浦さんに声をかけて頂き、勉強会を開催して頂けることになりました。

吉浦さん、ありがとうございました^^

INDEX

• 1. CS-Cartについてのおさらい
• 2. CS-Cart勉強会 vol.2 in 東京
• 3. 今回の勉強会の概要
• 4. WYSWYGエディタの無効化
• 5. フリー版のスキン「Basic skin」をカスタマイズしていこう！
• 6. カスタマイズ用のCSSの設置
• 7. テンプレート化をする前のファイルの設置
• 8. テンプレートフックで読み込むCSSを追加する
• 9. ブロック機能を使ってレイアウトを変更する
• 10. 完成に近づける
• 11. スマートフォン対応「モバイルアドオン」ベータ版第1弾公開！

1. CS-Cartについてのおさらい

前回の勉強会の内容を以前記事にまとめていますので、CS-Cartのインストールや簡単な使い方については以下の記事を参考にしてみて下さい。

• 「CS-Cart」カスタマイズ講座 vol.1＜テンプレート編＞に参加してきましたよ！

2. CS-Cart勉強会 vol.2 in 東京

福岡での前回の勉強会の後、2月18日(土)に「CS-Cart勉強会 vol.2 in 東京」が開催されました。
先ずはその勉強会の内容をシェアさせて下さい（何故なら参加できなくて悔しかったので＞＜；）。

当日の内容をフロッグマンオフィスデザイナーのYUKIさん、無料写真素材サイトPAKUTASOで有名なsusi-paku（スシパク）さん、株式会社あんどぷらすの望月さんがブログにてまとめて下さってるのでご紹介。
今後CS-Cartを触るならこの御三方のブログは要チェックです^^

VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-

• 東京でCS-Cart勉強会を開催しました！スライドなど公開中。

susi-paku web -楽しければいいのです-

• CS-CART ver3が世界レベルすぎてヤバイ！EC-CUBEと徹底比較した第2回東京勉強会レポート

からくちWeb屋帳 2nd

• CS-Cart勉強会 vol.2 in 東京 2月18日(土) 参加してきたよ

スライド

以下勉強会のスライドです。

3. 今回の勉強会の概要

前回の勉強会では「コアのテンプレートファイルは触らずにCSSでのカスタマイズ」が鉄則でした。
しかし実案件で吉浦さんがテンプレートのカスタマイズをされてきた結果、テンプレートカスタマイズしても大丈夫とのことで、今回テンプレートカスタマイズの方法を教わって来ました。

具体的になにをしたかというと、フリーのCSSテンプレート（既にコーディングされたHTML+CSS）をテンプレートに落とし込んでいく、という作業を行いました。

• AutoPortal – Free CSS template by ChocoTemplates.com

4. WYSWYGエディタの無効化

開発の時はWYSWYG（ウィズウィグ）エディタを無効化しておいたほうが良いみたいです。
管理画面メニューの「基本設定」 → 「表示設定」を選択して「WYSWYGエディタ」の欄のプルダウンメニューで「Do not use」を選択して設定を保存して下さい。

5. フリー版のスキン「Basic skin」をカスタマイズしていこう！

今回の勉強会ではCS-Cartフリー版を使いましたので、フリー版で使用できるスキンは「Basic skin」となっております。
この「Basic skin」のテンプレートファイル郡は「skins/basic」の中にあります。

そして、ショップページのテンプレートファイルは「skins/basic/customer」、管理画面のテンプレートファイルは「skins/basic/admin」に入っています。

今回ショップページをカスタマイズしていくので編集していくファイルは「skins/basic/customer」の中にあります。

6. カスタマイズ用のCSSの設置

skins/basic/customer

「skins/basic/customer」の「styles.css」を同じディレクトリにコピーし、「styles-cs.css」にリネームします。

skins/basic/customer/addons/localization_jp

作成した「styles-cs.css」を「skins/basic/customer/addons/localization_jp」にコピーまたは移動します。
バックアップという意味で元のディレクトリにも残しておいても良いかも知れませんが、紛らわしくなるようでしたら別の場所にバックアップしておくと良いと思います。

skins/basic/customer/styles.css

「skins/basic/customer/addons/localization_jp」においた「styles-cs.css」を読みこませるように、「skins/basic/customer」の「styles.css」を編集します。

@import url('styles.base.css');
@import url('addons/localization_jp/styles-cs.css');

※「skins/basic/customer/styles.css」の中身はこの2行だけにします。

skins/basic/customer/addons/localization_jp/styles-cs.css

「skins/basic/customer/addons/localization_jp」の「styles-cs.css」を編集します。

@import url('styles.base.css');

の部分を削除します。

「images」フォルダまでのパスの指定を変更します。
「images ～」の部分を「../../images ～」に変更して下さい。

ショップページにアクセスすると見た目は変わってない筈です。
これから編集していくCSSは「skins/basic/customer」の「styles.css」や「styles-cs.css」ではなく、「skins/basic/customer/addons/localization_jp」の「styles-cs.css」になります。

7. テンプレート化をする前のファイルの設置

skins/basic/customer/addons/localization_jp

テンプレート化をする前のHTMLやCSSなどのファイル一式を「skins/basic/customer/addons/localization_jp」におきます。

8. テンプレートフックで読み込むCSSを追加する

テンプレートフックが分からない方はこちらの「テンプレートフック」を参考にしてみてください。

テンプレートフックは以前ご紹介した方法で「My changes」アドオンの中に入れていっても良いのですが、今回は「skins/basic/customer/addons/localization_jp」の中でフックを使用していきます。

skins/basic/customer/addons/localization_jp/hooks/index/styles.post.tpl

「skins/basic/customer/addons/localization_jp/hooks/index」の「styles.post.tpl」というファイルに一行CSSを読みこませる記述を追加します。
下記の5行目のところですね。

{* $Id: styles.post.tpl by tommy from cs-cart.jp 2010 $ *}

{if $smarty.const.CART_LANGUAGE == 'JP' && $addons.localization_jp.jp_specific_css == 'Y' }
<link href="{$config.skin_path}/addons/localization_jp/styles.css" rel="stylesheet" type="text/css" />
<link href="{$config.skin_path}/addons/localization_jp/css/style.css" rel="stylesheet" type="text/css" />
{/if}

レイアウトが少しがずれていますが、CSSが適用され見た目が変わったことがわかります。
※変わらない場合は「http://localhost/cscart/admin.php?cc」とかでキャッシュをクリアして下さい。

ちなみにJavaScript（jQueryなど）のファイルは「skins/basic/customer/addons/localization_jp/hooks/index」の「script.post.tpl」というファイルで追加で読み込む記述を行うことが出来ます。
どんなファイルを読み込んでいるかは、元々のHTMLファイルを確認して下さい。

9. ブロック機能を使ってレイアウトを変更する

CS-Cartにはブロック機能があって、これまた便利なのですが簡単にレイアウトを変えられるようになっています。
HTMLファイルの方は2カラムなのですが、CS-Cartは標準の状態では3カラムなのでこれを変更します。

管理画面メニューの「デザイン」から「ブロック」を選択します。

右カラムの設定を「無効」に変更します（変更すると設定は自動で保存されます）。

ショップページにアクセスすると2カラムになっていることがわかります。

カラムの幅など違いはありますが、先程よりもイメージに近づいてきました。

10. 完成に近づける

後は追加したCSSを修正していきながら、要らないところは省き、テンプレートのコアファイル（skins/basic/customer配下）にも修正を加えながら完成に近づける、といった感じでした。
フックも使用できるので結構自由にカスタマイズ出来ますが、自分で修正したファイルや追加したファイルはわかるようにしておきましょう。

ちなみに吉浦さん曰く、がっつりコアのテンプレートを書き換えても良いけれど、HTMLのidやclass（特にid）は変えるとJSが動かない場合があるかもとのことでした。
どこを残しつつどこを書き換えるのか、その辺りの判断がついてくると作業も早くなってくるかも知れませんね。

11. スマートフォン対応「モバイルアドオン」ベータ版第1弾公開！

（via photo CS-Cart.jp開発者ブログ）

スマートフォン対応「モバイルアドオン」ベータ版第1弾がついに公開されました。
プロ版をご購入いただいた方、またはサーバープランご契約者様のみベータ版を無料で使用できるみたいです。

• スマートフォン対応「モバイルアドオン」ベータ版第1弾を公開しました！ – CS-Cart.jp開発者ブログ

テックプレビュー版のデモであれば下記のURLからまだ見ることができるようです。
http://mobile.cs-cart.jp/

• スマートフォン対応アドオン テックプレビュー版デモを公開！ – CS-Cart.jp開発者ブログ

このスマートフォン対応「モバイルアドオン」ベータ版第1弾に関しては、susipakuさんがいち早くブログにて書かれてますので、そちらも見てみて下さい^^

• CS-CART のスマホアドオン（ベータ）がついに登場！洗練されたUIなど、導入してみたレビュー susi-paku web -楽しければいいのです-

もともと自分用に作成したのですがせっかくなので公開します。

プラグインの説明

カスタムフィールドを使いやすくするプラグイン「Custom Field GUI Utility」の設定ファイル「conf.ini」の編集を管理画面から行えます。

「Custom Field GUI Utility」の作者はTomohiro Okuwaki氏（Web屋かたつむりくん）。

使い方

※事前にCustom Field Gui Utilityをインストールしてください。
プラグインを有効にして管理メニューの「設定」→「カスタムフィールド設定」を選択して下さい。

ダウンロード

Custom-Field-Gui-Utility-Extender (Version 0.0.1 Beta)

ライセンス

「Custom Field GUI Utility」がMITライセンスになっているのでとりあえずMITにしています。
ですので、非公式プラグインですが使いたいという方がいらっしゃれば、どうぞ。

動作確認

WordPress 3.3.1
Custom Field GUI Utility 3.2.4 & 3.2.5

WordBench静岡の皆さん、参加者の皆さんありがとうございました。

INDEX

1. 勉強会の内容
2. 勉強会の光景
3. スライド
4. 参考サイト
5. 関連ブログ

1. 勉強会の内容

勉強会は、WordBench静岡から主催の小長谷さん、福岡から僕となお君とで三人でセッションをさせて頂きました。

「WordPressブログテーマを作るときの基礎」
ブログ用のオリジナル（自作）テーマを作ります。
今回は、あまり難しいことはせず、テーマづくりの基本を紹介します。（テーマ作成初心者向け）
Twitter: @mokeco_

「基本的なデバッグに関するTips」（ゲストセッション）
各種デバッグプラグインなどをご紹介します。
Twitter: @andante0727

「知っておきたいレンタルサーバの選び方」（ゲストセッション）
クライアントのサイトを管理できる人になる為の第一歩（メール編）
Twitter: @naoyuki003jp

2. 勉強会の光景

会場入り口

セッション前

3. スライド

今回はWordPressのデバッグとテストについていろいろお話させて頂きました。
聞き苦しい部分もあったかと思いますが、聞いて下さった皆さんありがとうございました。早速スライドをUPしています^^

今回情報を色々と教えて下さったmiyaさんに感謝です！

4. 参考サイト

また、Debug-Barに関してはwokamotoさんやまがりんさんのブログが参考になりました。ありがとうございます^^

• WordPressでテーマを作る際のテーマユニットテストのススメ – firegoby
• 信頼性の高いWordPressテーマを作るためのTheme-Checkのすすめ – firegoby
• マトモなWordPressプラグインを見分けるための簡単そうで簡単でないTips – firegoby
• WordPressのテーマやプラグイン開発で行うテスト方法いろいろ – firegoby
• wp-config.php の編集 – Codex
• WordPressのお作法-テーマ作成時のテスト・デバッグについて WordBench大阪 – YATのBLOG
• WordPress 開発に便利なプラグイン Debug Bar – DOGMAP.JP
• Debug BarとDebug-Bar-ExtenderでWordPressのパフォーマンスチェック – Simple Colors
• ハイパフォーマンス WordPress サイト入門 – WordCamp KOBE 2011 – wokamoto
• Debug BarとDebug-Bar-ExtenderでWordPressのパフォーマンスチェック – Simple Colors
• WordPressのユーザーマニュアルBeta – め組
▲目次ヘ

5. 関連ブログ

• WordBench静岡でサーバ話 – NO．００３ 新人サーバ管理者の悩み
• 第2回 WordBenchしずおか 開催しました #wbszok – MOKECO*WebMEMO
]]> http://webcake.no003.info/event/wbszok-2012-04-debug-and-test.html/feed/ 0 http://webcake.no003.info/webdesign/win-command-space.html?utm_source=rss&utm_medium=rss&utm_campaign=win-command-space http://webcake.no003.info/webdesign/win-command-space.html#comments Tue, 10 Apr 2012 07:06:46 +0000 Tsuyoshi. http://webcake.no003.info/?p=3111 MacでCommand + Spaceで日本語入力の切り替えを行なっている方、Windowsマシンを急に使うと間違えてしまいますよね…。

そんな方のために、「CmdSpace」というソフトをご紹介します。




ダウンロードサイト

Pollux Program Lab

使い方

使い方は簡単！起動するとタスクトレイにアイコンが表示されるので、右クリックメニューから「設定」を選択して、キーの選択のところで「Altキー」を選択するとAlt + Spaceで、「Windowsキー」を選択するとWindows + Spaceで、「Ctrlキー」を選択するとCtrl + Spaceで日本語入力の切り替えが行えるようになります。



「次回のWindows起動時にも動作開始」にもチェックを入れておきましょう^^

動作確認環境

Windows XP / Windows 7

]]> http://webcake.no003.info/webdesign/win-command-space.html/feed/ 0 http://webcake.no003.info/webdesign/wordpress-syntax-mode.html?utm_source=rss&utm_medium=rss&utm_campaign=wordpress-syntax-mode http://webcake.no003.info/webdesign/wordpress-syntax-mode.html#comments Tue, 03 Apr 2012 13:45:18 +0000 Tsuyoshi. http://webcake.no003.info/?p=2992 Macのエディタ「Coda」のプラグイン「WordPress Syntax Mode」を導入するとWordPressのコードの補完を行なってくれるのでとても便利です。

重宝しているので、ご紹介。




Codaのダウンロード

Codaのダウンロードは公式のサイトかMac App Storeからダウンロードすることが可能です。

• パニック・ジャパン – Coda
• Mac App Stote – Coda

WordPress Syntax Modeのダウンロード

以下のサイトのダウンロードリンクから「PHP-HTML-WP.mode.zip」をダウンロードします。

• WordPress Syntax mode for Panic Coda

WordPress Syntax Modeのインストール



「~/Library/Application Support/Coda/Modes/」配下に解凍した「PHP-HTML-WP.mode」フォルダを置いて下さい。

ショートカットキー「commnd + shift + G」（Fiderメニューの「移動」->「フォルダへ移動」）で、フォルダまでのパス「~/Library/Application Support/Coda/Modes/」を入力して移動すると良いです。

Codaを起動している場合は再起動して下さい。

「構文モード」に「PHP-HTML-WP」が追加されます。


以下のようにWordPressのコード補完を行なってくれるようになります。


]]> http://webcake.no003.info/webdesign/wordpress-syntax-mode.html/feed/ 0 http://webcake.no003.info/event/custom-post-type-and-custom-field-website.html?utm_source=rss&utm_medium=rss&utm_campaign=custom-post-type-and-custom-field-website http://webcake.no003.info/event/custom-post-type-and-custom-field-website.html#comments Sun, 01 Apr 2012 23:52:38 +0000 Tsuyoshi. http://webcake.no003.info/?p=2779 先日WordPressのイベントで「カスタム投稿タイプとカスタムフィールドで作るWebサイト」というお話をさせて頂きました。
後日ブログにてまとめます、と言った割りに更新できてないままなので動画とスライドだけ先にシェアさせて下さい。

内容は追記していく予定です、済みません。




INDEX

• 1. スライド
• 2. 動画
• 3. テーマダウンロード

スライド

カスタム投稿タイプとカスタムフィールドで作るWebサイト

View more presentations from Tsuyoshi Kaneko

▲目次ヘ

動画

▲目次ヘ

テーマダウンロード

以前福岡で「WordPress初心者テーマ作成勉強会」を開催させて頂いた時にテーマを配布していますので、テーマに関しましてはそちらをご覧下さい。

design : b-cures. まあ


]]> http://webcake.no003.info/event/custom-post-type-and-custom-field-website.html/feed/ 0 http://webcake.no003.info/webdesign/wp-tag-cloud-dropdown-list.html?utm_source=rss&utm_medium=rss&utm_campaign=wp-tag-cloud-dropdown-list http://webcake.no003.info/webdesign/wp-tag-cloud-dropdown-list.html#comments Fri, 30 Mar 2012 03:10:50 +0000 Tsuyoshi. http://webcake.no003.info/?p=2952 WordPressでタグクラウド一覧をドロップダウンリストで表示して、選択されたタグの記事一覧を表示する方法です。

元ネタはフォーラムから。
今回もWordPress界の偉い方まがりんさん（@jim0912）にお世話になりました。



ソースコード

<?php if ( $tags = get_tags() ) : ?>
	<select onchange="location.href=this.options[this.selectedIndex].value;">
		<option value="" selected="selected">タグクラウド</option>
		<?php foreach ( $tags as $tag ) : ?>
			<option value="<?php echo esc_url( get_tag_link( $tag->term_id ) );  ?>"><?php echo esc_html( $tag->name ); ?></option>
		<?php endforeach; ?>
	</select>
<?php endif; ?>

結果



元ネタ

WordPress › フォーラム » タグクラウドをドロップダウンメニュー化したい

ちなみにclean_urlとwp_specialcharsは現在非推奨なので、esc_urlとesc_htmlを使用するように変更しました。

参考

• 関数リファレンス/get tags – WordPress Codex 日本語版
• 関数リファレンス/get tag link – WordPress Codex 日本語版
• esc_url – WordPress Codex
• esc_html – WordPress Codex
]]> http://webcake.no003.info/webdesign/wp-tag-cloud-dropdown-list.html/feed/ 0 http://webcake.no003.info/event/wp-beginner-create-themes-costa-slide-share.html?utm_source=rss&utm_medium=rss&utm_campaign=wp-beginner-create-themes-costa-slide-share http://webcake.no003.info/event/wp-beginner-create-themes-costa-slide-share.html#comments Tue, 27 Mar 2012 03:43:03 +0000 Tsuyoshi. http://webcake.no003.info/?p=2873 2012年3月24日（土）にGuildCafe Costa（ギルドカフェ コスタ）で開催しました「WordPress初心者テーマ作成勉強会」のスライドをシェアします。

たくさんのご参加ありがとうございました。
また、会場を貸して下さったコスタさんありがとうございました。



INDEX

1. スライド
2. HTMLファイル・テーマ一式ダウンロード
3. カスタム投稿タイプの設定
4. カスタムフィールドの設定
5. WordBench 福岡
6. 参加して下さった方のブログ

1. スライド

WordPress初心者テーマ作成勉強会

View more presentations from Tsuyoshi Kaneko

▲目次ヘ

2. HTMLファイル・テーマ一式ダウンロード

利用規約

※個人での勉強目的以外の用途に使用しないで下さい。再配布・無断転載を一切禁じます。
aquarium.zip

/aquarium
  └ aquarium   ・・・ WordPressテーマ
  └ html       ・・・ テーマ化前のHTMLファイル
  └ README.txt ・・・ 利用規約

▲目次ヘ

3. カスタム投稿タイプの設定

Custom Post Type UI（0.7.1）を使用します。


今回、fish、event、info、3つのカスタム投稿タイプを作成しました（上記はfishの例です）。
Has ArchiveはTrueを選択することでarchive-投稿タイプ.phpが有効になります。

（※作成したカスタム投稿タイプですが、プラグインからfunctions.phpのコードとして出力が出来ます。こちらの方がいろいろ自分でカスタマイズ出来ます。）

参考サイト

• カスタム投稿タイプ(Custom Post Type)の導入と使い方 [WordPress 3.0] – 8bitodyssey.com
• WordPressでサイト設計をする時に覚えておきたいポストタイプの特徴などいろいろ – Webデザインレシピ
▲目次ヘ

4. カスタムフィールドの設定

Custom Field Gui Utility（3.2.4）のconf.iniは以下の通りです。

wp-content/plugins/custom-field-gui-utility/conf.ini
※以下の内容をコピーしてお使い下さい。

; これは設定ファイルのサンプルです。
; php.ini と同様、';' で始まる行はコメントです。

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
; 共通
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
[cfgu_setting]
boxname = カスタムフィールド

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
; イベント [event]
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
[event_date]
fieldname = 開催期間
type = textfield
class = event
default =
size = 35
must = 1

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
; 水族館の魚たち [fish]
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
[habitat]
fieldname = 生息地
type = textfield
class = fish
default =
size = 35
must = 1

[length]
fieldname = 体長
type = textfield
class = fish
default =
size = 35
must = 1

[native_habitat]
fieldname = 生息環境
type = textfield
class = fish
default =
size = 35
must = 1

[fish_pic01]
fieldname = 魚の写真（小）
type = imagefield
class = fish
size = 35
must = 1

[fish_pic02]
fieldname = 魚の写真（大）
type = imagefield
class = fish
size = 35
must = 1

[fish_type]
fieldname = 特徴
type = textarea
class = fish
rows = 4
cols = 40
must = 1

▲目次ヘ

5. WordBench 福岡

WordBenchの発起人＆管理人である三好さんがお忙しい中で会場に顔を出して下さり「WordBench 福岡」という名前でイベントの立ち上げを行なっても良いと言って下さったので「WordBench 福岡」として、福岡も盛り上げていけたらなーと思ってます。

一緒に勉強会を立ち上げたいという方は、是非声をかけて下さい。一緒にやりましょう:)

WordBench福岡

▲目次ヘ

6. 参加して下さった方のブログ

• WordPress初心者テーマ作成勉強会まとめ – 白とか黒とかいろいろ
▲目次ヘ
]]> http://webcake.no003.info/event/wp-beginner-create-themes-costa-slide-share.html/feed/ 1 http://webcake.no003.info/event/wp-beginner-create-themes-costa.html?utm_source=rss&utm_medium=rss&utm_campaign=wp-beginner-create-themes-costa http://webcake.no003.info/event/wp-beginner-create-themes-costa.html#comments Tue, 20 Mar 2012 14:27:27 +0000 Tsuyoshi. http://webcake.no003.info/?p=2808 2012年3月24日（土）の15:00～18:00にGuildCafe Costa（ギルドカフェ コスタ）で【福岡】WordPress初心者テーマ作成勉強会を開催します。

初心者の方を対象にWordPressのテーマ作成を参加型形式で行う予定です。
カスタム投稿タイプとカスタムフィールドもやりますよ:)



INDEX

• 会場
• イベントお申し込み
• イベント詳細
• 作成するテーマ

会場


GuildCafe Costa（ギルドカフェ コスタ）

会場は福岡のコワーキングスペースCosta（コスタ）さんをお借りします。
参加費用はドリンク料金込みの会場費用としてお一人1000円となっております。


大きな地図で見る
GuildCafe Costa / ギルドカフェ コスタ （福岡県福岡市中央区大名1-10-14 MATCH ビル2F）

▲目次ヘ

イベントお申し込み

イベントのお申し込みはこちらから宜しくお願い致します。
【福岡】WordPress初心者テーマ作成勉強会 2012/03/24（土） : ATND

▲目次ヘ

イベント詳細

僕自身WordPress歴は浅いですが、WordPressのコミュニティに参加しており業務でもWordPressを使っておられる方にもサポートして頂けるので、数人でお教えする形で行えると思います。

【日時】

2012/03/24（土） 15:00～18:00

【内容】

・WordPressのインストール
・テーマの作成方法（用意しているHTMLを元にWordPressのテーマを作成していきます）
・カスタム投稿タイプとカスタムフィールドの使用方法（今回はプラグインを用いて説明します）

【対　象】

・WordPressを仕事で使用したいと考えている方
・ブログでしかWordPressを使用したことがない方
・とにかくWordPressが好きな方

【定　員】

最大15名→18名

【料　金】

・1000円（ワンドリンク付）

【その他】

・PC等はご自身でご用意下さい。
・事前にXAMPP、MAMP等を設定して下さい。WordPressを動作させる為に必要です。（30分ほど早めに来て頂けるとお教えする事も可能です）
・会場では無線LANが利用可能です。

【懇親会】

したいという方がいればその場のノリでどこかに行きましょう！

▲目次ヘ

作成するテーマ

こちらでHTMLファイルをご用意していますので、それを元にWordPressのテーマとして作成していきます。
これどうやってWordPressで作るんだ？と思った方。余裕で分かるからサポートしてやってもいいぞ！って方も是非是非ご参加下さい。

design : b-cures. まあ




]]> http://webcake.no003.info/event/wp-beginner-create-themes-costa.html/feed/ 1 http://webcake.no003.info/webdesign/wp-three-column-output-example.html?utm_source=rss&utm_medium=rss&utm_campaign=wp-three-column-output-example http://webcake.no003.info/webdesign/wp-three-column-output-example.html#comments Fri, 16 Mar 2012 04:23:34 +0000 Tsuyoshi. http://webcake.no003.info/?p=2786 WordPressでブログじゃないWebサイトを制作する時、投稿データを3カラムずつ表示させるパターンって良くあると思います。
PHPの演算子には%（剰余）があり、これは「$a % $b」とした場合に$aを$bで割った余りを求めるものです。
これが使われてる例を割りと見かけたりしますが、今回は試しに別のパターンを作ってみました。



box3というクラスのdivの中にpostsというクラス名のdivが最大3つ入る例です。

出力したいHTML

<!-- .box3 -->
<div class="box3">
	<!-- .posts -->
	<div class="posts">
		<h2>記事タイトル1</h2>
		<p>記事本文1</p>
	</div>
	<!-- /.posts -->

	<!-- .posts -->
	<div class="posts">
		<h2>記事タイトル2</h2>
		<p>記事本文2</p>
	</div>
	<!-- /.posts -->

	<!-- .posts -->
	<div class="posts">
		<h2>記事タイトル3</h2>
		<p>記事本文3</p>
	</div>
	<!-- /.posts -->
</div>
<!-- /.box3 -->

<!-- .box3 -->
<div class="box3">
	<!-- .posts -->
	<div class="posts">
		<h2>記事タイトル4</h2>
		<p>記事本文4</p>
	</div>
	<!-- /.posts -->

	<!-- .posts -->
	<div class="posts">
		<h2>記事タイトル5</h2>
		<p>記事本文5</p>
	</div>
	<!-- /.posts -->
</div>
<!-- /.box3 -->

このようなHTMLを出力したい場合、下記のPHPコードを書いてみました。

テーマのPHP

<?php while( have_posts() ) : ?>

    <!-- .box3 -->
    <div class="box3">
        <?php /** 3カラムで表示させるためのサブループ */ ?>
        <?php for ( $i = 0; $i < 3; $i++ ) : ?>
            <?php
            //投稿数が3で割り切れるとは限らないので、途中で次の投稿データがなくなった場合
            if ( ! have_posts() ) {
                //終了タグを出力
                echo '</div>
                      <!-- /.box3 -->';
                break 2;    //親ループを抜ける
            }
			the_post();  //投稿データのロード
            ?>
            <!-- .posts -->
            <div class="posts">
                <h2><?php the_title(); ?></h2>
                <?php the_content(); ?>
            </div>
            <!-- /.posts -->
        <?php endfor; ?>
    </div>
    <!-- /.box3 -->

<?php endwhile; ?>

下記のように普通にbreakすると無限ループになる場合があります。

break;

なお、下記のようにすると1行あたりの出力件数が5件になります。

<?php for ( $i = 0; $i < 5; $i++ ) : ?>

テーマのPHP(例2)

こっちは%（剰余）を使用したパターンです。参考までに載せておきます。

<?php for ( $i = 1; have_posts(); $i++ ) : the_post(); ?>

	<?php /** 開始タグを出力 */ ?>
	<?php if ( ( $i % 3 ) == 1 ) : ?>
		<!-- .box3 -->
		<div class="box3">
	<?php endif; ?>

	<!-- .posts -->
	<div class="posts">
		<h2><?php the_title(); ?></h2>
		<?php the_content(); ?>
	</div>
	<!-- /.posts -->

	<?php /** 3件出力後終了タグを出力 */ ?>
	<?php if ( ( $i % 3 ) == 0 ) : ?>
		</div>
		<!-- /.box3 -->
	<?php endif; ?>
<?php endfor; ?>

<?php /** 投稿数が3で割り切れずにループが終了した場合終了タグを出力 */ ?>
<?php if ( ( $i % 3 ) != 1 ) : ?>
	</div>
	<!-- /.box3 -->
<?php endif; ?>

テーマのPHP(例3)

頻繁に使うのであればfunction化するのもありですね。上の例を流用して適当に書きましたが、もっと汎用的にも書けると思います。

<?php the_box( 3 ); //3カラムで投稿データを表示する　?>

<?php function the_box( $column ) { ?>
	<?php while ( have_posts() ) : ?>

		<!-- .box3 -->
		<div class="box3">
			<?php for ( $i = 0; $i < $column; $i++ ) : ?>
				<?php
				//次の投稿データがなくなった場合
				if ( ! have_posts() ) {
					//終了タグを出力
					echo '</div>
						  <!-- /.box3 -->';
					return;
				}
				the_post();  //投稿データのロード
				?>
				<!-- .posts -->
				<div class="posts">
					<h2><?php the_title(); ?></h2>
					<?php the_content(); ?>
				</div>
				<!-- /.posts -->
			<?php endfor; ?>
		</div>
		<!-- /.box3 -->
	<?php endwhile; ?>
<?php } /** endfunction */?>

CSSの例

ざっくりですがCSSも書いておきますねー、イメージが湧きやすいかと思います。
あくまで例ですが例えばこんなイメージ。


style.css

@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	}

h2 {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 1.2em;
	}

.box3 {
	width: 900px;
	margin: 5px;
	font-size: .9em;
	overflow: auto;
	}
	.box3 .posts {
		float: left;
		width: 260px;
		margin: 0 4px;
		padding: 15px;
		border: 1px solid #999;
		background: #f9f9f9;
		}

]]> http://webcake.no003.info/webdesign/wp-three-column-output-example.html/feed/ 0