Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPressをこれから始める人のためのテーマ講座

6,651 views

Published on

WordCamp Tokyo 2017 登壇資料
https://2017.tokyo.wordcamp.org/

Published in: Engineering
  • Be the first to comment

WordPressをこれから始める人のためのテーマ講座

  1. 1. WordPressをこれから始める⼈人の ためのテーマ講座 ver.1.0.0 { Event: “WordCamp Tokyo 2017” };
  2. 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. 3. WordPressへの貢献 3  
  4. 4. 質問 4   Q.  テーマ作成はむずかしいですか?
  5. 5. 回答 5   A.  テーマ作成はむずかしくないです。
  6. 6. やった!作るぞ! 6   じゃあさっそく作りますね!
  7. 7. 落ち着きましょう 7   あわてないで。まずは構造を教えます。
  8. 8. WordPressの基本階層は以下のとおりです。⼤大きく3つのフォルダがあります。 テーマ⽤用のフォルダを作りましょう。 8   /wp-‐‑‒admin/ 管理理画⾯面で使⽤用するファイルあれこれがあります。触らない。 /wp-‐‑‒content/ このフォルダの中で作業しましょう。 /wp-‐‑‒includes/ WordPress全体で使⽤用するJavaScriptやスタイルシート、コアファイルがあり ます。これも触らない。 / ルート直下は、ログイン関連やRSS関連、コメント、トラックバック、メール送受信⽤用 のファイルなどなど
  9. 9. wp-content フォルダのさらに中のお話。 WordPressの基本構造を理理解(  wp-‐‑‒content  フォルダ  ) 9   /wp-‐‑‒content/ /language/ ⾔言語パック /plugin/ インストールしたプラグインが保存されている場所 /themes/ 各種テーマのテンプレートが保存されている場所 /upgrade/ バージョンアップ時に使⽤用。 /upload/ 管理理画⾯面からアップロードしたメディアファイルが保存されている場所。 年年→⽉月でいい感じに保存されています。
  10. 10. wp-content フォルダのさらに中のお話。 WordPressの基本構造を理理解(  wp-‐‑‒content  フォルダ  ) 10   /wp-‐‑‒content/ /language/ ⾔言語パック /plugin/ インストールしたプラグインが保存されている場所 /themes/ 各種テーマのテンプレートが保存されている場所 /upgrade/ バージョンアップ時に使⽤用。 /upload/ 管理理画⾯面からアップロードしたメディアファイルが保存されている場所。 年年→⽉月でいい感じに保存されています。 このフォルダの中に ⾃自分⽤用のフォルダを 新規作成しましょう。
  11. 11. 質問 11   Q.  構造とか複雑じゃないんですか?
  12. 12. 回答 12   A.  構造はいたってシンプルです。
  13. 13. 必要なファイルは最低2つ。index.php  と  style.css  。 テーマに必要なファイル 13   /wp-‐‑‒content/ /language/ ⾔言語パック /plugin/ インストールしたプラグインが保存されている場所 /themes/sample-‐‑‒theme/ 各種テーマのテンプレートが保存されている場所 /upgrade/ バージョンアップ時に使⽤用。 /upload/ 管理理画⾯面からアップロードしたメディアファイルが保存されている場所。 年年→⽉月でいい感じに保存されています。 ⾃自分⽤用のテーマフォ ルダにファイルを 作成しましょう。
  14. 14. それぞれの役割 14   index.php ・全てのテンプレートの⽣生みの親 ・何も書いていなくても存在する必要があります style.css ・テーマのメインスタイルシート ・テーマの情報を記述します
  15. 15. Twenty  Seventeen  の例例 15   style.css  にテーマ名や バージョン情報などを 記載すると表⽰示される
  16. 16. さっそく作るぞ! 16   じゃあもうテーマ作成できますよね!
  17. 17. だから落落ち着いてください 17   あわてないで。最低って⾔言ったでしょ。
  18. 18. WordPress(CMS)のうま味を活かしましょう 18 ヘッダー コンテンツ フッター サイドバー コンテンツ よくある画⾯面 レイアウト
  19. 19. 共通部分はパーツ化 19 ヘッダー コンテンツ フッター サイドバー コンテンツ ページの共通 部分は分離離
  20. 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. 対応するパーツテンプレート 21 ヘッダー  header.php コンテンツ フッター  footer.php サイドバー sidebar.php コンテンツ パーツテンプ レートとして作 成
  22. 22. テンプレートでパーツテンプレートを読み込む 22 <?php  get_̲header();  ?> コンテンツ <?php  get_̲footer();  ?> <?php   get_̲sidebar();   ?> コンテンツ テンプレート でパーツを取 得します index.php
  23. 23. 今度度こそ作るぞ! 23   じゃあさっそくコーディングしますね!
  24. 24. あわてちゃダメです 24   ホームページしか作らない気なの?
  25. 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. テーマの基本構成(テンプレートを理理解する) 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. 例例えばホームページ 27 header.php home.php  に記述 footer.php sidebar.php home.php  に記述
  28. 28. 例例えば投稿ページ 28 header.php single.php  に記述 footer.php sidebar.php
  29. 29. 例例えば404ページ 29 header.php 404.php  に記述 footer.php
  30. 30. ここまで理理解できれば 30 header.php 404.php  に記述 footer.php 各ページごとに 共通パーツを読 み込みましょう。
  31. 31. 質問 31   Q.  どこから作り始めたらいいですか?
  32. 32. 回答(※好みの問題ですが……) 32   A.  共通テンプレートから作りましょう。
  33. 33. やるぞ! 33   では  header.php  から作りますね!
  34. 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  &raquo;  フィード"  href="https://www.terakoya.work/feed/"  /> <link  rel="alternate"  type="application/rss+xml"  title="てらこや.work  &raquo;  コメントフィード"  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. 何をやっているんだい? 35  
  36. 36. head  要素の例例 36   ヘッダー(  head  要素  )に記述する主な内容 ・⾔言語指定 ・⽂文字コード指定 ・title  要素 ・viewport設定 ・テーマカラー ・ナビゲーション系(  rel=“next”  /  rel=“prev”  ) ・正規化(  rel=“canonical”  ) ・RSSフィード指定 ・Open  Graph  Protocol ・スタイルシート ・JavaScript(  jQuery  など  ) ・構造化マークアップ ・計測⽤用タグ(  Google  Analytics  など  ) ・ファビコン
  37. 37. テーマ依存は避ける 37   ヘッダー(  head  要素  )に記述する主な内容 ・⾔言語指定 ・⽂文字コード指定 ・title  要素 ・viewport設定 ・テーマカラー ・ナビゲーション系(  rel=“next”  /  rel=“prev”  ) ・正規化(  rel=“canonical”  ) ・RSSフィード指定 ・Open  Graph  Protocol ・スタイルシート ・JavaScript(  jQuery  など  ) ・構造化マークアップ ・計測⽤用タグ(  Google  Analytics  など  ) ・ファビコン テンプレートは 構造だけを意識識
  38. 38. 標準機能もしっかりしている 38   WordPressの標準機能でできることは任せる ・⾔言語指定 ・⽂文字コード指定 ・title  要素 ・viewport設定 ・テーマカラー ・ナビゲーション系(  rel=“next”  /  rel=“prev”  ) ・正規化(  rel=“canonical”  ) ・RSSフィード指定 ・Open  Graph  Protocol ・スタイルシート ・JavaScript(  jQuery  など  ) ・構造化マークアップ ・計測⽤用タグ(  Google  Analytics  など  ) ・ファビコン 外観→カスタマイズのサイ ト基本情報で設定できます。
  39. 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. プラグインの活⽤用 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. テーマ関数を使⽤用する 41   テーマ関数ファイル  functions.php  に記述 ・⾔言語指定 ・⽂文字コード指定 ・title  要素 ・viewport設定 ・テーマカラー ・ナビゲーション系(  rel=“next”  /  rel=“prev”  ) ・正規化(  rel=“canonical”  ) ・RSSフィード指定 ・Open  Graph  Protocol ・スタイルシート ・JavaScript(  jQuery  など  ) ・構造化マークアップ ・計測⽤用タグ(  Google  Analytics  など  ) ・ファビコン テーマディレクトリ に作りましょう。
  42. 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. 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. 44. footer.php  の例例 44   wp_̲footer()  フックポイントを忘れずに <?php  wp_̲footer();  ?> </body> </html> フックポイントを 必ず書きましょう
  45. 45. 質問 45   Q.  フックポイントってなんですか?
  46. 46. 回答 46   A.  処理理を呼び出す場所だと思ってください。
  47. 47. 回答 47   フックポイントが存在しないと それを利利⽤用したプラグインなどが 動作しません。
  48. 48. やるぞぉぉぉぉ! 48   わかりました!コーディングやります!
  49. 49. ⼈人の話は最後まで聞きましょう 49   テーマ関数ファイルの話が残っています。
  50. 50. テーマ関数ファイル(  functions.php  )を使⽤用する 50   テーマで使⽤用する機能や処理理を記述します。 ・title  要素の使⽤用サポート ・フィードリンクの使⽤用サポート ・投稿フォーマット機能の追加 ・投稿サムネイル機能の追加 ・カスタム背景機能の追加 ・カスタムヘッダー機能の追加 ・カスタムロゴ機能の追加 ・ウィジェットの編集ショートカット機能の追加(ver.4.5.0  から) ・スターター⽤用コンテンツ機能の追加(ver4.7.0  から) ・ウィジェットの使⽤用登録 ・メニューの使⽤用登録 ・使⽤用するスタイルシートの登録 ・使⽤用するJavaScriptの登録 ・独⾃自の処理理などをつらつらと追記……などなど。
  51. 51. やるぞぉぉぉぉぉぉぉぉぉ! 51   わかりました!もう⼤大丈夫です!
  52. 52. がんばりましょう 52   いいでしょう。
  53. 53. まとめ 53   まとめ
  54. 54. まとめ 54   ・WordPressのテーマの構成を理理解した上で制作する。 ・各ページの共通部分はテンプレート化してCMSのうま味を活かす。 ・テーマ依存の機能はなるべく避ける。 ・テーマとプラグインの住み分けが⼤大事。 ・必要最低限の機能はきちんと実装する。(フックポイントなど) ・テーマ関数ファイルで実装できるものはそちらにまとめる。 ・テンプレートはシンプルに構造だけを意識識する。 あとはチャレンジしてみることが⼤大事。
  55. 55. ご清聴ありがとうございました。 55   ありがとうございました。
  56. 56. テーマの作成(WordPress  Codex  ⽇日本語版) https://wpdocs.osdn.jp/テーマの作成 WordPressサイトデザインリファレンス(WordPress  Codex  ⽇日本語版) https://wpdocs.osdn.jp/WordPress_̲サイトデザイン_̲リファレンス いらすとや http://www.irasutoya.com/search/label/棒⼈人間 参考URL 56  

×