WordBench Nagoya 2015年3月勉強会

This work by ozone notes is licensed under a CC BY-SA 3.0.

WordBench Nagoya 2015年3月勉強会

ozone notes 野村 圭 (@mypacecreator)

静的HTMLファイルからWordPressブログを作ってみよう -『WordPress標準デザイン講座 Version4.x対応』出版記念企画-

This work by ozone notes is licensed under a CC BY-SA 3.0.

『WordPress標準デザイン講座 Version4.x対応』

‣石原さんと2人で書きました ‣小田島さん＆ベクトルのみなさんにも寄稿いただきました ‣翔泳社さんより2015/2/27 刊行 ‣定価：2,680円＋税 ‣ Kindle版もあるっぽいです

This work by ozone notes is licensed under a CC BY-SA 3.0.

本書の想定ターゲット（ウラ話含む）

‣実は、趣味ではなく職業として日常的にWeb制作をする人向け（と、担当の編集さんに最初に打診されました）

‣HTML+CSSでの基本的なWebサイト制作の経験がある方

‣WordPress自体を一度は触ったことのある方 （記事の書き方や管理画面の詳細な説明は割愛してます）

…「入門書」と謳ってますが、 　結構、高度な内容も扱っています

This work by ozone notes is licensed under a CC BY-SA 3.0.

今日のアジェンダ

‣グループ分け（5人くらいずつのチームを作ります）

‣WordPressを触り始める前にやっておいたほうがよいこと（約30分 担当・野村）

‣ワークショップ：サンプルサイトからWordPressブログのテーマを作る（約90分 担当・石原）

‣個別の質問タイム（約30分）

This work by ozone notes is licensed under a CC BY-SA 3.0.

WordPressを触り始める前に…

‣テキストエディタの設定を整えよう！

‣デバッグモードを有効化しよう！

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

WordPress（に限らずWeb制作全般）においては

•Windowsに最初から入っている「メモ帳」 •Macに最初から入っている「テキストエディット」

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

WordPress（に限らずWeb制作全般）においては

•Windowsに最初から入っている「メモ帳」 •Macに最初から入っている「テキストエディット」×

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

メモ帳やテキストエディットがダメな理由

•文字コードで「UTF-8 BOMなし」を選べない •全角スペースと半角スペースなど紛らわしいタイプミスに気づきにくい

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

有名なエディタの例

‣TeraPad ‣サクラエディタ ‣秀丸エディタ ‣Notepad++ ‣EmEditor ‣Sublime Text ‣NetBeans IDE ‣Aptana Studio

‣Brackets ‣Coda ‣mi ‣ Liveweave ‣PhpStorm ‣Eclipse ‣Emacs ‣Vim

などなど・・・

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

とりあえず今日何を使ったらよいか分からない方は

Windowsの方 Macの方

Mery CotEditor

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

エディタの設定で大事なことは・・・

不可視文字を 表示させる！

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

不可視文字とは・・・

•スペース •タブ •改行 ・・・など、目に見えない文字のこと

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

この中に全角スペースが紛れています！

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

この中に全角スペースが紛れています！

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

•各エディタごとの不可視文字表示方法は、ヘルプを見たりおぐぐりください •HTMLやCSSの編集でもこの設定は役立つこと間違いなし •不可視文字を表示できないエディタは今すぐ乗り換えましょう（個人の感想）

This work by ozone notes is licensed under a CC BY-SA 3.0.

テキストエディタの設定を整えよう！

不可視文字の表示 !

制作者としての心得＝

This work by ozone notes is licensed under a CC BY-SA 3.0.

WordPressコーディングで大事なことは・・・

デバッグモードを 有効化する！

デバッグモードを有効化しよう！

This work by ozone notes is licensed under a CC BY-SA 3.0.

デバッグモードを有効化しよう！

例えば記述をミスった時に・・・

※PHP内に全角スペースが入っている

This work by ozone notes is licensed under a CC BY-SA 3.0.

デバッグモードを有効化しよう！

This work by ozone notes is licensed under a CC BY-SA 3.0.

デバッグモードを有効化しよう！

驚きの白さ

This work by ozone notes is licensed under a CC BY-SA 3.0.

デバッグモードを有効化しよう！

wp-config.php ファイル

←ココ

This work by ozone notes is licensed under a CC BY-SA 3.0.

デバッグモードを有効化しよう！

wp-config.php ファイル

←trueに書き換える

This work by ozone notes is licensed under a CC BY-SA 3.0.

デバッグモードを有効化しよう！

This work by ozone notes is licensed under a CC BY-SA 3.0.

デバッグモードを有効化しよう！

↑ どこを間違えているのか

ヒントをくれる

This work by ozone notes is licensed under a CC BY-SA 3.0.

デバッグモードを有効化しよう！

主なPHPエラー文の意味

This work by ozone notes is licensed under a CC BY-SA 3.0.

エラー文を見極める !

制作者としての嗜み＝

デバッグモードを有効化しよう！

This work by ozone notes is licensed under a CC BY-SA 3.0.

WordPressを触り始める前に…のまとめ

‣テキストエディタの設定を整えよう！

‣デバッグモードを有効化しよう！

（大事なことなので2回めです）

This work by ozone notes is licensed under a CC BY-SA 3.0.

WordPressテーマの構成

‣WordPressテーマに必要なファイル

‣必要に応じて追加するファイル

This work by ozone notes is licensed under a CC BY-SA 3.0.

WordPressに必要なファイル

Twenty Fifteenテーマの中身

めっちゃ ある

This work by ozone notes is licensed under a CC BY-SA 3.0.

WordPressに必要なファイル

あきらめないで！

This work by ozone notes is licensed under a CC BY-SA 3.0.

WordPressに必要なファイル

ほんとうに必要なのはこの2枚だけ

index.php!と style.css

This work by ozone notes is licensed under a CC BY-SA 3.0.

WordPressに必要なファイル

2枚あれば [外観]→[テーマ]に出る！

This work by ozone notes is licensed under a CC BY-SA 3.0.

必要に応じて追加するファイル

•テーマのスクリーンショット •メインテンプレートファイル •インクルードファイル •テーマ関数ファイル

This work by ozone notes is licensed under a CC BY-SA 3.0.

必要に応じて追加するファイル

•テーマのスクリーンショット •メインテンプレートファイル •インクルードファイル •テーマ関数ファイル

時間の制約上、詳細は割愛

This work by ozone notes is licensed under a CC BY-SA 3.0.

ココでポイント！

index.php!

!

トップページ＝

This work by ozone notes is licensed under a CC BY-SA 3.0.

ココでポイント！

index.php!

!

トップページ＝×

This work by ozone notes is licensed under a CC BY-SA 3.0.

ココでポイント！

index.php

他に当てはまるファイルがなかった時に、最後に適用

されるファイル＝

This work by ozone notes is licensed under a CC BY-SA 3.0.

ココでポイント！

条件によってどの名前のファイルが呼ばれるか決まっている

This work by ozone notes is licensed under a CC BY-SA 3.0.

ファイルの適用順位 !

テンプレート階層＝

ココでポイント！

今日は1枚しか作らないので、扱いません

This work by ozone notes is licensed under a CC BY-SA 3.0.

ここからワークショップ

休憩後、 実際にテーマを作ってみよう！