PHPが苦手なデザイナーでもできる
簡単WordPressカスタマイズ術
12年8月31日金曜日

さわだ えり
@erilin86
フリーランスWeb屋さん
旅 / ダンス / カメラ / ゲーム
12年8月31日金曜日

12年8月31日金曜日

PHP、得意ですか？
12年8月31日金曜日

HTMLとCSSは得意。
デザインも自分で作れる。
PHPとかjsは、既存のものを設置したりカスタマイズする程度。
12年8月31日金曜日

HTMLとCSSは得意。
デザインも自分で作れる。
PHPとかjsは、既存のものを設置したりカスタマイズする程度。
そんな私が、いきなり
WordPressをはじめたキッカケ
それは。。。
12年8月31日金曜日

Wo r d P r e s s の 仕 事 を
ふられちゃったから
12年8月31日金曜日

Wo r d P r e s s の 仕 事 を
ふられちゃったから
どうしよ！
12年8月31日金曜日

個人ブログとして
「配布テーマを使う」
12年8月31日金曜日

個人ブログとして
「配布テーマを使う」
12年8月31日金曜日

レスポンシブデザイン
12年8月31日金曜日

管理画面によるカスタマイズ
カスタムヘッダー
背景画像／色
ウィジェット
12年8月31日金曜日

3.4からの新機能:カスタマイザー
12年8月31日金曜日

「自分でデザインしたい」
「仕事でオリジナルデザインの
テーマを作らなければいけない」
12年8月31日金曜日

「自分でデザインしたい」
「仕事でオリジナルデザインの
テーマを作らなければいけない」
・人が作ったデザインなんて嫌
12年8月31日金曜日

「自分でデザインしたい」
「仕事でオリジナルデザインの
テーマを作らなければいけない」
・人が作ったデザインなんて嫌
・自分でカスタマイズできるようになりたい
12年8月31日金曜日

WordPressサイト構築手順
12年8月31日金曜日

WordPressサイト構築手順
① コンテンツの整理
12年8月31日金曜日

WordPressサイト構築手順
① コンテンツの整理
② WordPress設計
12年8月31日金曜日

WordPressサイト構築手順
① コンテンツの整理
② WordPress設計
③ デザイン作成
12年8月31日金曜日

WordPressサイト構築手順
① コンテンツの整理
② WordPress設計
③ デザイン作成
④ HTML&CSSコーディング
12年8月31日金曜日

WordPressサイト構築手順
① コンテンツの整理
② WordPress設計
③ デザイン作成
④ HTML&CSSコーディング
⑤ テーマファイル作成
12年8月31日金曜日

12年8月31日金曜日

大事なのは
② WordPress設計
12年8月31日金曜日

12年8月31日金曜日

② WordPress設計
12年8月31日金曜日

② WordPress設計
投稿ページにする？
固定ページにする？
・ニュースとか時系列に並べたいコンテンツ
・基本情報が変わらない会社概要
・入れ替えがあるスタッフ紹介ページ
12年8月31日金曜日

12年8月31日金曜日

② WordPress設計
12年8月31日金曜日

② WordPress設計
カテゴリーはどうする？
・今後増えるor増えない
・子カテゴリや孫カテゴリがある
・1つの記事が複数のカテゴリに属する時がある
・カテゴリー別でデザイン変える？
12年8月31日金曜日

12年8月31日金曜日

② WordPress設計
12年8月31日金曜日

② WordPress設計
投稿フォームはそのまま？
・文章ではなくてデータを入力したい
・何か印をつけたものだけトップに表示したい
・日記の最後に今日のワンココーナーがほしい
12年8月31日金曜日

12年8月31日金曜日

シングルサイトかマルチサイト
12年8月31日金曜日

シングルサイトかマルチサイト
投稿ページか固定ページ
12年8月31日金曜日

シングルサイトかマルチサイト
投稿ページか固定ページ
共通パーツや汎用パーツのチェック
12年8月31日金曜日

シングルサイトかマルチサイト
投稿ページか固定ページ
共通パーツや汎用パーツのチェック
フォルダ名やファイル名、カテゴリ名を決める
12年8月31日金曜日

シングルサイトかマルチサイト
投稿ページか固定ページ
共通パーツや汎用パーツのチェック
フォルダ名やファイル名、カテゴリ名を決める
動的に出力するところ
12年8月31日金曜日

シングルサイトかマルチサイト
投稿ページか固定ページ
共通パーツや汎用パーツのチェック
フォルダ名やファイル名、カテゴリ名を決める
動的に出力するところ
プラグインを使うところ
12年8月31日金曜日

まずは、普段のWeb制作と同じように...
12年8月31日金曜日

まずは、普段のWeb制作と同じように...
① PhotoshopやFireworksなどでデザインを作成
12年8月31日金曜日

まずは、普段のWeb制作と同じように...
① PhotoshopやFireworksなどでデザインを作成
② エディタでいつも通りコーディング
12年8月31日金曜日

header
sidebar content
footer
12年8月31日金曜日

header
sidebar content
footer
12年8月31日金曜日

コーディング段階でブラウザチェック
12年8月31日金曜日

いよいよテーマの作成
12年8月31日金曜日

テーマの最低限ルール
必須ファイル 必須コード
/*
Theme Name: テーマ名
Theme URI: テーマの URL
Description: テーマ詳細
index.php style.css Author: テーマ作成者の名前
Author URI: テーマ作成者の URL
Template: 親テーマの定義 (オプション)
Version: バージョン番号 (オプション)
コメント／利用許諾の記述 (あれば)
*/
12年8月31日金曜日

テーマの基本セットを作っておく
index.php style.css funcions.php
12年8月31日金曜日

テンプレートタグを記述する
12年8月31日金曜日

header
sidebar content
footer
12年8月31日金曜日

header.php footer.php
sidebar.php index.php
12年8月31日金曜日

CODEXや書籍を活用
12年8月31日金曜日

条件分岐を使ってシンプルに
12年8月31日金曜日

12年8月31日金曜日

if
12年8月31日金曜日

12年8月31日金曜日

もし カテゴリーが 「アジア」 だったら
<h1>のテキストを「赤」にする
12年8月31日金曜日

もし カテゴリーが 「アジア」 だったら
<h1>のテキストを「赤」にする
もし カテゴリーが 「ヨーロッパ」 だったら
<h1>のテキストを「青」にする
12年8月31日金曜日

もし カテゴリーが 「アジア」 だったら
<h1>のテキストを「赤」にする
もし カテゴリーが 「ヨーロッパ」 だったら
<h1>のテキストを「青」にする
どちらでもなかったら
<h1>のテキストを「緑」にする
12年8月31日金曜日

苦手なものは少ない方がいい！
12年8月31日金曜日

苦手なものは少ない方がいい！
なるべくテンプレート数をふやさない
12年8月31日金曜日

スニペットを使って簡単作成
12年8月31日金曜日

12年8月31日金曜日

よく使うテンプレートタグを
カテゴリー別に登録。
ワンクリックで簡単便利！
12年8月31日金曜日

よく使うテンプレートタグを
カテゴリー別に登録。
ワンクリックで簡単便利！
<h1>WordBeachNAGOYA</h1>
<h1><?php the_title(); ?></h1>
12年8月31日金曜日

12年8月31日金曜日

でもやっぱりPHPが使えるといいね
12年8月31日金曜日

「よくわかるPHPの教科書」とか
12年8月31日金曜日

できること増えて楽しいWPライフ
12年8月31日金曜日

PHPが苦手でもカスタマイズはできます！
・WordPressで「できる」ことを覚える
・コンテンツを事前にしっかり整理
・実装前にWP設計図を考える
・テンプレートタグはコピペでOK!
・でもやっぱりPHPを少しは覚えとこ！
12年8月31日金曜日

ありがとうございました！
手羽先 モーニング スガキヤ
天むす
台湾ラーメン 味噌カツ
ベトコンラーメン
どてかつ
ひつまぶし
ころうどん
五平餅
納屋橋饅頭 シロノワール
コンパルのサンドイッチ
12年8月31日金曜日