Submit Search
Upload
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
•
28 likes
•
20,230 views
Takashi Uemura
Follow
WordPressのデフォルトテーマTwenty Fourteenをカスタマイズした超簡単テーマdoshirouto2014を作りました。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 67
Download now
Download to read offline
Recommended
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
WordPressテーマ作成
WordPressテーマ作成
Takami Kazuya
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Keisuke Imura
What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6
Takashi Uemura
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
Hitsuji
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回
Hitsuji
Recommended
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
WordPressテーマ作成
WordPressテーマ作成
Takami Kazuya
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Twenty Fourteen徹底解剖! ~デフォルトテーマに学ぶ今ドキテーマの作り方~
Keisuke Imura
What's new! TwentyThirteen + WordPress3.6
What's new! TwentyThirteen + WordPress3.6
Takashi Uemura
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
Hitsuji
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回
Hitsuji
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第7回
Hitsuji
Word press34
Word press34
BREN
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
Hitsuji
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
Hitsuji
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Takashi Uemura
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
muracchi
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
hokori matu
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
子テーマを使ったサイト制作
子テーマを使ったサイト制作
shimoyama kengo
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Takashi Uemura
Wp html5
Wp html5
regret raym
WordPress基礎講座5 テーマ作成基礎知識
WordPress基礎講座5 テーマ作成基礎知識
Akinori Kawamitsu
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
WordPress オリジナルテーマを作ろう!
WordPress オリジナルテーマを作ろう!
Yusuke Hayasaki
「WordPress事例の徹底解説」
「WordPress事例の徹底解説」
Takashi Hosoya
More Related Content
What's hot
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第7回
Hitsuji
Word press34
Word press34
BREN
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
Hitsuji
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
Hitsuji
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Takashi Uemura
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
muracchi
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
hokori matu
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
子テーマを使ったサイト制作
子テーマを使ったサイト制作
shimoyama kengo
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Takashi Uemura
Wp html5
Wp html5
regret raym
WordPress基礎講座5 テーマ作成基礎知識
WordPress基礎講座5 テーマ作成基礎知識
Akinori Kawamitsu
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
What's hot
(20)
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第7回
Word press34
Word press34
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
ブログの枠を超える?ためのWordPressカスタマイズ入門
ブログの枠を超える?ためのWordPressカスタマイズ入門
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
WordPressとjQuery
WordPressとjQuery
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress 3.2の新機能& 新デフォルトテーマ Twenty Eleven 大解剖!
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
子テーマを使ったサイト制作
子テーマを使ったサイト制作
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Wp html5
Wp html5
WordPress基礎講座5 テーマ作成基礎知識
WordPress基礎講座5 テーマ作成基礎知識
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
マークアップ講座 01b HTML
マークアップ講座 01b HTML
Viewers also liked
WordPress オリジナルテーマを作ろう!
WordPress オリジナルテーマを作ろう!
Yusuke Hayasaki
「WordPress事例の徹底解説」
「WordPress事例の徹底解説」
Takashi Hosoya
WordPressをCMSとして利用するために便利なWP SiteManagerについて
WordPressをCMSとして利用するために便利なWP SiteManagerについて
Tsuyoshi.
HTMLで作ったサイトをWordPressに組み込んでみよう!
HTMLで作ったサイトをWordPressに組み込んでみよう!
Daisuke Koshimizu
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
Kohei Kadowaki
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
Katz Ueno
マジカルドリームライトを制御してみた @ni_gata
マジカルドリームライトを制御してみた @ni_gata
Ni-gata Supika
WordPress
WordPress
Eleanor Trinidad
【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション
【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション
Aimi Sata
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
Shinichi Nishikawa
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
Mignon Style
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
Kazue Igarashi
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
超高速WordPress
超高速WordPress
Kengyu Nakamura
第11回ゼロから始めるWordPress勉強会
第11回ゼロから始めるWordPress勉強会
kenji goto
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
Katz Ueno
Viewers also liked
(16)
WordPress オリジナルテーマを作ろう!
WordPress オリジナルテーマを作ろう!
「WordPress事例の徹底解説」
「WordPress事例の徹底解説」
WordPressをCMSとして利用するために便利なWP SiteManagerについて
WordPressをCMSとして利用するために便利なWP SiteManagerについて
HTMLで作ったサイトをWordPressに組み込んでみよう!
HTMLで作ったサイトをWordPressに組み込んでみよう!
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
マジカルドリームライトを制御してみた @ni_gata
マジカルドリームライトを制御してみた @ni_gata
WordPress
WordPress
【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション
【WordCamp Kansai 2014】WordPressで実制作までまるっとHAPPY!フリーランスママの愛されディレクション
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
JAWS FESTA Tohoku 2014 WordPressとAWSの素敵な関係
WordPressってブログじゃないの?
WordPressってブログじゃないの?
超高速WordPress
超高速WordPress
第11回ゼロから始めるWordPress勉強会
第11回ゼロから始めるWordPress勉強会
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
Similar to WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
第18回WordBench大阪【2013年6月23日】
第18回WordBench大阪【2013年6月23日】
rie05
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
Eri Sawada
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
Takashi Uemura
新デフォルトテーマTwentyTen を理解しよう
新デフォルトテーマTwentyTen を理解しよう
Yoshitaka KATO
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Atsushi Ando
テーマ作成のアプローチ
テーマ作成のアプローチ
Seto Takahiro
WordBench熊本第3回勉強会
WordBench熊本第3回勉強会
Akinori Tateyama
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
tamotsu toyoda
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
Tsuyoshi.
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
Akinori Tateyama
WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識
WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識
kenji goto
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
Takashi Uemura
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
takashi ono
WordPress 運用前の初期設定
WordPress 運用前の初期設定
Shigeki Takai
33
33
Shiho Sue
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
switch3000
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
Similar to WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
(20)
第18回WordBench大阪【2013年6月23日】
第18回WordBench大阪【2013年6月23日】
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
新デフォルトテーマTwentyTen を理解しよう
新デフォルトテーマTwentyTen を理解しよう
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
テーマ作成のアプローチ
テーマ作成のアプローチ
WordBench熊本第3回勉強会
WordBench熊本第3回勉強会
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPressをカスタマイズするなら知っておきたいこと~テンプレート階層~
WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識
WordPress ブラウザで始めるカスタマイズ+ テーマの基礎的な知識
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
WordPress 運用前の初期設定
WordPress 運用前の初期設定
33
33
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
More from Takashi Uemura
WordPressを10年以上触ってきたオレがこのへんでひとこと言っておくか
WordPressを10年以上触ってきたオレがこのへんでひとこと言っておくか
Takashi Uemura
さくらのナレッジ5周年ナイトLT
さくらのナレッジ5周年ナイトLT
Takashi Uemura
WAFって言いたいだけちゃうんか
WAFって言いたいだけちゃうんか
Takashi Uemura
アイドル画像ギャラリーサイトを作ったあとどうなったか
アイドル画像ギャラリーサイトを作ったあとどうなったか
Takashi Uemura
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
Takashi Uemura
神戸のアイドルKOBerrieS♪の画像ギャラリーサイトを作った話
神戸のアイドルKOBerrieS♪の画像ギャラリーサイトを作った話
Takashi Uemura
20140214 さくらインターネットハンズオン@大阪 WordPressを始めよう
20140214 さくらインターネットハンズオン@大阪 WordPressを始めよう
Takashi Uemura
WordPressの使えるプラグイン2013
WordPressの使えるプラグイン2013
Takashi Uemura
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介
Takashi Uemura
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
Takashi Uemura
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
Takashi Uemura
20121124 学生セミナー「基礎からわかる! IT業界とプログラミング」
20121124 学生セミナー「基礎からわかる! IT業界とプログラミング」
Takashi Uemura
WordCampOsaka2012 闇WordCamp XOOPS編
WordCampOsaka2012 闇WordCamp XOOPS編
Takashi Uemura
WordCampOsaka2012 WordPressあるある
WordCampOsaka2012 WordPressあるある
Takashi Uemura
VPS借りたけどセキュリティが心配! 初心者が気をつけたいセキュリティの話
VPS借りたけどセキュリティが心配! 初心者が気をつけたいセキュリティの話
Takashi Uemura
jQueryで作るカスタム投稿の画像スライダーライブラリ
jQueryで作るカスタム投稿の画像スライダーライブラリ
Takashi Uemura
CMS時代のバックアップノウハウを身につけよう!
CMS時代のバックアップノウハウを身につけよう!
Takashi Uemura
Xamppでお手軽cms開発環境を手に入れる
Xamppでお手軽cms開発環境を手に入れる
Takashi Uemura
20100116 02 同一カテゴリの投稿を一覧表示する
20100116 02 同一カテゴリの投稿を一覧表示する
Takashi Uemura
20100116 01 Word Pressテンプレートのカスタマイズ&Xml出力
20100116 01 Word Pressテンプレートのカスタマイズ&Xml出力
Takashi Uemura
More from Takashi Uemura
(20)
WordPressを10年以上触ってきたオレがこのへんでひとこと言っておくか
WordPressを10年以上触ってきたオレがこのへんでひとこと言っておくか
さくらのナレッジ5周年ナイトLT
さくらのナレッジ5周年ナイトLT
WAFって言いたいだけちゃうんか
WAFって言いたいだけちゃうんか
アイドル画像ギャラリーサイトを作ったあとどうなったか
アイドル画像ギャラリーサイトを作ったあとどうなったか
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
WordPressのテンプレートをカスタマイズするために必要なphpを初歩から解説
神戸のアイドルKOBerrieS♪の画像ギャラリーサイトを作った話
神戸のアイドルKOBerrieS♪の画像ギャラリーサイトを作った話
20140214 さくらインターネットハンズオン@大阪 WordPressを始めよう
20140214 さくらインターネットハンズオン@大阪 WordPressを始めよう
WordPressの使えるプラグイン2013
WordPressの使えるプラグイン2013
WordPress 多言語化プラグインqTranslateの紹介
WordPress 多言語化プラグインqTranslateの紹介
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
WordPress初心者からの脱出! カスタムなんとかをちゃんと理解する
20121124 学生セミナー「基礎からわかる! IT業界とプログラミング」
20121124 学生セミナー「基礎からわかる! IT業界とプログラミング」
WordCampOsaka2012 闇WordCamp XOOPS編
WordCampOsaka2012 闇WordCamp XOOPS編
WordCampOsaka2012 WordPressあるある
WordCampOsaka2012 WordPressあるある
VPS借りたけどセキュリティが心配! 初心者が気をつけたいセキュリティの話
VPS借りたけどセキュリティが心配! 初心者が気をつけたいセキュリティの話
jQueryで作るカスタム投稿の画像スライダーライブラリ
jQueryで作るカスタム投稿の画像スライダーライブラリ
CMS時代のバックアップノウハウを身につけよう!
CMS時代のバックアップノウハウを身につけよう!
Xamppでお手軽cms開発環境を手に入れる
Xamppでお手軽cms開発環境を手に入れる
20100116 02 同一カテゴリの投稿を一覧表示する
20100116 02 同一カテゴリの投稿を一覧表示する
20100116 01 Word Pressテンプレートのカスタマイズ&Xml出力
20100116 01 Word Pressテンプレートのカスタマイズ&Xml出力
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
1.
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう! 2014.3.8 WordBench神戸 上村崇 @uemera Photo by
SalFalko
2.
最近のオレ @uemera uemura 兵庫県西宮市在住。 フリーランスのシステムエンジニアです。 WordBench神戸でよく喋ってます。 勉強会など WordPress phpでの開発 ・FuelPHP ・Linuxサーバー系もやります
3.
このプレゼンでは WordPressのテーマのしくみを 初心者にも分かるように解説します。 テーマを理解すればどういうメリットがあるの? ・自分のオリジナルテーマを作ることができます。 ・WordPressへの苦手意識が無くなります。 ・phpが少し分かるようになります。 !
4.
2013年5月、Twenty Thirteenをベースにしたテーマ "doshirouto"を公開しました。
5.
Twenty Ten 2010 デフォルトテーマの変遷 Twenty Eleven 2011 Twenty
Twelve 2012 Twenty Thirteenをベースに doshiroutoを作成 Twenty Thirteen 2013 Twenty Fourteen 2014 Twenty Fourteenをベース にdoshirouto2014を作成
6.
最新バージョンWordPress3.8.1に同梱されているデフォルトテーマ Twenty Fourteen とぅえんてぃふぉーてぃーん
7.
最新バージョンWordPress3.8.1に同梱されているデフォルトテーマ Twenty Fourteen とぅえんてぃふぉーてぃーん Twenty Fourteenの特徴: ・レスポンシブデザインを採用しています。 ・Automattic社
入江隆さんによるマガジンスタイルなデザイン ・アイコンフォントGenericonsを採用して見た目が分かりやすくなりました。 ・Twenty Fourteen短冊ウィジェットで、投稿の一覧が表示できます。 ・フロントページにタイル状の画像やスライダーを設置できる「おすすめコンテンツ」 ・3カラムにできます。 ・Lato 欧文タイプフェイスの採用
8.
マガジンスタイルとは 雑誌を読んでいる感覚を、Webサイトに応用したもの。 画像入りの記事がタイル上に並びます。
9.
LATOフォント
10.
しかし、バージョンアップにともなって、WordPressの デフォルトテーマはどんどん難しくなってきています。 例: スタイルシートファイルへのリンクがどこに書いてあるか分からない header.php テーマのヘッダ部分にあたるheader.phpには当然下のようなcssファイル へのリンクがあるものと思ったけど… header.phpには見つかりません。 <head> <link
rel="stylesheet" type="text/css" href="http://.../style.css"> </head> しかし実際は... functions.php header.phpではなく、php処理ばかりが書かれているfunctions.phpと いうファイルに、関数呼び出しの形で書かれています。 wp_enqueue_style( 'twentyfourteen-‐style', get_stylesheet_uri(), array( 'genericons' ) ); これでは初心者はcssファイルを探せないし、編集することもままならない!
11.
例:ページナビ部分の<h1>を削除したくても、 どのファイルを編集していいか分からない! この<h1>タグを削除したい!
12.
Twenty Fourteenのindex.phpを見ても <h1>タグなんて見当たらない!
13.
実際は twentyfourteen/inc/template-‐tags.php の twentyfourteen_paging_nav()関数内という、 php満載の処理内にhtmlが書いてあります。
14.
WordPressはイノベーションのジレンマに陥ってるのかも知れません。 高機能化・複雑化が入門者の間口を狭めている可能性があります。 230000 ステップ数 197500 165000 132500 このままでは初心者の手に負えないツールになってしまう! 100000 3.0 3.1 3.2 3.3 3.4 3.5 バージョン 3.6 WordPressの各バージョンにおける 全ソースのphpステップ数(行数) (themeファイルを除く) 3.7 3.8
15.
そこで WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作りました。 「WordPressの常識をくつがえす」とは?
16.
doshirouto2014の特徴(1) 日本語しか理解できないオレたち。 ➔ 英語のサイトを開設する予定などさらさらないので、多言語化対応無し。 WordPressユーザーにIE使ってる人なんていないよね。 ➔ 古いバージョンのIE対応なし(IE9以降はOK)。 Google先生に頼るばかりの人生でいいんですか? ➔
競争社会とは無縁。SEOは無視。ブログは口コミで広めよう。 新しい機能なんて使いこなせない、マジ無理。 ➔ カスタムヘッダー機能なんて使ってないし削除。 ➔ 読めればいいので、おしゃれなWebフォントなんて必要ない必要ない。 ➔ オレだけ(私だけ)が使えればいいので汎用性なし、拡張性なし。 過去はふりかえらない主義 ➔ 古いバージョンのWordPressは対応せず。互換性の考慮なし。 (Version3.8以降)。
17.
doshirouto2014の特徴(2) WordPressって言ったらCMSだろ! ➔ いいえブログです。原点に戻ってください。 デフォルトのテーマってなんであんなにファイルが多いの!? ➔ 必要最低限のファイルだけに絞りこみました。 テーマファイルの中身って、なんであんなに記号ばっかりなの? 見ると目まいがするんだけど。 ➔
日本語のコメントをできるだけたくさん入れてコードを読みやすくしました。 WordPress用語(テンプレートタグ)についての解説を入れました。 では実際にdoshirouto2014を見ていただきましょう。→
18.
doshirouto2014の外観 Twenty Fourteenをベースに作っています。cssはほとんどイジってません。 ファイル構成はどうなっている?➔
19.
洗練されすぎたdoshirouto2014の世界 TwentyFourteen ファイル数 62 doshirouto2014 ファイル数 6
20.
なぜこんなにファイルを減らせるのか? Twenty Fourteenの現状 デフォルトテーマTwenty Fourteenは、 ・ユーザのあらゆるニーズに対応できる利点があります。 ・WordPressが持つ機能をくまなくサポートしているので、 WordPressのポテンシャルを最大限に引き出せます。 その反面、 ・一般のユーザーにとってはほとんど使わない機能が多くあります。 ・複雑なコードを分かりやすく階層化したり部品化した結果、ファイルの数が 多くなってしまっています。 ・WordPressは海外製のソフトウェアのため、日本語圏の人が使うためには 多言語化対応が必要になります。
21.
doshirouto2014は日本語のみ対応とし、 初心者は使わない(使えない)機能を削ぎ落としました。 1. 多言語化対応なし 言語関連ファイルを削除しました。また、コードを分かりやすくするために テンプレートファイルに日本語を直接埋め込んでいます。 comments_popup_link( __(
'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); 日本語しか使わないので日本語を直接埋め込みました。 comments_popup_link( 'コメントをどうぞ', '1件のコメント', '%件のコメント' );
22.
2. 古いバージョンのIE対応無し ie.css、html5.js といった互換性維持用のファイルを削除しました。 削除 削除
23.
3. SEO対策無し コードを簡単にするため、<head>内のタイトルなどを簡略化。 情報を削ったり、サイトタイトルを静的な固定表示のまま出すようにしました。 <head>
<title><?php wp_title( '|', true, 'right' ); ?></title> </head> wp_title()でページのタイトル名を動的に表示していたところを、 doshirouto2014ではタイトルを固定。どんなページもこの文字列になります。 <head> <title>ヘッダのタイトル doshirouto2014</title> </head>
24.
4. カスタムヘッダー削除、カスタマイズ機能削除、おすすめコンテンツ機能削除 これらはTwenty Fourteenが持つ拡張機能ですが、 そんな機能はド素人には無縁なので、関連phpファイルを削除しました。 削除 削除 削除
25.
5. Webフォント削除、Genericons削除 ttfとかsvgとかのファイルを削除しました。 ガッツリ削除 style.cssも編集し、フォントの呼び出しや アイコンフォントの呼び出しをしないように しました。
26.
その結果、アイコンフォントが使えなくなります。 Twenty Fourteen doshirouto2014
27.
6. Javascriptによるアニメーション効果を省きました。 ていうかjsファイルは全部削除しました。 doshirouto2014では 優雅なアニメーションは不要!
28.
そしたら検索ボックスが出なくなった!/(^o^)\ Twenty Fourteen ムシメガネをクリックすると 検索窓出現 doshirouto2014 クリックしても出ない でも検索窓はもうひとつあるから大丈夫!
29.
7. 投稿フォーマットは1種類だけにしました。 Twenty Fourteenでは、標準の投稿のほかに 「音声」や「動画」、「引用」 などが使えますが、doshirouto2014では標準の投稿のみとしました。 Twenty
Fourteenで は、記事を書くときに 投稿フォーマットを選 べる。 投稿フォーマットを詳しく→
30.
投稿フォーマットとは テキストがメインの投稿(標準の投稿)以外に、例えば画像や動画などのメディアを投稿 するときは別のデザインにすることができます。投稿の種類によって見せ方(=フォーマッ ト)を替えられます。つまり投稿フォーマットごとにデザインを変えることができます。 Twenty Fourteenでは以下の投稿フォーマット用のファイルが用意されています。 標準の投稿 アサイド 画像 動画 音声 引用 リンク ギャラリー チャット ステータス おすすめコンテンツ 「廃止」「New」はTwenty Thirteenからの比較 content.php content-‐aside.php content-‐image.php content-‐video.php content-‐audio.php content-‐quote.php content-‐link.php content-‐gallery.php content-‐chat.php content-‐status.php content-‐featured-‐post.php 廃止 廃止 New もう少し細かく見ていきます➔
31.
Twenty Thirteenは、投稿フォーマットによっていろいろな 外観が楽しめました。 標準 ギャラリー ビデオ 引用 ステータス チャット では、Twenty Fourteenはどうなっているでしょうか?→
32.
Twenty Fourteen 「標準」の投稿フォーマット content.php デフォルトの投稿フォーマットです。 テキストメインの記事を掲載する ときに使います。
33.
Twenty Fourteen 「アサイド」の投稿フォーマット content-‐aside.php 記事投稿ほどではないけど、 メモのような感覚で残せるもの。 タイトルは表示されず、本文だけの 表示になります。
34.
Twenty Fourteen 「画像」の投稿フォーマット content-‐image.php 画像記事を掲載するときに使いま す。
35.
Twenty Fourteen 「動画」の投稿フォーマット content-‐video.php YouTube等から動画ファイルを埋 め込むことができます。 YouTubeのURLを投稿するだけ で埋め込み記事になります。 パソコンからアップロードした動 画を掲載することもできます。 !
36.
Twenty Fourteen 「音声」の投稿フォーマット content-‐audio.php 音声ファイルを埋め込むことがで きます。
37.
Twenty Fourteen 「引用」の投稿フォーマット content-‐quote.php 外部サイトの記事を引用して掲載 したいときに使います。 アサイドと同様、タイトルは表示 されません。
38.
Twenty Fourteen 「リンク」の投稿フォーマット content-‐link.php リンクURLを貼ると自動的にリン クタグもついて掲載される… と思いましたが、自動的にはリン クされないようです。 リンクされないURL文字列が掲載 されます。 タイトルは表示されません。
39.
Twenty Fourteen 「ギャラリー」の投稿フォーマット content-‐gallery.php 複数の画像ファイルを掲載する ときに使います。
40.
Twenty Fourteenは、どの投稿フォーマットにしてもほとん ど同じデザイン! 標準 アサイド 画像 動画 音声 ギャラリー
41.
Twenty Thirteenはこんなにカラフルだったのに! 標準 ビデオ 引用 ギャラリー ステータス チャット
42.
同じデザインなら1つの投稿フォーマット、 1つのテンプレートファイルでいいじゃん? 引用 アサイド 標準 音声 リンク 画像 ギャラリー 動画 投稿フォーマットは「標準」の 1つのみにする
43.
投稿フォーマットではないが 「おすすめコンテンツ」 これ content-‐featured-‐post.php ピックアップ画像としてページ上部 に固定表示できます。 タイル表示の他に、スライダーとし ての表示も可能です。 doshirouto2014ではこんなオ シャレな機能は必要無いのでカッ トしました。
44.
doshirouto2014では これらのテンプレートを1つにまとめました。 content-***.php を1つに集約して index.php内に記載することで ファイル数を削減しました。
45.
さらなるファイル削減: doshirouto2014は、メインのテンプレートは index.phpの一種類だけ! これってどういうこと? その秘密は「テンプレート階層」のしくみにあります。➔
46.
記事の並べ方はいろいろあります (Twenty Fourteenの例) 最新の投稿順表示 カテゴリ毎表示 新着順に並びます。 カテゴリAの記事 だけを表示します。 アーカイブ表示 タグ毎表示 2014年3月の記事 だけ表示します。 タグZの記事だけを 表示します。
47.
Twenty Fourteenでは、記事を並べる方法ごとに 専用のテンプレートファイルがあります。 最新投稿順ページ index.php カテゴリ毎ページ category.php アーカイブ毎ページ タグ毎ページ 1記事だけのページ archive.php tag.php single.php
48.
archive.php category.php それぞれのページごとに違うデザイ ンを見せることが出来る反面、 テンプレートファイルの数は多くなっ てしまいます。 index.php single.php tag.php
49.
doshirouto2014の記事表示テンプレートは index.phpだけ Twenty Fourteen 404.php archive.php author.php category.php 404(not found)ページ アーカイブページ ユーザ一ページ カテゴリーページ image.php 添付画像ページ page.php 固定ページ search.php 検索結果ページ single.php 個別投稿ページ tag.php index.php doshirouto2014 タグページ ブログ投稿一覧ページ index.php index.phpだけですべてのページ
を表示させる!
50.
なぜindex.phpだけでも動くのか? WordPressの仕様では、以下のように動作します。 カテゴリ毎ページの表示のとき、category.phpが無ければindex.phpを使います。 年月毎(アーカイブ)ページの表示のとき、archive.phpがなければindex.phpを使います。 タグ毎ページ表示のとき、tag.phpが無ければindex.phpを使います。 カテゴリ毎ページ category.php アーカイブページ archive.php タグ毎ページ index.php tag.php 専用のテンプレートファイルがなければ、index.phpを使用する仕様になっています。 この優先順位を持った階層をテンプレート階層と言います。
51.
では実際に、 doshirouto2014をインストールし 構成を見てみましょう。 doshirouto2014のダウンロードは こちらから http://toyao.net/doshirouto2014.zip
52.
ダウンロードしたファイルはどこに置いたらいいの? doshirouto2014テーマは wordpress
> wp-‐content > themes の下に置きましょう。
53.
管理画面でテーマを変更します。 doshirouto2014を 有効化
54.
doshirouto2014が有効になりました!
55.
doshirouto2014のファイル構成 footer.php フッタテンプレート functions.php php関数の集まり(触らなくていい) header.php ヘッダテンプレート index.php メインテンプレート sidebar.php サイドバーテンプレート style.css cssファイル
56.
doshirouto2014では、1つのページを作るのに 複数のパーツが組み合わされています。 header.php sidebar.php footer.php index.php
57.
この構成はTwenty Fourteenでも同じです。 Twenty Fourteenの場合 header.php index.php sidebar.php footer.php
58.
doshirouto2014のコードを 見てみましょう
59.
その前に、phpの基礎知識 WordPressはphpというプログラム言語で作られています。 テーマを理解するにはこの言語の使い方を少し知っておく必要が あります。 条件分岐 (if文) ! <?php if(
$a == 1 ): ?> ! <h1>変数$aが1のときは、この部分を表示します</h1> ! <?php else: ?> ! <h1>$aが1以外のときは、この部分を表示します</h1> ! <?php endif; ?>
60.
繰り返し (while文) ! <?php while(
$a == 1 ): ?> ! この部分が繰り返されます。 ! <?php endwhile; ?> 繰り返し文は、新着の記事一覧のページなど、何件もの複数記事 を1ページに表示させるときに使います。 以上をふまえて、doshirouto2014のソースコードを見てみます。→
61.
日本語コメントがいっぱいの超親切設計! 中を簡単に解説します➔
62.
<?php get_header(); ?>
header.phpを読み込む doshirouto2014/index.php <?php if ( have_posts() ) : ?> <? while( have_posts() ) : the_post(); ?> メインテンプレート <article id="post-‐<?php the_ID(); ?>" <?php post_class(); ?>> while文によるループ処理 <header class="entry-‐header"> <?php if ( is_single() ) : the_title( '<h1>', '</h1>' ); else : the_title('<h1><a href="'.esc_url(get_permalink()).'">', '</a></h1>'); endif; ?> 記事のタイトル <div class="entry-‐meta"> <?php if ( 'post' == get_post_type() ) twentyfourteen_posted_on(); ?> </div> </header><!-‐-‐ .entry-‐header -‐-‐> <div class="entry-‐content"> <?php the_content( '続きを読む→' ); ?> </div><!-‐-‐ .entry-‐content -‐-‐> 記事本文を表示する </article><!-‐-‐ #post-‐## -‐-‐> <?php if ( is_single() || is_page() ) : if ( comments_open() || get_comments_number() ) : comments_template(); } endif; ?> <?php endwhile; ?> <?php twentyfourteen_paging_nav(); ?> <?php endif; ?> <?php sidebar.phpを読み込む get_sidebar(); get_footer(); footer.phpを読み込む コメント欄を表示する 記事数分のループ
63.
<html lang="ja"> <head>
<meta charset="UTF-‐8"> <meta name="viewport" content="width=device-‐width"> doshirouto/header.php ヘッダテンプレート <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri();?>"/> <title>ヘッダのタイトル doshirouto2014</title> <?php wp_head(); ?> </head> ヘッダのタイトル <body <?php body_class(); ?>> <div id="page" class="hfeed site"> <header id="masthead" class="site-‐header" role="banner"> <div class="header-‐main"> <h1 class="site-‐title"> style.cssを読み込む <a href="<?php echo home_url( '/' ); ?>">タイトル -‐ doshirouto2014</a> </h1> <div class="search-‐toggle"> サイトタイトル <a href="#search-‐container" class="screen-‐reader-‐text">検索</a> </div> <nav id="primary-‐navigation" class="site-‐navigation primary-‐navigation"> <?php wp_nav_menu( array( 'menu_class' => 'nav-‐menu' ) ); ?> </nav> </div> ナビゲーションメニュー <div id="search-‐container" class="search-‐box-‐wrapper hide"> <div class="search-‐box"> <?php get_search_form(); ?> </div> </div> </header><!-‐-‐ #masthead -‐-‐> ! <div id="main" class="site-‐main"> ! 検索ボックス
64.
doshirouto2014/sidebar.php サイドバーテンプレート <div
id="secondary"> <?php ブログの説明 $description = get_bloginfo( 'description', 'display' ); if ( ! empty ( $description ) ) : ?> <h2 class="site-‐description"><?php echo esc_html( $description ); ?></h2> <?php endif; ?> ! <?php if ( has_nav_menu( 'secondary' ) ) : ?> <nav role="navigation" class="navigation site-‐navigation secondary-‐navigation"> <?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?> </nav> <?php endif; ?> ! <?php if ( is_active_sidebar( 'sidebar-‐1' ) ) : ?> <div id="primary-‐sidebar" class="primary-‐sidebar widget-‐area"> <?php dynamic_sidebar( 'sidebar-‐1' ); ?> </div><!-‐-‐ #primary-‐sidebar -‐-‐> <?php endif; ?> </div><!-‐-‐ #secondary -‐-‐>
65.
doshirouto2014/footer.php フッタテンプレート !
</div><!-‐-‐ #main -‐-‐> <footer id="colophon" class="site-‐footer" role="contentinfo"> <div class="site-‐info"> doshirouto2014 </div><!-‐-‐ .site-‐info -‐-‐> </footer><!-‐-‐ #colophon -‐-‐> </div><!-‐-‐ #page -‐-‐> ! <?php wp_footer(); ?> WordPressのフッタ処理 </body> </html>
66.
まとめ ・WordPressのテーマに触れたことが無い初心者の方は、まずdoshirouto2014で WordPressのテーマ構造を理解し、慣れてきたらTwenty Fourteenなどデフォル トテーマの中を解読してみるのがいいと思います。 ・doshirouto2014に追加したい機能がある場合は、デフォルトテーマから自力で 必要なコードをコピーしてきましょう。 ! ・doshirouto2014はWordPress公式のテーマではありませんし、素人まるだし なので、こんなテーマは早く卒業しましょう。
67.
ありがとうございました。 @uemera uemura
Download now