WordBench福岡201300628

1. HTMLで作ったサイトを
WordPressに組み込んでみよう！

2. 自己紹介

3. 写真は本人ではありません。
NAME 越水 大輔
Twitter ＠ksmzdsk
Facebook Daisuke Koshimizu
フリーのWEBデザイナー（最近はコーディング中心）

4. http://kirinblog.com
ブログもやってます

5. 初参加したWordPressイベント
2011年7月 WordBench 東京 @マイクロソフト品川
WordPress 3.2のリリースパーティ
他の製作者との交流
その後

6. すぐ勉強会に参加
2011年8月 WordBench 川崎
当時のスキル
HTML、CSSが書ける。
WordPressの入門書を1冊終えた程度

7. 全然ついていけなかった。。。
親テーマ？
子テーマ？
Twenty Eleven?
テンプレートタグ知らない。。。
PHP分からない。。。
カスタマイズ経験不足。。。
発表できる内容もないし。。。
話してる内容についていけてなくて、どう質問したらいいかわからない。。。
なので、

8. 今回の対象者
2年前の私

9. 今回の対象者
2年前の私
HTML、CSSは書ける。
WordPress？
ブログ作ったりなんだか便利なんでしょ？

10. WordPress
● CMS コンテンツを管理するシステム
● カスタマイズの自由度が高い
● WEBサービス（会員制サイト）の
土台としても利用できる

11. WordPress
● CMS コンテンツを管理するシステム
● カスタマイズの自由度が高い
● WEBサービス（会員制サイト）の
土台としても利用できる
まずは、ブログ。

12. WordPress 何が便利？
コンテンツ管理

13. WordPress 何が便利？
コンテンツ管理 タグ カテゴリー

14. WordPress 何が便利？
コンテンツ管理 タグ カテゴリー
投稿ページ
固定ページ

15. WordPress 何が便利？
コンテンツ管理 タグ カテゴリー
投稿ページ 時系列
固定ページ 独立したページ

16. WordPress 何が便利？
コンテンツ管理 タグ カテゴリー
投稿ページ 時系列
固定ページ 独立したページ
管理画面

17. WordPress 何が便利？
コンテンツ管理 タグ カテゴリー プラグイン
拡張機能 SEO SNS連携 コメント機能
投稿ページ 時系列 カスタムポストタイプ
カスタムフィールド カスタムタクソノミー
固定ページ 独立したページ テンプレートタグ
カスタマイズ テンプレート化 ユーザー権限
管理画面 テーマ マルチサイト機能
などなど

18. WordPress 何が便利？
投稿ページ 時系列
固定ページ 独立したページ
まずはブログ。

19. 制作例
嫁のパンブログ yokkonopan.com

20. 定番のブログレイアウト
header
contents side
footer
<header>
.....
</header>
<section class="contents">
<article>
.....
</article>
</section>
<section class="side">
.....
</section>
<footer>

21. WordPressを使う前に
まずはHTMLとCSSがしっかり書ければOK！
HTML
（文書構造）
CSS
（見た目）

22. WordPressのインストール
ロリポップとかヘテムルの簡単インストールが便利

23. WordPressの表示
大きく分けて2種類
通常のサイト表示 管理画面
（ログイン後）

24. テーマの切り替え
管理画面
外観＞テーマ
自由にテーマの切り
替えができます。

25. テーマをアップロードする
最低限のファイル
index.php
style.css
サムネ画像
/*
Theme Name: Yokkono-pan
Description: WordPress theme.
Theme URI: http://kirinblog.com/
Author: Daisuke Koshimizu
Author URI: http://kirinblog.com/
Version: 1.0.1
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, right-sidebar, two-columns
*/

26. テーマをアップする場所

27. テーマの変更をしてみる。
画像などが表示されない場合。下記をチェック
● CSSのパスが通ってない。
● imgのパスが通ってない。

28. テーマの変更をしてみる。
画像などが表示されない場合。下記をチェック
● CSSのパスが通ってない。
● imgのパスが通ってない。
ここから実際にファイルを変更してみる。

29. index.phpの切り分け
header.php → <?php get_header(); ?>
sidebar.php → <?php get_sidebar(); ?>
footer.php → <?php get_footer(); ?>
メンテナンスの省力化
1つのファイルを修正すればOK!

30. WordPressのタグを使う
<?php echo get_template_directory_uri(); ?>
使用テーマフォルダのURLを出力
imgのパスを通したりするときに使う。

31. WordPressのタグを使う
<?php echo get_stylesheet_directory_uri(); ?>
使用テーマのスタイルシートへのパス

32. WordPressのタグを使う
<?php bloginfo('name'); ?>
管理画面で設定したブログタイトルを出力。
<title><?php bloginfo('name'); ?></title> とかで使う。

33. WordPressのタグを使う
<?php bloginfo('description'); ?>
管理画面で設定したキャッチフレーズを出力。
メタタグとかで使う。

34. WordPressのタグを使う
<?php the_title(); ?>
記事タイトルを出力。
<h1><?php the_title(); ?></h1> とか

35. WordPressのタグを使う
<?php the_content(); ?>
記事内容を出力。

36. WordPressの記事を読み込む
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php endwhile; endif; ?>
記事をあるだけループして出力する。

37. 大事なポイント
なにはともあれHTMLとCSSをしっかり書く！
HTML
（文書構造）
CSS
（見た目）

38. 大事なポイント
なにはともあれHTMLとCSSをしっかり書く！
HTML
（文書構造）
CSS
（見た目）
あとは少し記述をWordPressのタグに置き換える
だけでいい。

39. ほら、もう怖くない

40. もう・・・怖くないぜ・・？
（使いたかっただけ）

41. 入門学習におすすめのテーマ
WordPressテーマ ”doshirouto”
http://toyao.
net/xoops/modules/wordpress/archives/5664
● 非公式だけど超シンプル！
● 日本語での分かりやすいコメント盛りだくさん！

42. 書籍
なぞっていけばとりあえずサイトが作れる。
WordPressで出来ることの概要がつかめる。

43. 少しずつステップアップすればいい！

44. という2年前の自分へのメッセージ

45. ありがとうございました