SlideShare a Scribd company logo
ノンプログラミングWebデザイナーが
WordPressを
おぼえるために
やったこと
∼ 巨人の肩にのってみた!∼
Mignon Style
みにょん すたいる
Webデザイナー
Mignon Style
みにょん すたいる
いまい みずえ
WordPress公式ディレクトリ テーマ「Chocolat」
プラグイン「MS Custom Login」デベロッパー
WordPressスターターテーマ「_s」コントリビューター
http://mignonstyle.com/
@mignon_style
mignonxstyle
https://profiles.wordpress.org/mignonstyle
Adobe Bracketsの
WordPress用コードヒントも作ってます!
2013年
7月
なんか
「 WordPress」が
いいらしい!!
WordPressって
ナニ?
どうしてブログで
コーポレートサイトが
できるの?
PHPって
JavaScriptと
どう違うの?
なんで?って書くの?!
とりあえず初心者向けの
本を買ってみた
WordPressの投稿を
表示するのはPHPだけど
デザイン作るのはCSSだから
静的サイトと同じかも
少し
わかってきた
わかってきたら
やりたいことが
でてきた
一覧を
ランダムに
表示したい
日付の
表示方法を
変えたい
もっと
カスタマイズ
したい
自分の
好きなように
つくりたい
わからないことが
いっぱい!!
WordPress
日本語
フォーラム?
フォーラムをのぞいてみた
Codex
読んで
ください
フォーラム
こわい!!
WordPress
Codex
日本語版?
Codexをのぞいてみた
パラメータ?
オフセット?
返り値?
フック?
WP_Query?
グローバル
変数?
Codex
難しい!!
わからない
テンプレートタグは
Codexで調べよう
難しいけど少し
わかってきた
わかってきたら
やりたいことが
もっとでてきた
簡単に
設定できる
ようにしたい
オプション
ページ
つくりたい
オリジナルの
ウィジェット
つくりたい
自分の
好きなの
つくりたい
テーマって誰でも
登録できるの?!
私も
やりたい!!
2014年
5月
Chocolat
WordPress
公式ディレクトリ
登録
テーマ「 Chocolat 」 https://ja.wordpress.org/themes/chocolat/
Active
Installs
4,000+
初日だけで
500ダウン
ロードover
選べる
ヘッダー
画像
スターが
もらえると
励みに!!
オリジナルの
ウィジェット
サムネイル
付きの
新着記事
サイドバーの
位置も
選べる
アドセンスの
表示
ウィジェットは
思ったより
簡単!!
オプション
ページ
パンくず
リストの
表示
スライダーの
実装
可変
グリッド
レイアウトに
対応
カスタ
マイザーに
修正中!!
覚えたことが
全部つまってます
タダなのになんで
テーマ登録してんの?
・・・・・
面白そう
だから!!
PHPも知らない
Webデザイナーが
気づいたら
巨人の肩に
のってました
知らないことが
まだまだ
たくさんあるけれど
小さな一歩を
踏み出そう
やってみよう!!

More Related Content

What's hot

文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
 
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshareWord camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
 
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
Eri Sawada
 

What's hot (20)

WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろうWordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
 
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'ParkWordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
 
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
 
WordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップWordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップ
 
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしようメニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
 
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
 
WordPressってこんなCMS
WordPressってこんなCMSWordPressってこんなCMS
WordPressってこんなCMS
 
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D WeekズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
 
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作るBootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
 
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
 テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
 
一歩踏み込むWordPress
一歩踏み込むWordPress一歩踏み込むWordPress
一歩踏み込むWordPress
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
 
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 UnderScoreとbootstrapとsassでword pressのテーマをつくろう UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
 
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshareWord camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
 
WooCommerce & AWS
WooCommerce & AWSWooCommerce & AWS
WooCommerce & AWS
 
Dreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowToDreamweaver
コードヒントHowTo
Dreamweaver
コードヒントHowTo
 
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
 

Viewers also liked

[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
masashi takehara
 
osoljp201105_ZFSjiman_nslope
osoljp201105_ZFSjiman_nslopeosoljp201105_ZFSjiman_nslope
osoljp201105_ZFSjiman_nslope
Noriyasu Sakaue
 
第2回 Jenkins勉強会 LT 藤川
第2回 Jenkins勉強会 LT 藤川第2回 Jenkins勉強会 LT 藤川
第2回 Jenkins勉強会 LT 藤川
Koichi Fujikawa
 
NetBeans plugin for wordpress
NetBeans plugin for wordpressNetBeans plugin for wordpress
NetBeans plugin for wordpress
Junichi Yamamoto
 
コンピュータの構成と設計 第3版 第2章 勉強会資料
コンピュータの構成と設計 第3版 第2章 勉強会資料コンピュータの構成と設計 第3版 第2章 勉強会資料
コンピュータの構成と設計 第3版 第2章 勉強会資料
futada
 

Viewers also liked (17)

[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
 
スケジュール表解体新書 - 自閉症の子どもの視覚支援
スケジュール表解体新書 - 自閉症の子どもの視覚支援スケジュール表解体新書 - 自閉症の子どもの視覚支援
スケジュール表解体新書 - 自閉症の子どもの視覚支援
 
グローバル時代に求められるキャリアと生き方(梶山さん)
グローバル時代に求められるキャリアと生き方(梶山さん)グローバル時代に求められるキャリアと生き方(梶山さん)
グローバル時代に求められるキャリアと生き方(梶山さん)
 
夏の暑さに耐えられるか
夏の暑さに耐えられるか夏の暑さに耐えられるか
夏の暑さに耐えられるか
 
osoljp201105_ZFSjiman_nslope
osoljp201105_ZFSjiman_nslopeosoljp201105_ZFSjiman_nslope
osoljp201105_ZFSjiman_nslope
 
第2回 Jenkins勉強会 LT 藤川
第2回 Jenkins勉強会 LT 藤川第2回 Jenkins勉強会 LT 藤川
第2回 Jenkins勉強会 LT 藤川
 
20140822 営業の泥臭い話 dev_love現場甲子園2014西日本大会懇親会lt
20140822 営業の泥臭い話 dev_love現場甲子園2014西日本大会懇親会lt20140822 営業の泥臭い話 dev_love現場甲子園2014西日本大会懇親会lt
20140822 営業の泥臭い話 dev_love現場甲子園2014西日本大会懇親会lt
 
NetBeans plugin for wordpress
NetBeans plugin for wordpressNetBeans plugin for wordpress
NetBeans plugin for wordpress
 
HTML5のAPI群をただひたすらに触ってみた記録
HTML5のAPI群をただひたすらに触ってみた記録HTML5のAPI群をただひたすらに触ってみた記録
HTML5のAPI群をただひたすらに触ってみた記録
 
Contact form 7レイアウト編集
Contact form 7レイアウト編集Contact form 7レイアウト編集
Contact form 7レイアウト編集
 
プログラマとデザイナで時計を作るVisual studioハッカソン ~ TDDの考え方を開発全体に応用してみよう!
プログラマとデザイナで時計を作るVisual studioハッカソン ~ TDDの考え方を開発全体に応用してみよう!プログラマとデザイナで時計を作るVisual studioハッカソン ~ TDDの考え方を開発全体に応用してみよう!
プログラマとデザイナで時計を作るVisual studioハッカソン ~ TDDの考え方を開発全体に応用してみよう!
 
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考えるテーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
 
コンピュータの構成と設計 第3版 第2章 勉強会資料
コンピュータの構成と設計 第3版 第2章 勉強会資料コンピュータの構成と設計 第3版 第2章 勉強会資料
コンピュータの構成と設計 第3版 第2章 勉強会資料
 
WordCamp Tokyo 2016から WordCamp Tokyo 2017へ
WordCamp Tokyo 2016から WordCamp Tokyo 2017へWordCamp Tokyo 2016から WordCamp Tokyo 2017へ
WordCamp Tokyo 2016から WordCamp Tokyo 2017へ
 
JenkinsとjMeterで負荷テストの自動化
JenkinsとjMeterで負荷テストの自動化JenkinsとjMeterで負荷テストの自動化
JenkinsとjMeterで負荷テストの自動化
 
Understanding Underscores 〜「_s」テーマってなんだろう〜
Understanding Underscores 〜「_s」テーマってなんだろう〜Understanding Underscores 〜「_s」テーマってなんだろう〜
Understanding Underscores 〜「_s」テーマってなんだろう〜
 
WordPressでサイト作成するときに知っておくといいことあれこれ
WordPressでサイト作成するときに知っておくといいことあれこれWordPressでサイト作成するときに知っておくといいことあれこれ
WordPressでサイト作成するときに知っておくといいことあれこれ
 

Similar to ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜

テーマカスタマイズ入門~バレンタインまでに子テーマをつくろう~ 2
テーマカスタマイズ入門~バレンタインまでに子テーマをつくろう~ 2テーマカスタマイズ入門~バレンタインまでに子テーマをつくろう~ 2
テーマカスタマイズ入門~バレンタインまでに子テーマをつくろう~ 2
Susumu Seino
 
2013 wordcamptokyo初心者keynote
2013 wordcamptokyo初心者keynote2013 wordcamptokyo初心者keynote
2013 wordcamptokyo初心者keynote
Takahiro Nakahata
 
僕がwordpressを選んだ理由
僕がwordpressを選んだ理由僕がwordpressを選んだ理由
僕がwordpressを選んだ理由
jsugiyama
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
 
Sa css vol.43 プレゼン資料
Sa css vol.43 プレゼン資料Sa css vol.43 プレゼン資料
Sa css vol.43 プレゼン資料
kuma_hati
 

Similar to ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜 (20)

どうしてこうなったWordPress
どうしてこうなったWordPressどうしてこうなったWordPress
どうしてこうなったWordPress
 
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
 
テーマカスタマイズ入門~バレンタインまでに子テーマをつくろう~ 2
テーマカスタマイズ入門~バレンタインまでに子テーマをつくろう~ 2テーマカスタマイズ入門~バレンタインまでに子テーマをつくろう~ 2
テーマカスタマイズ入門~バレンタインまでに子テーマをつくろう~ 2
 
日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜
日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜
日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜
 
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶWord press初心者が 基本アーキテクチャを ざっくりと学ぶ
Word press初心者が 基本アーキテクチャを ざっくりと学ぶ
 
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyoWordPress公式ディレクトリにテーマを登録しよう #wctokyo
WordPress公式ディレクトリにテーマを登録しよう #wctokyo
 
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
 
私のWordPress勉強法
私のWordPress勉強法私のWordPress勉強法
私のWordPress勉強法
 
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンWord pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
 
2013 wordcamptokyo初心者keynote
2013 wordcamptokyo初心者keynote2013 wordcamptokyo初心者keynote
2013 wordcamptokyo初心者keynote
 
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
PHPとか よくわかんない系WEBデザイナーでもShifterでいろいろできたよ!というお話。
 
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンWordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
 
Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用
 
僕がwordpressを選んだ理由
僕がwordpressを選んだ理由僕がwordpressを選んだ理由
僕がwordpressを選んだ理由
 
10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法10/12 WordBench神戸 WordPressの学習方法
10/12 WordBench神戸 WordPressの学習方法
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?
 
WordPress 運用前の初期設定
WordPress 運用前の初期設定WordPress 運用前の初期設定
WordPress 運用前の初期設定
 
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
 
Sa css vol.43 プレゼン資料
Sa css vol.43 プレゼン資料Sa css vol.43 プレゼン資料
Sa css vol.43 プレゼン資料
 
小,中規模WEBサイト 制作でAWSを使う
小,中規模WEBサイト 制作でAWSを使う小,中規模WEBサイト 制作でAWSを使う
小,中規模WEBサイト 制作でAWSを使う
 

ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜