WordPressを使って15分で作るCSSサイト

— CSS Nite Vol.12 —

マクラケン直子

はじめに： 自己紹介

マクラケン直子（Nao）

所在地

福岡出身/米国ミシガン州在住

略歴

2003-2005 Webデザイナーとしてフリーランス活動

現在 Campbell-Ewald にてUI制作に携わる

WordPressとの関わり

ユーザー歴　約3年 （http://detlog.org/）

著書「WordPress標準ガイドブック」（10月2日発売）

今日はこんなことをやります

1. WordPressについておさらい
2. 第一部： WordPress スピードクッキング
3. 第二部： シェフの技を学ぶ
4. 次のステップ＆おまけ

WordPressについておさらい

WordPressって？

• PHPとMySQLを使ったCMS
• オープンソース、GPLライセンス
• インストール型ブログツールとして世界No.1のシェア
• 数百種類のテーマ＆プラグイン
• 国際化に対応 — WordPress ME

WordPress スピードクッキング（１）

材料

• WordPress ME 2.0.4
• サーバー
• MySQL データベース
• テキストエディタ
• FTPツール
• ウィジェットプラグイン
• お好みのテーマ（今回は、「Simpla 1.01」を選択）

WordPress スピードクッキング（２）

ステップ１: WordPressのインストール

1. MySQL DBを作成
2. ファイルの転送
3. ウィザード上で情報記入

WordPress スピードクッキング（３）

ステップ２: テーマの選択

1. テーマのインストール
2. 管理画面にログイン
3. 「テーマ」→ テーマを選択
4. テーマの詳細設定

WordPress スピードクッキング（４）

ステップ３: ウィジェットプラグインのインストール

1. プラグインをアップロード
2. 「プラグイン」→ 「Widget Sidebar」を選択
3. ウィジェット詳細設定

WordPressで作るCSSサイトの完成！

シェフの技を学ぶ（１）

「シェフの技」って？

• パブリックテーマ
• 「WordPressループ」を極める
• テンプレートファイルを最大限に活用

シェフの技を学ぶ（２）

パブリックテーマ

• おすすめサイト：http://themes.wordpress.net/
• テーマからCSSとXHTMLを学ぶ
• 柔軟性や汎用性のあるコード
• どんなテーマを選ぶ？

シェフの技を学ぶ（３-１）

「WordPressループ」を極める

• 基本ループ

  <?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?> 
  <!-- ここにテンプレートタグなどを記入 -->
  <?php endwhile; else: ?>
  <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
  <?php endif; ?>
  

• 通常、ページ内で１回のみ使用
• 「クエリ」によって、表示される内容が変わる

シェフの技を学ぶ（３-２）

重要な二つの関数

query_posts：クエリの結果を自在に指定

<?php query_posts('cat=2&order=asc'); ?>
<?php while (have_posts()) : the_post(); ?>
<!-- ここにテンプレートタグなどを記入 -->
<?php endwhile; ?>

get_posts：複数ループを実現

<?php $posts = get_posts('numberposts=3&orderby=post_author'); ?>
<?php foreach($posts as $post) : setup_postdata($post); ?>
<!-- ここにテンプレートタグなどを記入 -->
<?php endforeach; ?>

シェフの技を学ぶ（４）

テンプレートファイルを最大限に活用

• ファイルの優先順位（テンプレート階層）
• 条件分岐を利用

  <?php if (is_single()) { ?>
  	<h2><?php single_cat_title(); ?><h2>
  <?php }　?>
  

次はあなたの番です

とにかく、はじめてみよう

• ローカル環境での練習
• パブリックテーマやプラグインの作成
• ドキュメンテーションへの参加
• あなたなりの「レシピ」を公開＆共有

おまけ

WordPress on a Stick

1. XAMPP Lite（またはWOS） + WordPress
2. USBメモリスティック上でローカル環境を構築
3. 残念ながら…　Windows上のみ
4. 興味がある方はこちらで： http://www.tamba2.org.uk/wordpress/usb/

おわりに

このスライドショー資料のURL:

http://download.detlog.org/presentation/092106/

• s5を使っています
• 挿入画像はhttp://www.sxc.hu/より

フィードバック:

info@nao-net.com

最後までおつきあいいただき、ありがとうございました