2. 瀬口理恵（せぐちりえ）＠rie05
1983年大阪うまれ大阪そだち
5DGの屋号でフリーランスデザイナーしてます
Web全般たまにDTPとかUI/デジハリ講師業
@rie05 /rie.seguchi
WordCamp大阪 2012 実行委員長
WordBench大阪 2012年度管理人
WordCamp神戸 2011実行委員・デザイン・スピーカー
自己紹介

3. WordPressでオリジナルテーマ作りたい・基礎編
１
WordPressテーマ構成を知る
2
PHPに触れてみよう
3
実際に作ってみよう
本日の構成

4. WordPressテーマ構成を知る
STEP1
STEP1

5. テーマ構成
全てのテーマファイルは、ここ
Twenty Eleven
公式テーマ
レスポンシブウェブデザインに対応
Twenty Ten
公式テーマ
Elevenに比べて構成はシンプル
STEP1

6. 最初からインストールされているテーマ以外にも
たくさんテーマは公開されています（無料でも有料でも）
STEP1

7. テーマ中身
Twenty Ten
いっぱいファイルがありますが、
これがテーマの絶対構成ではありません
STEP1

8. テーマ最小構成
index.php
php
style.css
css
php
header.php
php
sidebar.php
php
footer.php
include(読み込み)
してくる用
STEP1

9. TOPページ構造サンプル
front-page.php
header.php
footer.php
最新記事ループ表示 sidebar.php
ナビゲーション
メインビジュアル
ロゴ
STEP1

10. front-page.phpのサンプル
<?php get_header(); ?>
コンテンツ
<?php get_sidebar(); ?>
<?php get_footer(); ?>
STEP1

11. PHPで書かれたテンプレートファイルの集合体
「テーマ」
STEP1
テーマ作成にあたって、
テンプレートファイルの考え方は超重要！

12. STEP1
サイト設計によって必要な
テンプレートは変わってきます

13. 勝手にどんどん作っていいの？
STEP1
表示させたいページによって使われる
テンプレートファイルのルールと優先順位が
あります（超重要）
どんなテンプレートファイルがあるの？

14. STEP1
WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/テンプレート階層
に詳しく書いてるので見てみます

15. STEP1
index.php
WordPressテーマにおいて必須ファイル
表示されるテンプレートが何もなければ
とりあえずこのファイルが呼び出されます
（TOPページには使わない方がよいかも）
php

16. STEP1
front-page.php
TOPページで呼び出されるテンプレートファイル
indexはTOPで使わずにこちらを作成おすすめ
php

17. STEP1
header.php/footer.php/sidebar.php
共通部分において呼び出されるパーツテンプレート
分けておくと便利です
php php php

18. STEP1
single.php
個別の記事ページで使われるテンプレートファイル
投稿ひとつひとつはこのファイルで表示します
投稿したブログ記事表示など
php

19. STEP1
category.php/archive.php
記事ページのカテゴリー一覧、アーカイブ一覧で
使用するテンプレートファイルです
例えばカテゴリー「news」の記事一覧とか
php php

20. STEP1
page.php
固定ページで使われるテンプレートファイル
あまり変更がないページは固定ページで作ったり
しますがその際に読まれるファイルです
php

21. STEP1
xxx(任意の名前).php
固定ページで使われるテンプレート
ファイルとして任意の名前をつけて
作成することも可能です
（デザインや内容が全然違う場合とか）
php
<?php
/*
Template Name: xxx（任意の名前）
*/
?>

22. STEP1
functions.php
テーマで使う関数ファイル
さっきまでのテンプレートとは違い、まるごとPHP
初心者さんはなくてもいいけどいつか使うべき時が…
php

23. 他にもまだまだあるけど代表的な紹介としてここまで
STEP1
まとめ
★テンプレートファイルの使われる優先順位は覚える
★index.phpは最終的にいきつく場所
★サイトによって必要なテンプレートファイルを作る

24. PHPに触れてみよう
STEP2
STEP2

25. STEP2
WordPressでオリジナルテーマを作るならPHPは避けて通れません（断言）

26. STEP2
とあるWordPressサイトのpage.phpのソースです
<?php get_header(); ?>
<section id="main">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
?>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

27. STEP2
・PHPのプログラムは<?php から?>の中に書きましょう。
・各行の最後にセミコロン（；）を付けましょう。
・<?php ?>の外側に書いた文字はHTMLとして扱われます。
<?php
echo "Hello World!";
?>
まずPHPの大前提

28. STEP2
とあるWordPressサイトのpage.phpのソースです
<?php get_header(); ?>
<section id="main">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
?>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

29. STEP2
・もし∼だったら、∼する。が基本形
・ifの後の()には条件を書きます。
・条件は必ずtrue(真)かfalse(偽)を返します。
・条件分岐終了はendif
<?php
if (条件) :
//条件があてはまった場合（true）の処理
endif;
?>
条件分岐

30. STEP2
とあるWordPressサイトのpage.phpのソースです
<?php get_header(); ?>
<section id="main">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
?>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
条件分岐ここから
条件分岐ここまで

31. STEP2
・条件があてはまった場合(true)なら処理を繰り返します。
・条件によって繰り返される回数は変わります。
・ループ終了はendwhile
<?php
while (条件) :
//繰り返す処理
endwhile;
?>
ループ

32. STEP2
とあるWordPressサイトのpage.phpのソースです
<?php get_header(); ?>
<section id="main">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
?>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
ループ

33. STEP2
とあるWordPressサイトのpage.phpのソースです
<?php get_header(); ?>
<section id="main">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
?>
</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
★WordPressループ
テーマ作成で絶対でてきます！

34. STEP2
WordPressテンプレートタグ
<?php get_header(); ?>
コンテンツ
<?php get_sidebar(); ?>
<?php get_footer(); ?>
get_header()…header.phpを読み込む
get_sidebar()…sidebar.phpを読み込む
get_footer()…footer.phpを読み込む

35. STEP2
WordPressテンプレートタグ
<?php while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php the_content(); ?>
<?php endwhile; ?>
the_title()… 記事のタイトルを出力
the_permalink()… 記事のリンクを出力
the_content()… 記事の内容を出力
たくさんあるので続きはCodexで！
テンプレートタグ入門 - WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/テンプレートタグ入門

36. 実際に作ってみよう
STEP3
STEP3

37. オリジナルテーマ作成手法
STEP3
✓通常にコーディングしたhtmlからテンプレート化、
WPタグ埋め込みをしていく方法
✓ベーステーマを使ってカスタマイズしていく方法
✓親テーマを決めて子テーマで作成する方法

38. デザイン/HTMLとCSSのコーディング
まず最初に通常通りの工程でデザインを作りコーディングしましょう
STEP3
front-page
(TOP)
page
(固定ページ)
single
(投稿ページ)
category
(記事一覧)

39. WordPressインストール
テーマフォルダ作成
インストールは割愛（ググったらすぐ）
STEP3
ここ
コーディングしたデータをthemesフォルダにまとめていれます
フォルダ名がテーマ名になるよ

40. style.cssの記述
@charset "utf-8";
/*
Theme Name:rie05
Theme URI:http://5dg.biz/
Description:勉強用テーマ
Author:rie05
Author URI:http://5dg.biz/
Version:1.0
*/
cssファイルはstyle.cssとして下記を記述
STEP3

41. 240px×180pxでデザインのスクリーンショットを撮ってテーマフォルダ直下へ
「screenshot.jpg」として保存。
ここで使われます！
ついでに
STEP3

42. （例）index.html→front-page.php（TOPページ）
テンプレートにそって拡張子をphpへ
STEP3
phphtml
（例）about.html→about.php（固定aboutページ）
（例）detail.html→single.php（個別投稿ページ）

43. STEP3
管理画面から
外観＞テーマを
確認して、
認識されてたら
OKです

44. 最初にみんなつまずくやつ
★注意★
WordPressテーマ内の各ファイルへのパスに、相対パスは使用できません
※CSSの中は除く
テーマとして認識してるのにcssも画像パスも死んでる
STEP3

45. cssリンクパスや画像パス書き換え
<link rel="stylesheet" href="style.css" media="screen">
STEP3
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"
media="screen">
<img src="images/icon.gif">
<img src="<?php echo get_template_directory_uri(); ?>/images/
icon.gif">
cssリンクパス
画像パス

46. STEP3
共通で使うパーツは切っていく
header.php/footer.php/sidebar.php
php php php
さっき出てきたやつです！
切ったら共通部分はこれもさっき出てきた
get_header()とかで読み込ませてあげればよいです

47. STEP3
各テンプレートファイルに
必要なWPタグを入れていきます
front-
page
single page header footer
続きはCodexで！
WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/

48. STEP3
各テンプレートファイルに
必要なWPタグを入れていきます
front-
page
single page header footer
続きはCodexで！
WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/
基礎編としてはここまでで終わりです
次のセッションでもっと具体的に見れるはず

49. ✓WordPressはPHPで構成されているけどデザイナ
ーさんが触りやすいような作りだと思います
✓PHPは難しいけど少しずつ読み解けるようになると
楽しいしカスタマイズの幅が広がりまくります
✓せっかくコミュニティがあるのでそこで聞いて、せ
っかくCodexがあるので調べましょう
まとめ