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.

Word pressはじめの一歩 テーマ作成ハンズオン

10,943 views

Published on

WordCamp Kansai 2015ハンズオンスライド

Published in: Engineering
  • Be the first to comment

Word pressはじめの一歩 テーマ作成ハンズオン

  1. 1. WordPressはじめの一歩 テーマ作成ハンズオン 2015/07/25 WordCamp Kansai 2015
  2. 2. はじめに
  3. 3. SlideShareで スライド見れます
  4. 4. http://bit.ly/1Ozk1Wg OK?
  5. 5. 今日体験してほしいこと • PHPの知識無しでもテーマは作れる • テーマは全部自作しなくてもいい • テーマ制作は思っているよりは簡単
  6. 6. 名前:岡本秀高 仕事:PHPエンジニア 地域:京都∼滋賀 その他:WordBench京都モデレーター 興味:WP-API, React.js, Polymer,JSON-LD
  7. 7. 一応公式テーマ作者です https://profiles.wordpress.org/hideokamoto
  8. 8. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • より踏み込んだカスタマイズへ
  9. 9. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • より踏み込んだカスタマイズへ
  10. 10. テーマの作り方は 1つじゃない
  11. 11. テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
  12. 12. テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
  13. 13. フルスクラッチで作る 一からデザインを作成し、 作成したHTMLにWordPressを実装させる作り方 • メリット:自由度MAX • デメリット:PHP知識必要
  14. 14. テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
  15. 15. 子テーマとして作る 既にあるテーマを活用し、 「子テーマ」として機能を上書きする作り方 • メリット:編集範囲が少なく済む • デメリット:親テーマに仕様が依存しやすい
  16. 16. テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
  17. 17. スターターテーマで作る 最低限のPHPが実装されたテーマに CSSでデザインを追加する作り方 • メリット:PHP知識が無くても作れる • デメリット:スターターテーマの仕様に依存、        英語
  18. 18. 高野さんによるまとめ 作成方法 長所 短所 スクラッチ開発 コントロールできる 制作に時間が掛かる 子テーマ 素早く機能を 取り入れられる 親テーマへの依存が 大きい スターターテーマ 学習しやすい 元テーマの更新を 継承しない http://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/
  19. 19. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • より踏み込んだカスタマイズへ
  20. 20. PHPが書けなくても テーマは作れる
  21. 21. スターターテーマでテーマを作る スターターテーマを使えば、 必要なPHPが った状態でテーマ制作が可能 • _s:http://underscores.me/ • bones:http://themble.com/bones/  など
  22. 22. What about _s?
  23. 23. _s(underscores) Automatticが作ったスターターテーマ テーマに必要なPHPファイルが一式 っている CSSが書ければオリジナルテーマが作れる
  24. 24. https://wordpress.org/themes/hew/
  25. 25. https://wordpress.org/themes/cinnamon/
  26. 26. https://wordpress.org/themes/business-leader/
  27. 27. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • より踏み込んだカスタマイズへ
  28. 28. _sの中身と使い方を 簡単にご紹介
  29. 29. 1_sのセットアップ
  30. 30. _sのセットアップ 1. テーマファイルを作成 2. 開発環境へインストール 3. テーマの有効化
  31. 31. _sのセットアップ 1.テーマファイルを作成 2. 開発環境へインストール 3. テーマの有効化
  32. 32. http://underscores.me/
  33. 33. テーマファイルを作成する • 基本設定は_sのDLページで設定可能 • とりあえず使ってみる場合なら、  「Theme Name」を入力するだけ • 細かい設定は「Advanced Options」をクリック
  34. 34. テーマ名を入れて クリック!
  35. 35. Advanced Options • スラッグ・作者・説明文を入力できる • スラッグは関数同士の衝突回避に使われる  twentyeleven_foo() 、twentyten_foo() など • 入力したらGENERATEでダウンロード開始
  36. 36. _sのセットアップ 1. テーマファイルを作成 2.開発環境へインストール 3. テーマの有効化
  37. 37. 開発環境へアップロード • 先ほどDLしたzipを管理画面からアップロード • テーマ一覧に表示されればOK • テストデータを入れておくと便利  http://nuuno.net/note/wordpress-testdata/
  38. 38. クリック!
  39. 39. 先ほどDLしたzipファイルを アップロードしよう
  40. 40. _sのセットアップ 1. テーマファイルを作成 2. 開発環境へインストール 3.テーマの有効化
  41. 41. 「有効化」
  42. 42. 2テーマに スタイルをつける
  43. 43. テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. WordPressならではのクラスを活用する
  44. 44. テーマにスタイルをつける 1.基本的なスタイル調整方法 2. WordPressならではのクラスを活用する
  45. 45. 基本的なスタイル調整方法 • Chromeやfirefoxの開発ツールを利用しよう • 調整方法は通常のHTMLファイルと一緒 • WordPressならではのクラスを使って条件分け
  46. 46. Chrome開発ツールの場合 Mac:[Option]キー + [command]キー + [i]キー  Win: F12
  47. 47. Chrome開発ツールの場合 赤枠内にCSSを書いていく
  48. 48. 最後にstyle.cssに 転記して保存しよう
  49. 49. テーマにスタイルをつける 1. 基本的なスタイル調整方法 2.WordPressならではの  クラスを活用する
  50. 50. WordPressならではのクラスを活用する • 動的にクラスを出す箇所が複数ある • body_class()やpost_class()で設定する • 上手く活用すれば記事別にスタイルを変更できる!
  51. 51. WordPressならではのクラスを活用する • 特定のタグの投稿のみ非表示   .tag-投稿タグのスラッグ{ display:none;} • 検索結果ページのみ赤文字に   .search-results{ color:red} • 先頭固定記事のみ黒背景   .sticky{ background-color: black}
  52. 52. クラスの出力サンプルをもっと知る Codexにサンプルがいろいろ載ってます! • body_class  http://wpdocs.osdn.jp/テンプレートタグ/body_class • post_class  http://wpdocs.osdn.jp/テンプレートタグ/post_class
  53. 53. 3知って得する _sの内部構造
  54. 54. No.1 テンプレート階層 知って得する_sの内部構造
  55. 55. テンプレート階層 archive.php single.php page.php404.php search.php index.php アーカイブ カテゴリ タグ 著者 etc.. 個別投稿 メディア ブログ カスタム投稿 etc.. 404ページ 固定ページ 検索結果 TOPページや 下記以外のページ
  56. 56. 詳細はCodexで http://bit.ly/1Lfpj7u
  57. 57. No.2 テンプレートパーツ 知って得する_sの内部構造
  58. 58. _sでは、 パーツ別にPHPが 分割されている
  59. 59. header.php sidebar.php content.php footer.php comment.php
  60. 60. content.phpは 更に細分化されている
  61. 61. コンテンツ階層 content- none.php content- single.php content- search.php content- page.php content.php 該当記事なし index.php search.php archive.php 個別投稿 single.php 固定ページ page.php 検索結果 search.php 下記に該当しない コンテンツ
  62. 62. No.3 カスタム要素 知って得する_sの内部構造
  63. 63. その他のカスタム要素 • jsディレクトリ:_sデフォルトのJS置き場 • layoutディレクトリ:レイアウト用CSS置き場 • languagesディレクトリ:翻訳ファイル置き場 • incディレクトリ:拡張機能置き場
  64. 64. jsディレクトリ _sにデフォルトで使用されている JavaScriptファイルなどがある
  65. 65. jsディレクトリ • skip-link-focus-fix.js: • customizer.js   : • navigation.js   :
  66. 66. jsディレクトリ • skip-link-focus-fix.js:バグFIX(っぽい) • customizer.js   :カスタマイザー用JS • navigation.js   :ドロップダウンナビ用JS
  67. 67. layoutsディレクトリ レイアウト調整用CSSが ちょっとだけ入ってるディレクトリ
  68. 68. layoutsディレクトリ • content-sidebar.css: • sidebar-content.css:
  69. 69. layoutsディレクトリ • content-sidebar.css:サイドバーを右に置くCSS • sidebar-content.css:サイドバーを左に置くCSS 中身をstyle.cssにコピペでもOK
  70. 70. languagesディレクトリ 翻訳ファイルがここに入ってます
  71. 71. _sは基本英語 「カテゴリ」や「タグ」「コメント」は、 日本語で表示させたい・・・!
  72. 72. http://bit.ly/1NlLeuS からja.moをDL
  73. 73. ja.moをlanguagesディレクトリへ
  74. 74. ja.moで翻訳完了! これが・・・
  75. 75. ja.moで翻訳完了! こうなる ↓翻訳の詳細(GitHub)↓ http://bit.ly/1KfIvmK
  76. 76. incディレクトリ オプション機能やカスタマイズ機能が まとめられているディレクトリ
  77. 77. incディレクトリ • custom-header.php: • customizer.php  : • extras.php    : • jetpack.php    : • template-tags.php :
  78. 78. incディレクトリ • custom-header.php:「ヘッダー画像」関係 • customizer.php  :「カスタマイザー」関係 • extras.php    :クラスやtitle拡張 • jetpack.php    :Jetpackの無限スクロール対応 • template-tags.php :テンプレートタグ拡張
  79. 79. その他 • rtl.css:SSCの用語言く書らか右
  80. 80. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • より踏み込んだカスタマイズへ
  81. 81. 自信がないなら PHPは使わない
  82. 82. より踏み込んだカスタマイズへ・・・ • PHPでカスタマイズする時に注意すべきこと • JavaScript / CSSファイルを読み込む方法 • もっとガッツリ触りたい方への告知
  83. 83. より踏み込んだカスタマイズへ・・・ • PHPでカスタマイズする時に注意すべきこと • JavaScript / CSSファイルを読み込む方法 • もっとガッツリ触りたい方への告知
  84. 84. オリジナルPHPは使わない • オリジナルPHPを使うとセキュリティがつらい  echo とか echo とか echoとか • PHPを書くならテンプレートタグで  http://wpdocs.osdn.jp/テンプレートタグ • ヘッダー画像はコピペでできる
  85. 85. inc/custome-header.php 8-12行目をコピーしよう!
  86. 86. header.php コピーしたPHPを貼り付けよう!
  87. 87. ヘッダー画像が表示された!
  88. 88. より踏み込んだカスタマイズへ・・・ • PHPでカスタマイズする時に注意すべきこと • JavaScript / CSSファイルを読み込む方法 • もっとガッツリ触りたい方への告知
  89. 89. 外部ファイルは wp_head()かwp_footer() で読み込む
  90. 90. 任意のJSを追加する場合 function theme_name_scripts() { wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'theme_name_scripts' ); 赤文字部分をファイル名やファイルパスに書き換えればOK
  91. 91. 任意のCSSを追加する場合 function theme_name_style() { wp_enqueue_style( 'style-name', get_stylesheet_uri(). ‘css/origin.css’ ); } add_action( 'wp_enqueue_scripts', 'theme_name_style' ); 赤文字部分をファイル名やファイルパスに書き換えればOK
  92. 92. プラグインでも使うので、 wp_enqueue_scriptと wp_enqueue_styleは 覚えておくと便利b
  93. 93. より踏み込んだカスタマイズへ・・・ • PHPでカスタマイズする時に注意すべきこと • JavaScript / CSSファイルを読み込む方法 • もっとガッツリ触りたい方への告知
  94. 94. もっとガッツリ触りたい方は・・・ 8月2日 WordBench京都 _sで作るテーマ作成ハンズオン(再演) http://bit.ly/1KpKSTc

×