Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordPressテーマ作成入門
Search
firecolor
May 23, 2020
Technology
0
200
WordPressテーマ作成入門
2020.05.23に開催された、第8回西東京Web勉強会「WordPressテーマ作成」で使用したスライド
firecolor
May 23, 2020
Tweet
Share
More Decks by firecolor
See All by firecolor
ワンランク上のデザイナーになる コーディングことはじめ
firecolor
0
220
お気軽にチャレンジ モダンフロントエンド
firecolor
0
400
ゲームで学ぶUI/UX
firecolor
0
420
やろうぜ!プロトタイピング
firecolor
1
300
UXを考えたら問い合わせが倍増した話
firecolor
2
510
Other Decks in Technology
See All in Technology
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
270
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
310
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
3
570
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
140
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
100
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
180
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
270
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
120
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
840
コンパウンド組織のCRE #cre_meetup
layerx
PRO
1
250
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
It's Worth the Effort
3n
187
28k
The Cult of Friendly URLs
andyhume
79
6.6k
Code Reviewing Like a Champion
maltzj
526
40k
Documentation Writing (for coders)
carmenintech
75
5.1k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Transcript
WordPress テーマ作成入門 Makoto Koizumi
WordPressテーマ作成入門 本日の内容 1. 自己紹介 2. テーマを作る前に 3. テーマ作成に必要なのは 4. 環境の構築
5. HTMLを作る 6. HTMLからテーマへ 7. テーマをもっと便利に 8. 質疑応答
WordPressテーマ作成入門 お願いと注意 教材をSNSやブログにあげることは禁止です 教材の再配布や許可なく利用することは禁止 です 成果物をウェブにあげることはOKです!!
今回の勉強会に参加したことを投稿するのは あり、というかむしろ嬉しいです
WordPressテーマ作成入門 自己紹介 講師の人となりです
小泉 誠(コイズミ マコト) Webデザイナー フロントエンドエンジニア ウェブコンサルタント etc. フリーランスとして活動中。 屋号は「Studio FireColor」。
ウェブ制作会社、システム会社、SEO系の会社などを 経て独立。 Webデザイナーに始まりフロントエンド全般、SEO、 マーケティング、システム開発、ウェブの活用や社内 のIT化のコンサルティングなど。 現在は「本人も職種がわからない…」といった感じで、 ゼネラリスト道を邁進中。 自己紹介
WordPressテーマ作成入門 テーマを作る前に 知は力なり 備えあれば憂いなし、ですね
❘WordPressテーマ作成入門 確認しておくべきもの テーマを作る前に
❘WordPressテーマ作成入門 確認しておくべきもの 公式ドキュメントはみておこう Codex(JP) https://wpdocs.osdn.jp/Main_Page (https://tinyurl.com/wp-052301) テーマを作る前に
❘WordPressテーマ作成入門 確認しておくべきもの できたら英語版のドキュメントも目をとおそう Codex(EN) https://codex.wordpress.org/ (https://tinyurl.com/wp-052302) Code Reference(EN) https://developer.wordpress.org/reference/ (https://tinyurl.com/wp-052303)
Theme Handbook https://developer.wordpress.org/themes/getting-started/your-first-theme/ (https://tinyurl.com/wp-052304) テーマを作る前に
❘WordPressテーマ作成入門 WordPressには決まりがある テーマを作る前に
❘WordPressテーマ作成入門 WordPressには決まりがある WordPressのライセンス GPL v2 https://ja.wordpress.org/about/license/100-percent-gpl/ (https://tinyurl.com/wp-052305) テーマを作る前に
❘WordPressテーマ作成入門 WordPressには決まりがある プラグインテリトリーを考える テーマの領域を超えない https://make.wordpress.org/themes/ (https://tinyurl.com/wp-052306) テーマを作る前に
WordPressテーマ作成入門 テーマ作成に必要なのは テーマに使われるファイルはどんなものがあるのでしょう 彼を知り己を知れば百戦殆うからず、ですね
❘WordPressテーマ作成入門 どんなファイルがあるか テーマ作成に必要なのは
❘WordPressテーマ作成入門 どんなファイルがあるか ここでもCodex テンプレート階層 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83% AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4 (https://tinyurl.com/wp-052307) テーマ作成に必要なのは
❘WordPressテーマ作成入門 どんなファイルがあるか テーマ作成に必要なのは
❘WordPressテーマ作成入門 どんなファイルがあるか • style.css • functions.php • screenshot.png などなど テーマ作成に必要なのは
他にはどんなファイルがあるか
❘WordPressテーマ作成入門 最低限必要なファイル テーマ作成に必要なのは
❘WordPressテーマ作成入門 最低限必要なファイル • style.css • index.php 個人的には `functions.php` は欲しい テーマ作成に必要なのは
実はこれだけ!
❘WordPressテーマ作成入門 最低限必要なファイル Codex 基本的なテンプレート https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81% AE%E4%BD%9C%E6%88%90#.E5.9F.BA.E6.9C.AC.E7.9A.84.E3.81.AA.E3.83 .86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88 (https://tinyurl.com/wp-052308) テーマ作成に必要なのは
❘WordPressテーマ作成入門 最低限にプラス テーマ作成に必要なのは
❘WordPressテーマ作成入門 最低限必要にプラス • header.php • footer.php • sidebar.php など これらにはデフォルトでget_header()などの読み込み関
数が用意されている テーマ作成に必要なのは もう少し便利にパーツ分けしたい
❘WordPressテーマ作成入門 パ ー ツ の 読 み 込 み の
話 の つ い で に テーマ作成に必要なのは 最低限にプラス
❘WordPressテーマ作成入門 最低限必要にプラス いくつかWPで用意されていますが get_template_part関数をよく使う(個人的にですが) ファイルの存在も確認したいときは load_template関数 他にもPHPのinclude関数なども使えます テーマ作成に必要なのは 自作のパーツも読み込めます
❘WordPressテーマ作成入門 P H P 以 外 の フ ァ イ
ル も テーマ作成に必要なのは 最低限にプラス
❘WordPressテーマ作成入門 最低限必要にプラス これらのサイト制作に必要なファイル テーマで使うならテーマのフォルダ内にまとめましょう テーマ作成に必要なのは CSSやJavaScript、画像など
WordPressテーマ作成入門 環境の用意 作業前の準備を万全にしましょう
❘WordPressテーマ作成入門 前提 環境の用意
❘WordPressテーマ作成入門 前提 WPが動く環境が用意されている 環境の用意
❘WordPressテーマ作成入門 テーマフォルダの用意 環境の用意
❘WordPressテーマ作成入門 テーマフォルダの用意 WPをインストールしたフォルダの中 ¥wp-content¥themes この場所に好きな名前でこれから作るテーマのフォルダ を作成して作っていきます。 環境の用意 テーマフォルダの場所
❘WordPressテーマ作成入門 テーマフォルダの用意 GitHubにあげておいたサンプルを使って話を進めたいと 思うので training という名前のフォルダを作成していただいて、その中に ファイルをそのままコピーしてください。 環境の用意 今回は
❘WordPressテーマ作成入門 テーマフォルダの用意 WPの管理画面で 「外観」>「テーマ」>「TRAINING」 環境の用意 テーマの選択
WordPressテーマ作成入門 HTMLをつくる 制作を分かりやすくるには
❘WordPressテーマ作成入門 こんな手順がやりやすい HTMLをつくる
❘WordPressテーマ作成入門 こんな手順がやりやすい 1. 仕様を決めたり、設計をする 2. デザインを制作 3. HTMLとCSSでひな型を作る 4. 雛形をWordPressのテンプレートにする
HTMLをつくる WPでサイトを作るときの手順
❘WordPressテーマ作成入門 今回のHTML HTMLをつくる
❘WordPressテーマ作成入門 今回のHTML sandbox.html がそのファイルになります。 root/wp-content/themes/training/sandbox.html にブラウザからアクセスすれば表示が確認できます HTMLをつくる サンプルが作ってあります
WordPressテーマ作成入門 HTMLからテーマへ ここからが本番 手を動かしていきましょう
❘WordPressテーマ作成入門 最低限のファイルだけで作る HTMLからテーマへ
❘WordPressテーマ作成入門 最低限のファイルだけで作る 最初に、最低限のファイルだけで 動作するバージョンを作ります HTMLからテーマへ
❘WordPressテーマ作成入門 最低限のファイルだけで作る ここから先はハンズオン HTMLからテーマへ
WordPressテーマ作成入門 テーマをもっと便利に さらにもう一歩 ここまでできれば、その先にも進めるはず
❘WordPressテーマ作成入門 パーツを分けよう テーマをもっと便利に
❘WordPressテーマ作成入門 パーツを分けよう テーマをもっと便利に ハンズオン
WordPressテーマ作成入門 質疑応答 答えられることには答えます
❘WordPressテーマ作成入門 事前にいただいた質問 質疑応答
❘WordPressテーマ作成入門 事前にいただいた質問 WordPressのwebサイトを希望される場合にコーディングし てからWordPress化するのか? それとも最初からWordPressで作成するべきなのか? 質疑応答 質問1
❘WordPressテーマ作成入門 事前にいただいた質問 コーディングからWordpress化した場合に、 下層含めて全ページを素人のクライアントがいじれるように ブロックで作成し直すべきなのか? それかいじらないページに関しては 各ページごとに固有ページを作成して htmlを貼り付けしたままでいいのか? 質疑応答 質問2