Upload
kei-nomura
View
2.290
Download
0
Embed Size (px)
Citation preview
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.
ここからワークショップ
休憩後、 実際にテーマを作ってみよう!