Submit Search
Upload
WordPressをこれから始める人のためのテーマ講座
•
5 likes
•
8,746 views
Takami Kazuya
Follow
WordCamp Tokyo 2017 登壇資料 https://2017.tokyo.wordcamp.org/
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 56
Download now
Download to read offline
Recommended
これだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のこと
Makoto Ueki
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
松田 千尋
Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018
Makoto Ueki
安全なプラグインに必要なこと: 脆弱性届出状況に見る傾向と対策 (WordCampTokyo 2017)
安全なプラグインに必要なこと: 脆弱性届出状況に見る傾向と対策 (WordCampTokyo 2017)
JPCERT Coordination Center
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
WordPress はどこへ向かう?〜コミュニティが支える未来〜
WordPress はどこへ向かう?〜コミュニティが支える未来〜
Naoko Takano
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
Hidekazu Ishikawa
WordPressで行う継続的インテグレーションのススメ
WordPressで行う継続的インテグレーションのススメ
horike37
Recommended
これだけは知っておきたい「Webアクセシビリティ」のこと
これだけは知っておきたい「Webアクセシビリティ」のこと
Makoto Ueki
WordCamp Tokyo2016itkaasan
WordCamp Tokyo2016itkaasan
松田 千尋
Webアクセシビリティ 海外の最新動向 2018
Webアクセシビリティ 海外の最新動向 2018
Makoto Ueki
安全なプラグインに必要なこと: 脆弱性届出状況に見る傾向と対策 (WordCampTokyo 2017)
安全なプラグインに必要なこと: 脆弱性届出状況に見る傾向と対策 (WordCampTokyo 2017)
JPCERT Coordination Center
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
WordPress はどこへ向かう?〜コミュニティが支える未来〜
WordPress はどこへ向かう?〜コミュニティが支える未来〜
Naoko Takano
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
Hidekazu Ishikawa
WordPressで行う継続的インテグレーションのススメ
WordPressで行う継続的インテグレーションのススメ
horike37
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
Takashi Uemura
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
kintone papers
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hong Chen
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
アシアル株式会社
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
Ayaka Sumida
WordCamp Kansai 2014 セキュリティ&バックアップ
WordCamp Kansai 2014 セキュリティ&バックアップ
Tomoyuki Sugita
「やりたい!」が「できた!」に変わる。チームで作るWebサービス〜Scoobの場合〜
「やりたい!」が「できた!」に変わる。チームで作るWebサービス〜Scoobの場合〜
Yu-ki Motoyama
Style Guide活用のススメ
Style Guide活用のススメ
Shigeki Ohtsuki
Learning from theme review requirements
Learning from theme review requirements
Shinichi Nishikawa
WorcCamp Kansai 2015 LT大会
WorcCamp Kansai 2015 LT大会
Koji Asaga
WordCamp Kansai 2015 発表資料
WordCamp Kansai 2015 発表資料
Masahito Muratake
Learn vue.js
Learn vue.js
yuxiang21
今、WordPress を使う理由
今、WordPress を使う理由
Naoko Takano
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone papers
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
Naoko Takano
SPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWork
Mizuho Sakamaki
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
airyのご紹介
airyのご紹介
Teruaki Murakami
大規模案件の苦悩から生まれた 柔軟なカスタムフィールド設計
大規模案件の苦悩から生まれた 柔軟なカスタムフィールド設計
loftwork
なぜ人は怪しい壺を欲しくなってしまうのか WordCamp Tokyo 2017Ver
なぜ人は怪しい壺を欲しくなってしまうのか WordCamp Tokyo 2017Ver
Masatoshi Someya
More Related Content
What's hot
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
Takashi Uemura
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
kintone papers
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hong Chen
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
アシアル株式会社
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
Ayaka Sumida
WordCamp Kansai 2014 セキュリティ&バックアップ
WordCamp Kansai 2014 セキュリティ&バックアップ
Tomoyuki Sugita
「やりたい!」が「できた!」に変わる。チームで作るWebサービス〜Scoobの場合〜
「やりたい!」が「できた!」に変わる。チームで作るWebサービス〜Scoobの場合〜
Yu-ki Motoyama
Style Guide活用のススメ
Style Guide活用のススメ
Shigeki Ohtsuki
Learning from theme review requirements
Learning from theme review requirements
Shinichi Nishikawa
WorcCamp Kansai 2015 LT大会
WorcCamp Kansai 2015 LT大会
Koji Asaga
WordCamp Kansai 2015 発表資料
WordCamp Kansai 2015 発表資料
Masahito Muratake
Learn vue.js
Learn vue.js
yuxiang21
今、WordPress を使う理由
今、WordPress を使う理由
Naoko Takano
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone papers
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
Naoko Takano
SPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWork
Mizuho Sakamaki
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
airyのご紹介
airyのご紹介
Teruaki Murakami
What's hot
(20)
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
webpackを使ったワンランク上のモダンJSカスタマイズ_門屋 亮氏
Hands on PhotoBlog App with WordPress REST API and App Inventor
Hands on PhotoBlog App with WordPress REST API and App Inventor
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2015 プレイベント「コントリビューターデイ」
WordCamp Kansai 2014 セキュリティ&バックアップ
WordCamp Kansai 2014 セキュリティ&バックアップ
「やりたい!」が「できた!」に変わる。チームで作るWebサービス〜Scoobの場合〜
「やりたい!」が「できた!」に変わる。チームで作るWebサービス〜Scoobの場合〜
Style Guide活用のススメ
Style Guide活用のススメ
Learning from theme review requirements
Learning from theme review requirements
WorcCamp Kansai 2015 LT大会
WorcCamp Kansai 2015 LT大会
WordCamp Kansai 2015 発表資料
WordCamp Kansai 2015 発表資料
Learn vue.js
Learn vue.js
今、WordPress を使う理由
今、WordPress を使う理由
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
kintone連携スマホアプリの開発・配布体験_生形 可奈子氏
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
SPAに必要なJavaScriptFrameWork
SPAに必要なJavaScriptFrameWork
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
airyのご紹介
airyのご紹介
Viewers also liked
大規模案件の苦悩から生まれた 柔軟なカスタムフィールド設計
大規模案件の苦悩から生まれた 柔軟なカスタムフィールド設計
loftwork
なぜ人は怪しい壺を欲しくなってしまうのか WordCamp Tokyo 2017Ver
なぜ人は怪しい壺を欲しくなってしまうのか WordCamp Tokyo 2017Ver
Masatoshi Someya
利用者数倍増! 観光協会サイト「ツアーガイドひかり」を引き継ぎ、活性化するまでの技術とプロセス
利用者数倍増! 観光協会サイト「ツアーガイドひかり」を引き継ぎ、活性化するまでの技術とプロセス
Hiroyuki Ishikawa
ECサイトをWooCommerceで始めよう
ECサイトをWooCommerceで始めよう
Atsufumi Yoshikawa
WordCamp Tokyo 2017 へようこそ
WordCamp Tokyo 2017 へようこそ
Mignon Style
WordCamp Tokyo 2017 ランチセッション「WordPress を使い始めたら 感謝を伝えよう」
WordCamp Tokyo 2017 ランチセッション「WordPress を使い始めたら 感謝を伝えよう」
Hijili Kosugi
20170916ブログを強力な武器としてビジネスにインストールすることで独立を成功させた話
20170916ブログを強力な武器としてビジネスにインストールすることで独立を成功させた話
Noriaki Takahashi
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
Masayuki Maekawa
コンテンツ戦国時代をどう生き抜く?成果につながるコンテンツマーケティングの基本[SEO][オウンドメディア]
コンテンツ戦国時代をどう生き抜く?成果につながるコンテンツマーケティングの基本[SEO][オウンドメディア]
digitalitalentity
Think Before You Submit Themes on WordPress dot Org
Think Before You Submit Themes on WordPress dot Org
Kafle G
Create LED lightened Wapuu (LEDパネルで光るわぷーを)
Create LED lightened Wapuu (LEDパネルで光るわぷーを)
Yuriko IKEDA
Viewers also liked
(11)
大規模案件の苦悩から生まれた 柔軟なカスタムフィールド設計
大規模案件の苦悩から生まれた 柔軟なカスタムフィールド設計
なぜ人は怪しい壺を欲しくなってしまうのか WordCamp Tokyo 2017Ver
なぜ人は怪しい壺を欲しくなってしまうのか WordCamp Tokyo 2017Ver
利用者数倍増! 観光協会サイト「ツアーガイドひかり」を引き継ぎ、活性化するまでの技術とプロセス
利用者数倍増! 観光協会サイト「ツアーガイドひかり」を引き継ぎ、活性化するまでの技術とプロセス
ECサイトをWooCommerceで始めよう
ECサイトをWooCommerceで始めよう
WordCamp Tokyo 2017 へようこそ
WordCamp Tokyo 2017 へようこそ
WordCamp Tokyo 2017 ランチセッション「WordPress を使い始めたら 感謝を伝えよう」
WordCamp Tokyo 2017 ランチセッション「WordPress を使い始めたら 感謝を伝えよう」
20170916ブログを強力な武器としてビジネスにインストールすることで独立を成功させた話
20170916ブログを強力な武器としてビジネスにインストールすることで独立を成功させた話
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
常時SSL化の事前確認・注意点・手順 〜WordPressとその周辺で必要なこと〜 #wctokyo
コンテンツ戦国時代をどう生き抜く?成果につながるコンテンツマーケティングの基本[SEO][オウンドメディア]
コンテンツ戦国時代をどう生き抜く?成果につながるコンテンツマーケティングの基本[SEO][オウンドメディア]
Think Before You Submit Themes on WordPress dot Org
Think Before You Submit Themes on WordPress dot Org
Create LED lightened Wapuu (LEDパネルで光るわぷーを)
Create LED lightened Wapuu (LEDパネルで光るわぷーを)
Similar to WordPressをこれから始める人のためのテーマ講座
WordPress初心者テーマ作成勉強会
WordPress初心者テーマ作成勉強会
Tsuyoshi.
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
西畑 一馬
WordPress 3.4 〜新機能や変更点〜
WordPress 3.4 〜新機能や変更点〜
Toru Miki
thymeleafさいしょの一歩
thymeleafさいしょの一歩
Yuichi Hasegawa
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
タカシ キタジマ
Wp html5
Wp html5
regret raym
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
Cherry Pie Web
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Atsushi Tadokoro
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
Sosuke Kimura
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
Webteko 20090925
Webteko 20090925
だいすけ ふるかわ
WordBench Saitama vol.6
WordBench Saitama vol.6
masaaki komori
リリース直前WordPress3.5をみてみよう
リリース直前WordPress3.5をみてみよう
Seto Takahiro
SharePoint Framework Teams タブ開発基礎講座
SharePoint Framework Teams タブ開発基礎講座
Hiroaki Oikawa
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
Satomi Tsujita
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
Kenji Shirane
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
Atsushi Tadokoro
Similar to WordPressをこれから始める人のためのテーマ講座
(20)
WordPress初心者テーマ作成勉強会
WordPress初心者テーマ作成勉強会
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
jsライブラリで実装する効率的なWeb制作
jsライブラリで実装する効率的なWeb制作
WordPress 3.4 〜新機能や変更点〜
WordPress 3.4 〜新機能や変更点〜
thymeleafさいしょの一歩
thymeleafさいしょの一歩
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
Wp html5
Wp html5
TwentyTwelveの子テーマつくったらハマった話
TwentyTwelveの子テーマつくったらハマった話
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
Webteko 20090925
Webteko 20090925
WordBench Saitama vol.6
WordBench Saitama vol.6
リリース直前WordPress3.5をみてみよう
リリース直前WordPress3.5をみてみよう
SharePoint Framework Teams タブ開発基礎講座
SharePoint Framework Teams タブ開発基礎講座
Rails初心者レッスン lesson3 3edition
Rails初心者レッスン lesson3 3edition
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
CMSMix Sapporo vol.3 (Drupal の回)
CMSMix Sapporo vol.3 (Drupal の回)
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
More from Takami Kazuya
HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習い
Takami Kazuya
Google Apps Script 入門
Google Apps Script 入門
Takami Kazuya
GoogleAppsScript入門
GoogleAppsScript入門
Takami Kazuya
Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2
Takami Kazuya
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作
Takami Kazuya
WordPress+AMP
WordPress+AMP
Takami Kazuya
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
Takami Kazuya
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップ
Takami Kazuya
jQuery3.0-beta1-point
jQuery3.0-beta1-point
Takami Kazuya
プラグイン公開までの道のり
プラグイン公開までの道のり
Takami Kazuya
History api
History api
Takami Kazuya
JSON-LD schema.org定義によるデータ構造化のススメ
JSON-LD schema.org定義によるデータ構造化のススメ
Takami Kazuya
WordPress widget api
WordPress widget api
Takami Kazuya
Miyazaki.js vol.2
Miyazaki.js vol.2
Takami Kazuya
React Facebook JavaScript Library
React Facebook JavaScript Library
Takami Kazuya
Wordpress カスタム投稿
Wordpress カスタム投稿
Takami Kazuya
WordPressプラグインの作り方
WordPressプラグインの作り方
Takami Kazuya
【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告
Takami Kazuya
WordPressプラグイン考察
WordPressプラグイン考察
Takami Kazuya
WordPressテーマ作成
WordPressテーマ作成
Takami Kazuya
More from Takami Kazuya
(20)
HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習い
Google Apps Script 入門
Google Apps Script 入門
GoogleAppsScript入門
GoogleAppsScript入門
Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作
WordPress+AMP
WordPress+AMP
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップ
jQuery3.0-beta1-point
jQuery3.0-beta1-point
プラグイン公開までの道のり
プラグイン公開までの道のり
History api
History api
JSON-LD schema.org定義によるデータ構造化のススメ
JSON-LD schema.org定義によるデータ構造化のススメ
WordPress widget api
WordPress widget api
Miyazaki.js vol.2
Miyazaki.js vol.2
React Facebook JavaScript Library
React Facebook JavaScript Library
Wordpress カスタム投稿
Wordpress カスタム投稿
WordPressプラグインの作り方
WordPressプラグインの作り方
【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告
WordPressプラグイン考察
WordPressプラグイン考察
WordPressテーマ作成
WordPressテーマ作成
WordPressをこれから始める人のためのテーマ講座
1.
WordPressをこれから始める⼈人の ためのテーマ講座 ver.1.0.0 { Event:
“WordCamp Tokyo 2017” };
2.
⾃自⼰己紹介 2 ⾼高⾒見見 和也(Takami Kazuya) h(ps://twi(er.com/miiitaka
h(ps://www.facebook.com/miiitaka { Company: “株式会社アラタナ” }, { Role: “Front-‐‑‒End Developer 兼 ⼈人事” } h(ps://github.com/miiitaka
3.
WordPressへの貢献 3
4.
質問 4 Q. テーマ作成はむずかしいですか?
5.
回答 5 A. テーマ作成はむずかしくないです。
6.
やった!作るぞ! 6 じゃあさっそく作りますね!
7.
落ち着きましょう 7 あわてないで。まずは構造を教えます。
8.
WordPressの基本階層は以下のとおりです。⼤大きく3つのフォルダがあります。 テーマ⽤用のフォルダを作りましょう。 8 /wp-‐‑‒admin/ 管理理画⾯面で使⽤用するファイルあれこれがあります。触らない。 /wp-‐‑‒content/ このフォルダの中で作業しましょう。 /wp-‐‑‒includes/ WordPress全体で使⽤用するJavaScriptやスタイルシート、コアファイルがあり ます。これも触らない。 / ルート直下は、ログイン関連やRSS関連、コメント、トラックバック、メール送受信⽤用 のファイルなどなど
9.
wp-content フォルダのさらに中のお話。 WordPressの基本構造を理理解( wp-‐‑‒content
フォルダ ) 9 /wp-‐‑‒content/ /language/ ⾔言語パック /plugin/ インストールしたプラグインが保存されている場所 /themes/ 各種テーマのテンプレートが保存されている場所 /upgrade/ バージョンアップ時に使⽤用。 /upload/ 管理理画⾯面からアップロードしたメディアファイルが保存されている場所。 年年→⽉月でいい感じに保存されています。
10.
wp-content フォルダのさらに中のお話。 WordPressの基本構造を理理解( wp-‐‑‒content
フォルダ ) 10 /wp-‐‑‒content/ /language/ ⾔言語パック /plugin/ インストールしたプラグインが保存されている場所 /themes/ 各種テーマのテンプレートが保存されている場所 /upgrade/ バージョンアップ時に使⽤用。 /upload/ 管理理画⾯面からアップロードしたメディアファイルが保存されている場所。 年年→⽉月でいい感じに保存されています。 このフォルダの中に ⾃自分⽤用のフォルダを 新規作成しましょう。
11.
質問 11 Q. 構造とか複雑じゃないんですか?
12.
回答 12 A. 構造はいたってシンプルです。
13.
必要なファイルは最低2つ。index.php と style.css
。 テーマに必要なファイル 13 /wp-‐‑‒content/ /language/ ⾔言語パック /plugin/ インストールしたプラグインが保存されている場所 /themes/sample-‐‑‒theme/ 各種テーマのテンプレートが保存されている場所 /upgrade/ バージョンアップ時に使⽤用。 /upload/ 管理理画⾯面からアップロードしたメディアファイルが保存されている場所。 年年→⽉月でいい感じに保存されています。 ⾃自分⽤用のテーマフォ ルダにファイルを 作成しましょう。
14.
それぞれの役割 14 index.php ・全てのテンプレートの⽣生みの親 ・何も書いていなくても存在する必要があります style.css ・テーマのメインスタイルシート ・テーマの情報を記述します
15.
Twenty Seventeen の例例 15
style.css にテーマ名や バージョン情報などを 記載すると表⽰示される
16.
さっそく作るぞ! 16 じゃあもうテーマ作成できますよね!
17.
だから落落ち着いてください 17 あわてないで。最低って⾔言ったでしょ。
18.
WordPress(CMS)のうま味を活かしましょう 18 ヘッダー コンテンツ フッター サイドバー コンテンツ よくある画⾯面 レイアウト
19.
共通部分はパーツ化 19 ヘッダー コンテンツ フッター サイドバー コンテンツ ページの共通 部分は分離離
20.
テーマの基本構成(パーツテンプレートを理理解する) 20 パーツ パーツテンプレート
パーツを呼び出す⽅方法 ヘッダー header.php <?php get_̲header(); ?> フッター footer.php <?php get_̲footer(); ?> サイドバー sidebar.php sidebar-‐‑‒content.php <?php get_̲sidebar(); ?> <?php get_̲sidebar( ʻ‘contentʼ’ ); ?> コメント comments.php <?php comments_̲template(); ?> 検索索フォーム searchform.php <?php get_̲search_̲form(); ?> ※カスタム main.php main-‐‑‒sub.php <?php get_̲template_̲part( ʻ‘mainʼ’ ); ?> <?php get_̲template_̲part( ʻ‘mainʼ’, ʼ’subʼ’ ); ?> ※ カスタムパーツテンプレートは、main-‐‑‒sub.phpがなかったら、main.phpを読む優先順 位付けができるのが特徴
21.
対応するパーツテンプレート 21 ヘッダー header.php コンテンツ フッター footer.php サイドバー sidebar.php コンテンツ パーツテンプ レートとして作 成
22.
テンプレートでパーツテンプレートを読み込む 22 <?php get_̲header(); ?> コンテンツ <?php
get_̲footer(); ?> <?php get_̲sidebar(); ?> コンテンツ テンプレート でパーツを取 得します index.php
23.
今度度こそ作るぞ! 23 じゃあさっそくコーディングしますね!
24.
あわてちゃダメです 24 ホームページしか作らない気なの?
25.
テーマの基本構成(テンプレートを理理解する) 25 該当ページ 優先度度 HOMEページ index.php home.php ⽉月別ページ
2ページ⽬目 以降降が true paged.php archive.php date.php カテゴリーページ category.php category-‐‑‒id.php category-‐‑‒slug.php タグページ tag.php tag-‐‑‒id.php tag-‐‑‒slug.php タクソノミーペー ジ taxonomy.php taxonomy-‐‑‒tax.php taxonomy-‐‑‒tax-‐‑‒ term.php 投稿タイプページ archive-‐‑‒ posttype.php ユーザーページ author.php author-‐‑‒id.php author-‐‑‒ nicename.php メディアページ singular.ph p single.php attachment.php MIME_̲type.php 記事ページ single-‐‑‒ posttype.php 固定ページ page.php page-‐‑‒id.php page-‐‑‒slug.php custom.php 検索索結果ページ search.php 404ページ 404.php 低 ⾼高
26.
テーマの基本構成(テンプレートを理理解する) 26 該当ページ 優先度度 HOMEページ index.php home.php ⽉月別ページ
2ページ⽬目 以降降が true paged.php archive.php date.php カテゴリーページ category.php category-‐‑‒id.php category-‐‑‒slug.php タグページ tag.php tag-‐‑‒id.php tag-‐‑‒slug.php タクソノミーペー ジ taxonomy.php taxonomy-‐‑‒tax.php taxonomy-‐‑‒tax-‐‑‒ term.php 投稿タイプページ archive-‐‑‒ posttype.php ユーザーページ author.php author-‐‑‒id.php author-‐‑‒ nicename.php メディアページ singular.ph p single.php attachment.php MIME_̲type.php 記事ページ single-‐‑‒ posttype.php 固定ページ page.php page-‐‑‒id.php page-‐‑‒slug.php custom.php 検索索結果ページ search.php 404ページ 404.php 低 ⾼高 通常はこの辺りを 作りますね。
27.
例例えばホームページ 27 header.php home.php に記述 footer.php sidebar.php home.php に記述
28.
例例えば投稿ページ 28 header.php single.php に記述 footer.php sidebar.php
29.
例例えば404ページ 29 header.php 404.php に記述 footer.php
30.
ここまで理理解できれば 30 header.php 404.php に記述 footer.php 各ページごとに 共通パーツを読 み込みましょう。
31.
質問 31 Q. どこから作り始めたらいいですか?
32.
回答(※好みの問題ですが……) 32 A. 共通テンプレートから作りましょう。
33.
やるぞ! 33 では header.php
から作りますね!
34.
header.php 34 <!DOCTYPE html> <html
lang="ja"> <head> <meta charset="UTF-‐‑‒8"> <meta name="viewport" content="width=device-‐‑‒width, initial-‐‑‒scale=1"> <meta name="theme-‐‑‒color" content="#444444"> <title>てらこや.work | WordPressのテーマやプラグイン開発・JavaScriptなどのナレッジブログ</title> <link rel='next' href='https://www.terakoya.work/page/2/' /> <link rel="canonical" href="https://www.terakoya.work/" /> <meta property="og:title" content="てらこや.work" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://www.terakoya.work/" /> <meta property="og:image" content="https://www.terakoya.work/wp-‐‑‒content/uploads/2017/01/logo.png" /> <meta property="og:site_̲name" content="てらこや.work" /> <meta property="og:description" content="WordPressのテーマやプラグイン開発・JavaScriptなどのナレッジブログ" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@miiitaka" /> <meta name="twitter:creator" content="@miiitaka" /> <meta name="twitter:domain" content="twitter.com/miiitaka" /> <meta name="twitter:title" content="てらこや.work" /> <meta name="twitter:description" content="WordPressのテーマやプラグイン開発・JavaScriptなどのナレッジブログ" /> <meta name="twitter:image" content="https://www.terakoya.work/wp-‐‑‒content/uploads/2017/01/logo.png" /> <link rel="alternate" type="application/rss+xml" title="てらこや.work » フィード" href="https://www.terakoya.work/feed/" /> <link rel="alternate" type="application/rss+xml" title="てらこや.work » コメントフィード" href="https://www.terakoya.work/ comments/feed/" /> <link rel='stylesheet' id='dashicons-‐‑‒css' href='https://www.terakoya.work/wp-‐‑‒includes/css/dashicons.min.css?ver=4.8.1' type='text/css' media='all' /> <link rel='stylesheet' id='admin-‐‑‒bar-‐‑‒css' href='https://www.terakoya.work/wp-‐‑‒includes/css/admin-‐‑‒bar.min.css?ver=4.8.1' type='text/css' media='all' /> <link rel='stylesheet' id='crayon-‐‑‒css' href='https://www.terakoya.work/wp-‐‑‒content/plugins/crayon-‐‑‒syntax-‐‑‒highlighter/css/min/ crayon.min.css?ver=_̲2.7.2_̲beta' type='text/css' media='all' /> <link rel='stylesheet' id='crayon…………………………………………………
35.
何をやっているんだい? 35
36.
head 要素の例例 36 ヘッダー(
head 要素 )に記述する主な内容 ・⾔言語指定 ・⽂文字コード指定 ・title 要素 ・viewport設定 ・テーマカラー ・ナビゲーション系( rel=“next” / rel=“prev” ) ・正規化( rel=“canonical” ) ・RSSフィード指定 ・Open Graph Protocol ・スタイルシート ・JavaScript( jQuery など ) ・構造化マークアップ ・計測⽤用タグ( Google Analytics など ) ・ファビコン
37.
テーマ依存は避ける 37 ヘッダー( head
要素 )に記述する主な内容 ・⾔言語指定 ・⽂文字コード指定 ・title 要素 ・viewport設定 ・テーマカラー ・ナビゲーション系( rel=“next” / rel=“prev” ) ・正規化( rel=“canonical” ) ・RSSフィード指定 ・Open Graph Protocol ・スタイルシート ・JavaScript( jQuery など ) ・構造化マークアップ ・計測⽤用タグ( Google Analytics など ) ・ファビコン テンプレートは 構造だけを意識識
38.
標準機能もしっかりしている 38 WordPressの標準機能でできることは任せる ・⾔言語指定 ・⽂文字コード指定 ・title 要素 ・viewport設定 ・テーマカラー ・ナビゲーション系(
rel=“next” / rel=“prev” ) ・正規化( rel=“canonical” ) ・RSSフィード指定 ・Open Graph Protocol ・スタイルシート ・JavaScript( jQuery など ) ・構造化マークアップ ・計測⽤用タグ( Google Analytics など ) ・ファビコン 外観→カスタマイズのサイ ト基本情報で設定できます。
39.
プラグインの活⽤用 39 プラグインでできることは任せる ・⾔言語指定 ・⽂文字コード指定 ・title 要素 ・viewport設定 ・テーマカラー ・ナビゲーション系(
rel=“next” / rel=“prev” )※標準機能よりカスタマイズ性が⾼高い ・正規化( rel=“canonical” )※標準機能よりカスタマイズ性が⾼高い ・RSSフィード指定 ・Open Graph Protocol ・スタイルシート ・JavaScript( jQuery など ) ・構造化マークアップ ・計測⽤用タグ( Google Analytics など ) ・ファビコン Yoast SEO や All in One SEOなど どうでしょう?
40.
プラグインの活⽤用 40 プラグインでできることは任せる ・⾔言語指定 ・⽂文字コード指定 ・title 要素 ・viewport設定 ・テーマカラー ・ナビゲーション系(
rel=“next” / rel=“prev” ) ・正規化( rel=“canonical” ) ・RSSフィード指定 ・Open Graph Protocol ・スタイルシート ・JavaScript( jQuery など ) ・構造化マークアップ ・計測⽤用タグ( Google Analytics など ) ・ファビコン Markup (JSON-‐‑‒LD) structured in schema.org どうでしょう?
41.
テーマ関数を使⽤用する 41 テーマ関数ファイル functions.php
に記述 ・⾔言語指定 ・⽂文字コード指定 ・title 要素 ・viewport設定 ・テーマカラー ・ナビゲーション系( rel=“next” / rel=“prev” ) ・正規化( rel=“canonical” ) ・RSSフィード指定 ・Open Graph Protocol ・スタイルシート ・JavaScript( jQuery など ) ・構造化マークアップ ・計測⽤用タグ( Google Analytics など ) ・ファビコン テーマディレクトリ に作りましょう。
42.
header.php の例例 42 シンプルに記述するとこうなる <!DOCTYPE
html> <html <?php language_̲attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-‐‑‒width, initial-‐‑‒scale=1"> <meta name="theme-‐‑‒color" content="#444444"> <?php wp_̲head(); ?> </head> <body <?php body_̲class(); ?>> テンプレートは シンプルに。
43.
header.php の例例 43 wp_̲head()
フックポイントを忘れずに <!DOCTYPE html> <html <?php language_̲attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-‐‑‒width, initial-‐‑‒scale=1"> <meta name="theme-‐‑‒color" content="#444444"> <?php wp_̲head(); ?> </head> <body <?php body_̲class(); ?>> フックポイントを 必ず書きましょう
44.
footer.php の例例 44 wp_̲footer()
フックポイントを忘れずに <?php wp_̲footer(); ?> </body> </html> フックポイントを 必ず書きましょう
45.
質問 45 Q. フックポイントってなんですか?
46.
回答 46 A. 処理理を呼び出す場所だと思ってください。
47.
回答 47 フックポイントが存在しないと それを利利⽤用したプラグインなどが 動作しません。
48.
やるぞぉぉぉぉ! 48 わかりました!コーディングやります!
49.
⼈人の話は最後まで聞きましょう 49 テーマ関数ファイルの話が残っています。
50.
テーマ関数ファイル( functions.php )を使⽤用する 50
テーマで使⽤用する機能や処理理を記述します。 ・title 要素の使⽤用サポート ・フィードリンクの使⽤用サポート ・投稿フォーマット機能の追加 ・投稿サムネイル機能の追加 ・カスタム背景機能の追加 ・カスタムヘッダー機能の追加 ・カスタムロゴ機能の追加 ・ウィジェットの編集ショートカット機能の追加(ver.4.5.0 から) ・スターター⽤用コンテンツ機能の追加(ver4.7.0 から) ・ウィジェットの使⽤用登録 ・メニューの使⽤用登録 ・使⽤用するスタイルシートの登録 ・使⽤用するJavaScriptの登録 ・独⾃自の処理理などをつらつらと追記……などなど。
51.
やるぞぉぉぉぉぉぉぉぉぉ! 51 わかりました!もう⼤大丈夫です!
52.
がんばりましょう 52 いいでしょう。
53.
まとめ 53 まとめ
54.
まとめ 54 ・WordPressのテーマの構成を理理解した上で制作する。 ・各ページの共通部分はテンプレート化してCMSのうま味を活かす。 ・テーマ依存の機能はなるべく避ける。 ・テーマとプラグインの住み分けが⼤大事。 ・必要最低限の機能はきちんと実装する。(フックポイントなど) ・テーマ関数ファイルで実装できるものはそちらにまとめる。 ・テンプレートはシンプルに構造だけを意識識する。 あとはチャレンジしてみることが⼤大事。
55.
ご清聴ありがとうございました。 55 ありがとうございました。
56.
テーマの作成(WordPress Codex ⽇日本語版) https://wpdocs.osdn.jp/テーマの作成 WordPressサイトデザインリファレンス(WordPress
Codex ⽇日本語版) https://wpdocs.osdn.jp/WordPress_̲サイトデザイン_̲リファレンス いらすとや http://www.irasutoya.com/search/label/棒⼈人間 参考URL 56
Download now