Submit Search
Upload
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
•
43 likes
•
25,531 views
Mignon Style
Follow
2014年10月11日に開催されたWordCamp Tokyo 2014でのセッションスライドです。
Read less
Read more
Design
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 99
Download now
Download to read offline
Recommended
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
Mignon Style
WordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップ
Mignon Style
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
Mignon Style
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
Mignon Style
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
Mignon Style
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Mignon Style
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
Mignon Style
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
parkn-park
Recommended
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
WordPress公式ディレクトリテーマ登録のポイント:プラグインテリトリーを理解してハッピーになろう
Mignon Style
WordPress公式テーマ登録のための5ステップ
WordPress公式テーマ登録のための5ステップ
Mignon Style
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
ノンプログラマーのためのWordPressプラグイン作成超入門 | Mignon Style
Mignon Style
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
Mignon Style
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
ノンプログラマーのためのWordPressテーマ作成ステップアップ術
Mignon Style
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
〜 デザイン脳×プログラミング脳 〜 デザイナーとプログラマーの72時間戦争
Mignon Style
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
デザイナーとエンジニアの境界線 〜 Are you a Designer or an Engineer? 〜
Mignon Style
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
WordCamp KOBE 「初めてのWordPress!オリジナルのテーマでブログを作る方法」Parkn'Park
parkn-park
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
Mignon Style
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成
Yoshie Nakayama
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
Takashi Uemura
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
Shinichi Nishikawa
子テーマを使ったサイト制作
子テーマを使ったサイト制作
shimoyama kengo
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
タカシ キタジマ
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Takashi Uemura
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
More Related Content
What's hot
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
Mignon Style
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成
Yoshie Nakayama
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
Takashi Uemura
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
Akari Doi
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
Shinichi Nishikawa
子テーマを使ったサイト制作
子テーマを使ったサイト制作
shimoyama kengo
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
タカシ キタジマ
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
What's hot
(20)
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
WordBench 東京 とは
WordBench 東京 とは
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
Wordpressスマートフォンテーマ作成
Wordpressスマートフォンテーマ作成
WordPressテーマ Foundation for WordPress の紹介
WordPressテーマ Foundation for WordPress の紹介
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
WordCamp Kansai 2015 はじめの一歩テーマ作成ハンズオン「今あるテーマを有効活用!子テーマではじめるお手軽テーマ作成法」
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
子テーマを使ったサイト制作
子テーマを使ったサイト制作
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
WordPressってブログじゃないの?
WordPressってブログじゃないの?
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
Similar to これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
Takashi Uemura
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
Takashi Uemura
第2回こけむさズword press部
第2回こけむさズword press部
Yuki Suzuki
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
Wp html5
Wp html5
regret raym
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
takashi ono
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
tamotsu toyoda
Theme review-guidelines wckobe2013
Theme review-guidelines wckobe2013
hiratatsuya
WordPress初心者テーマ作成勉強会
WordPress初心者テーマ作成勉強会
Tsuyoshi.
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
switch3000
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
kenji goto
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
Takashi Uemura
WordPress基礎講座5 テーマ作成基礎知識
WordPress基礎講座5 テーマ作成基礎知識
Akinori Kawamitsu
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
WordPressって何
WordPressって何
Kazue Igarashi
Similar to これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
(20)
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
第2回こけむさズword press部
第2回こけむさズword press部
WordPressとjQuery
WordPressとjQuery
Wp html5
Wp html5
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
Theme review-guidelines wckobe2013
Theme review-guidelines wckobe2013
WordPress初心者テーマ作成勉強会
WordPress初心者テーマ作成勉強会
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
テーマ作成初心者向け Word pressサイト構築のポイントと 便利なプラグイン
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPress基礎講座5 テーマ作成基礎知識
WordPress基礎講座5 テーマ作成基礎知識
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPressって何
WordPressって何
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
1.
これから WordPressのテーマ制作を はじめる人のために Mignon Style テ ーマを作って公式ディレクトリに登録しよう!
2.
Mignon Style WordPress歴 約1年 Webデザイナー http://mignonstyle.com/ @mignon_style
mignonxstyle
3.
WordPressはじめて1年で WordPress公式ディレクトリに テーマ登録しちゃいました!!
4.
WordPress公式ディレクトリテーマ「Chocolat」 https://wordpress.org/themes/chocolat
5.
WordPress 公式ディレクトリテーマ 〜 ショコラ〜 Chocolat
6.
Today's Menu
7.
WordPressの オリジナルテーマを作ろう WordPress公式ディレクトリに 登録するテーマを作ろう WordPress公式ディレクトリに テーマを登録しよう Menu2 Menu1 Menu3
8.
WordPressをはじめる前に HTML・CSSについての知識が必要です は じ め
に わからない人は HTML・CSSを まず勉強しよう!
9.
WordPressの オリジナルテーマを作ろう 初心者さん Menu1
10.
テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
11.
テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
12.
HTML・CSSでデザインを作成1 何が必要か構成を考えよう トップページ グルーバルナビ サイト名 サ イ ド バ ー コピーライト 投稿記事一覧 投稿記事一覧 投稿記事一覧 記事ページ グルーバルナビ サイト名 サ イ ド バ ー コピーライト 記事タイトル 投稿日時 記事本文
13.
最初はシンプルなブログサイトから はじめたほうが簡単です ブログサイトの場合 index.html トップ ページ content.html 記事の ページ about.html About ページ style.css スタイル シート …などなど
14.
テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
15.
・投稿ページ ブログの記事などの動的なページ ・固定ページ 「About」や「お問い合わせ」などの固定的なページ WordPressの構成2 WordPressには投稿ページと固定ページが あります
16.
テーマを構成するテンプレートファイル WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/テーマの作成 style.css index.php single.php page.php header.php footer.php sidebar.php comments.php screenshot.png functions.php スタイルシート メインのテンプレート 投稿ページのテンプレート 固定ページのテンプレート ヘッダーのテンプレート(get_header()で読み込み) フッターのテンプレート(get_footer()で読み込み) サイドバーのテンプレート(get_sidebar()で読み込み) コメント欄のテンプレート(comment_form()で読み込み) テーマのスクリーンショット(880px × 660px) 関数(PHPの命令文)用のファイル 必須 必須
17.
page-6.php 固定 ページ page.php 固定 ページ index.php 固定 ページ 固定ページの場合 読み込まれるテンプレートファイルには 優先順位があります page-6.php がなかったら page.php がなかったら 該当するファイルが ないときはすべて index.phpを使用 ※ ページのIDが「6」の場合
18.
WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/テンプレート階層 ページの種類 404ページ 検索結果ページ カテゴリーアーカイブ タグアーカイブ 作成者アーカイブ 日付アーカイブ 投稿ページ 固定ページ フロントページ category- $slug.php tag-$slug.php author- $nicename.php index.php category.php tag.php author.php date.php single-post.php page-$id.php front-page.php category-$id.php tag-$id.php author-$id.php page-$slug.php 404.php search.php archive.php single.php page.php home.php 優先順位高い 低 い
19.
結局どの テンプレートファイルを 使えばいいの?
20.
全部トップページと 同じレイアウトにするなら index.phpでOK!
21.
同じレイアウト ブログにあてはめてみると style.css スタイル シート これだけで OK! style.css スタイル シート index.html トップ ページ about.html About ページ content.html 記事の ページ トップ ページ index.php
22.
テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
23.
index.html トップ ページ 拡張子を phpに変更 テーマの有効化3 index.htmlの拡張子をhtmlからphpに変更 index.phpindex.html トップ ページ
24.
/* Theme Name: テーマ名 Theme
URI: テーマのサイトURI Author: テーマの作者名 Author URI: テーマ作者のサイトURI Description: テーマの説明 */ style.cssの行頭に以下を記述すると テーマの詳細に表示されます style.css スタイル シート
25.
wp-content/themes フォルダの中に入れます WordPressの フォルダ フォルダ wp-contentフォルダ themesフォルダ mytheme フォルダ style.css スタイル シート トップ ページ index.php
26.
テーマが 表示された! mythemeフォルダに screenshot.pngがあると キャプチャ画像が 表示されます screenshot.png 880px × 660px
27.
テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
28.
オリジナルのテーマを作るには PHPが わからない 最初は コピペでOK! HTML・CSSで作ったサイトをWordPressで 表示できるようにPHPでコーディングします
29.
その前にデバッグモードを trueにします! ファイルの編集が終わったら デバッグモードを 元に戻してね!
30.
デバッグモードとは? 編集中に画面が真っ白になったときなどに エラーメッセージを表示します
31.
デバッグモードとは? WordPress初心者におすすめ! デバッグモードの使い方 http://mignonstyle.com/debug-mode/ WordPressの フォルダ フォルダ wp-config.php wp- config wp-config.php define('WP_DEBUG', false); define('WP_DEBUG', true);
32.
WordPressのテンプレートタグを使って 投稿を表示できるように書き換えます WordPressのタグに書き換え4
33.
index.php ページのタイトル index.php <title>ページタイトル | サイトタイトル</title> <title><?php
wp_title( ' | ', true, 'right' );?> <?php bloginfo( 'name' ); ?></title>
34.
index.php index.php <img src="images/photo.jpg" /> <img
src="<?php echo get_template_directory_uri(); ?> /images/photo.jpg" /> 画像の表示
35.
index.php index.php <link rel="stylesheet" href="style.css"
/> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" /> スタイルシートの読み込み
36.
よく使うテンプレートタグ WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/テンプレートタグ サイトのタイトルを表示 <?php bloginfo( 'name' ); ?> サイトのキャッチフレーズを表示 <?php bloginfo( 'description' ); ?> 投稿のタイトルを表示 <?php the_title(); ?> 投稿日を表示 <?php echo get_the_date(); ?> 投稿のパーマリンクを出力 <?php the_permalink(); ?> サイトのURLを出力 <?php echo home_url(); ?> 投稿の内容を表示 <?php the_content(); ?> 投稿の抜粋を表示 <?php the_excerpt(); ?>
37.
よく使うテンプレートタグ WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/テンプレートタグ 投稿のカテゴリーを表示 <?php the_category(); ?> 投稿のタグを表示 <?php the_tags(); ?> 投稿のアイキャッチを表示 <?php the_post_thumbnail(); ?> テーマディレクトリのURLを出力 <?php echo get_template_directory_uri(); ?>
38.
index.php index.php <h3>投稿のタイトル</h3> <p>2014/10/11</p> <div>今日はWordCamp Tokyo 2014に行ってきました。</div> <?php
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_title( ‘<h3>’, ‘</h3>’ ); ?> <p><?php echo get_the_date(); ?></p> <div><?php the_content(); ?></div> <?php endwhile; endif; ?> 投稿のタイトルと本文を表示 この中に 書いてある 項目を繰り返し 表示します
39.
<?php if (
have_posts() ) : while ( have_posts() ) : the_post(); ?> <!-- ここに表示したい内容を記述します --> <?php endwhile; endif; ?> WordPressのループ これは 「もし表示する 投稿があったら 繰り返し表示する」 ということ トップページは 指定した回数 投稿 投稿 投稿 投稿ページや 固定ページは1回 投稿
40.
</head>タグの直前に挿入 <?php wp_head(); ?> </body>タグの直前に挿入 <?php
wp_footer(); ?> 必ず記述する決まり事(関数) Point! WordPressの プラグイン等で使ってる スタイルシートや スクリプトを 読み込みます
41.
テーマ制作の流れ 2 HTML・CSSでデザインを作成 WordPressの構成 テーマの有効化 WordPressのタグに書き換え テンプレートファイルの分割5 3 4 1
42.
テンプレートファイルの分割5 サ イ ド バ ー 部 分 投稿記事 本文 ヘッダー部分 フッター部分 header.php ヘッダー 部分 index.phpfooter.php フッター 部分 sidebar.php サイドバー 部分 コピペ コピペ コピペ ヘッダーやフッター・サイドバーなど 共通で使う部分をPHPファイルに分けます 1
43.
index.php <!DOCTYPE html> <html lang="ja"> <head> <?php
wp_head(); ?> </head> <body> <div id="wrapper"> <header> </header> <div id="contents"> <div id= "main-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; endif; ?> </div> <div id="sidebar"> </div> </div> <footer> </footer> </div> <?php wp_footer(); ?> </body> </html> 〜 〜 〜 〜 〜 sidebar.php サイドバー 部分 コピペ footer.php フッター 部分コピペ header.php ヘッダー 部分 コピペ
44.
header.php <!DOCTYPE html> <html lang="ja"> <head> <?php
wp_head(); ?> </head> <body> <div id="wrapper"> <header> </header> 〜 〜 footer.php <footer> </footer> </div> <?php wp_footer(); ?> </body> </html>〜 sidebar.php <div id="sidebar"> </div> 〜
45.
index.php サ イ ド バ ー 部 分 投稿記事 本文 ヘッダー部分 フッター部分 header.phpを読み込む <?php get_header(); ?> sidebar.phpを読み込む <?php
get_sidebar(); ?> footer.phpを読み込む <?php get_footer(); ?> index.phpのヘッダーやフッター・サイドバーの部分を テンプレートタグに書き換えます 2
46.
index.php <?php get_header(); ?> <div
id="contents"> <div id= "main-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; endif; ?> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?> 〜 header.phpをインクルード sidebar.phpをインクルード footer.phpをインクルード
47.
トップ ページ index.php 投稿 ページ single.php 固定 ページ page.php コピー コピー index.phpをコピーして変えたい部分を 編集します ページによって 表示する内容や 構成を変えたいときは テンプレートファイルを 分けたほうが 編集しやすいです
48.
WordPress Codex 日本語版
http://wpdocs.sourceforge.jp/条件分岐タグ <?php if ( is_single() ) : ?> <!-- 投稿ページに表示される内容を記述 --> <?php elseif ( is_page() ) : ?> <!-- 固定ページに表示される内容を記述 --> <?php else : ?> <!-- それ以外のページに表示される内容を記述 --> <?php endif; ?> 一部分だけ変えるときはファイルを分けるより 条件分岐タグを使うほうが便利です 投稿ページの場合 固定ページの場合
49.
調べてもわからないときは WordPress日本語フォーラムで 質問してみよう! フォーラムのルールは ちゃんと守ろう!
50.
WordPressのテンプレートタグに 書き換えよう 必要になったらファイルを分割しよう index.phpとstyle.cssがあればOK
51.
WordPress公式ディレクトリに 登録するテーマを作ろう 中級者さん初心者さん Menu2
52.
WordPress公式ディレクトリとは? WordPress.org | Themes
Directory https://wordpress.org/themes/ WordPress.orgに よって検証された テーマやプラグインを 無料で配布している サイトです
53.
WordPressの 管理画面から選んで インストール できます WordPress公式ディレクトリのテーマとは?
54.
公式ディレクトリに 登録するために テーマを修正します
55.
公式ディレクトリのテーマ制作 2 CSSの修正 screenshot.pngの作成 テンプレートファイルの修正 テキストの英語化 テーマユニットテスト コーディングのチェック 5 3 4 6 1
56.
CSSの修正1 /* image */ .aligncenter
{ ... } .alignleft { ... } .alignright { ... } style.css WordPressが生成するCSSのクラスを 設定します 画像や キャプション コメントなどの クラスを 設定します
57.
/* Theme Name: テーマ名 Theme
URI: テーマのサイトURI Author: テーマの作者名 Author URI: テーマ作者のサイトURI Description: テーマの説明 Version: テーマのバージョン License: ライセンス License URI: ライセンスのURI Tags: テーマのタグ */ 追 加 追 加 追 加 追 加 style.cssを公式用に修正します
58.
screenshot.pngの作成2 テーマの スクリーン ショット 画像サイズ:880px × 660px screenshot.png
59.
テンプレートファイルの修正3 style.css スタイル シート index index.php comments comments.php 880px × 660px screenshot.png comments.phpを追加します 公式ディレクトリのテーマに必須の ファイルを用意します 1
60.
コメント欄を 表示する場所に テンプレートタグを 記述します index.php サ イ ド バ ー 部 分 投稿記事 本文 ヘッダー部分 フッター部分 コメント欄 comments.phpを読み込む <?php comments_template();
?>
61.
コードの記述を「WordPressの 推奨する正しい書き方」に修正します 2 <html>タグの言語属性を表示 <html lang="ja"> index.php <html <?php
language_attributes(); ?>> index.php 言語属性を 表示する テンプレート タグ
62.
<link rel="stylesheet" href="<?php echo get_stylesheet_uri();
?>" /> index.php スタイルシートの読み込み この記述は 初心者さん向け の書き方 (非推奨)
63.
function themeslug_enqueue_styles() { wp_enqueue_style(
'themeslug-style', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_styles' ); functions.php functions.phpファイルに記述します 正しい 書き方 (推奨) スタイルシートの読み込み
64.
テーマを作るのに慣れてきたら Codexに載ってる正しい 書き方を覚えましょう
65.
テキストの英語化4 <h2>Message</h2> <h2>メッセージ</h2> テキストはすべて英語で記述します
66.
I18n(国際化)http://codex.wordpress.org/I18n_for_WordPress_Developers 日本語版 http://wpdocs.sourceforge.jp/I18n_for_WordPress_Developers 翻訳に対応する場合はテーマを国際化 します <h2><?php _e(
‘Message’, ‘text_domain’ ); ?></h2> <h2>Message</h2> 翻訳の ための テンプレート タグ
67.
テーマユニットテスト http://codex.wordpress.org/Theme_Unit_Test テーマユニットテスト5 テストデータをインストールします1 Test Dataインストール https://wpcom-themes.svn.automattic.com/ demo/theme-unit-test-data.xml
68.
レイアウトが正しく表示されているか リンク切れはないかなど確認します 2 タイトルが すごく長い 本文が 無い たくさんの カテゴリー たくさんの コメント コメント の階層 タイトルが無い 場合のリンク テーマ作者
69.
正しくコーディングされているか 警告やエラーが出ないか確認します コーディングのチェック6
70.
デバッグ http://codex.wordpress.org/Debugging_in_WordPress エラーが出ないか確認 デバッグモード1 WordPressの フォルダ フォルダ wp-config.php wp- config wp-config.php define('WP_DEBUG', false); define('WP_DEBUG',
true);
71.
・JavaScriptのエラーチェック 各ブラウザのチェックツール (IEの「F12 開発者ツール」など) ・HTMLの構文チェック(W3C XHTML
Validator) http://validator.w3.org/ ・CSSの構文チェック(W3C CSS Validator) http://jigsaw.w3.org/css-validator/ 構文チェック2
72.
Theme-Check http://wordpress.org/plugins/theme-check/ テーマの ガイドラインに 適合しているか チェック Theme-Check3
73.
Chocolat passed the
tests
74.
Codexのテーマレビューや テーマレビューガイドラインを ちゃんと読みましょう
75.
WordPress公式ディレクトリ用に テーマを修正しよう テストデータで表示を確認しよう エラーがないかチェックしよう
76.
WordPress公式ディレクトリに テーマを登録しよう 中級者さん初心者さん テーマ作者さん Menu3
77.
WordPress公式ディレクトリに テーマを登録すると…
78.
管理画面から選んでインストールできる! テーマの アップデートも 自動で ラクラク!
79.
世界中の人にテーマを使ってもらえる! このテーマ とても カワイイ! このテーマ すごく使い やすい! このテーマ 大好き! いいね!好き!
80.
親切な人がテーマの翻訳をしてくれる! 私の国の 言葉に翻訳 したから 使ってね! テーマ作者 翻訳 ファイル Mail
81.
初対面の人にも覚えてもらえる! 名刺交換 しましょう! テーマ登録した みにょんさん! テーマ 使ってみるね! テーマ 登録したの? すごいね! テーマ作者
82.
大勢の人と交流が深まる! 大勢の人と繋がりがもてる! コミュニティ 勉強会 SNS イベントテーマ作者
83.
いい事いっぱい!
84.
公式ディレクトリにテーマ登録 するのはどうすればいいの? 誰でもできるの?
85.
WordPressのルールを きちんと守れば大丈夫!
86.
テーマの申請から登録まで フィードバックが なくなるまで 修正します 修正が 必要な 場合は フィード バック承 認 テーマ レビュアー がチェック テーマレビューチームの管理者がチェック 公式ディレクトリにテーマが登録される 公式ディレクトリにテーマを申請 テーマレビュアー テーマ作者 修 正して
再 申 請 フ ィードバック
87.
テーマの申請1 テーマのアップロード http://wordpress.org/themes/upload/ 形式:zipファイル ファイルサイズ:8Mまで
88.
このチケットで 修正や質問などを やりとりします チケットの割当2
89.
テーマレビュアー テーマレビューチーム 管理者 テーマのチェックはテーマレビュアーと テーマレビューチームの管理者がおこないます ボランティア
90.
フィードバック3 エスケープ 処理してね レイアウトが 崩れてる ハードコーディング しないで セキュリティを しっかり Prefixが 抜けてるよ ライセンスを ちゃんと書いて テーマ レビュアー
91.
テーマの承認4 テーマレビューチームの管理者がチェック テーマレビュアー APPROVED 承 認
92.
テーマの登録5 公式ディレクトリに登録される テーマレビューチーム 管理者 LI V E 登
録
93.
公式ディレクトリに テーマを登録するのは 難しそう
94.
わからないところは 質問しよう!
95.
慣れてきたら正しい書き方を覚えよう レビューガイドラインにあうよう テーマを修正しよう オリジナルのテーマを作ってみよう
96.
ひとつずつ覚えていけば 大丈夫! が ん ば ろ う !
97.
Let's try!! やってみよう!!
98.
WordPress公式ディレクトリのテーマの登録について もっと詳しく知りたい人は Mignon Style WordPress公式テーマ 登録のための5ステップ W ordPress公式ディレクトリに挑戦! 2014.09.08 改訂版 http://www.slideshare.net/mignonstyle/wordpress5-38514853 WordPress公式テーマ登録のための5ステップ
99.
ご清聴 ありがとうございました Mignon Style @mignon_style mignonxstyle
Download now