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.

WordBench京都版 _sハンズオン

1,869 views

Published on

WordCamp Kansai 2015 テーマ作成ハンズオン再演。
_sに絞ってWordBench京都向けにリメイクしています。

Published in: Engineering
  • Be the first to comment

WordBench京都版 _sハンズオン

  1. 1. WordPressはじめの一歩 テーマ作成ハンズオン 2015/08/02 WordBench京都
  2. 2. はじめに
  3. 3. 今日体験してほしいこと • PHPの知識無しでもテーマは作れる • テーマは全部自作しなくてもいい • テーマ制作は思っているよりは簡単
  4. 4. 名前:岡本秀高 仕事:PHPエンジニア 地域:京都∼滋賀 その他:WordBench京都モデレーター 興味:WP-API, React.js, Polymer,JSON-LD
  5. 5. 一応公式テーマ作者です https://profiles.wordpress.org/hideokamoto
  6. 6. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ 全体的に増量してます!
  7. 7. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
  8. 8. テーマの作り方は 1つじゃない
  9. 9. テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
  10. 10. テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
  11. 11. フルスクラッチで作る 一からデザインを作成し、 作成したHTMLにWordPressを実装させる作り方 • メリット:自由度MAX • デメリット:PHP知識必要
  12. 12. テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
  13. 13. 子テーマとして作る 既にあるテーマを活用し、 「子テーマ」として機能を上書きする作り方 • メリット:編集範囲が少なく済む • デメリット:親テーマに仕様が依存しやすい
  14. 14. テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
  15. 15. スターターテーマで作る 最低限のPHPが実装されたテーマに CSSでデザインを追加する作り方 • メリット:PHP知識が無くても作れる • デメリット:スターターテーマの仕様に依存、        英語
  16. 16. 高野さんによるまとめ 作成方法 長所 短所 スクラッチ開発 コントロールできる 制作に時間が掛かる 子テーマ 素早く機能を 取り入れられる 親テーマへの依存が 大きい スターターテーマ 学習しやすい 元テーマの更新を 継承しない http://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/
  17. 17. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
  18. 18. PHPが書けなくても テーマは作れる
  19. 19. スターターテーマでテーマを作る スターターテーマを使えば、 必要なPHPが った状態でテーマ制作が可能 • _s:http://underscores.me/ • bones:http://themble.com/bones/  など
  20. 20. What about _s?
  21. 21. _s(underscores) Automatticが作ったスターターテーマ テーマに必要なPHPファイルが一式 っている CSSが書ければオリジナルテーマが作れる
  22. 22. https://wordpress.org/themes/hew/
  23. 23. https://wordpress.org/themes/cinnamon/
  24. 24. https://wordpress.org/themes/business-leader/
  25. 25. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
  26. 26. _sの中身と使い方を 簡単にご紹介
  27. 27. 1_sのセットアップ
  28. 28. _sのセットアップ 1. テーマファイルを作成 2. 開発環境へインストール 3. テーマの有効化
  29. 29. _sのセットアップ 1.テーマファイルを作成 2. 開発環境へインストール 3. テーマの有効化
  30. 30. http://underscores.me/
  31. 31. テーマファイルを作成する • 基本設定は_sのDLページで設定可能 • とりあえず使ってみる場合なら、  「Theme Name」を入力するだけ • 細かい設定は「Advanced Options」をクリック
  32. 32. テーマ名を入れて クリック!
  33. 33. Advanced Options • スラッグ・作者・説明文を入力できる • スラッグは関数同士の衝突回避に使われる  twentyeleven_foo() 、twentyten_foo() など • 入力したらGENERATEでダウンロード開始
  34. 34. _sのセットアップ 1. テーマファイルを作成 2.開発環境へインストール 3. テーマの有効化
  35. 35. 開発環境へアップロード • 先ほどDLしたzipを管理画面からアップロード • テーマ一覧に表示されればOK • テストデータを入れておくと便利  http://nuuno.net/note/wordpress-testdata/
  36. 36. クリック!
  37. 37. 先ほどDLしたzipファイルを アップロードしよう
  38. 38. _sのセットアップ 1. テーマファイルを作成 2. 開発環境へインストール 3.テーマの有効化
  39. 39. 「有効化」
  40. 40. 2知って得する _sの内部構造
  41. 41. No.1 テンプレート階層 知って得する_sの内部構造
  42. 42. テンプレート階層 archive.php single.php page.php404.php search.php index.php アーカイブ カテゴリ タグ 著者 etc.. 個別投稿 メディア ブログ カスタム投稿 etc.. 404ページ 固定ページ 検索結果 TOPページや 下記以外のページ
  43. 43. 詳細はCodexで http://bit.ly/1Lfpj7u
  44. 44. No.2 テンプレートパーツ 知って得する_sの内部構造
  45. 45. _sでは、 パーツ別にPHPが 分割されている
  46. 46. header.php sidebar.php content.php footer.php comment.php
  47. 47. content.phpは 更に細分化されている
  48. 48. コンテンツ階層 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 下記に該当しない コンテンツ
  49. 49. No.3 カスタム要素 知って得する_sの内部構造
  50. 50. その他のカスタム要素 • jsディレクトリ:_sデフォルトのJS置き場 • layoutディレクトリ:レイアウト用CSS置き場 • languagesディレクトリ:翻訳ファイル置き場 • incディレクトリ:拡張機能置き場
  51. 51. jsディレクトリ _sにデフォルトで使用されている JavaScriptファイルなどがある
  52. 52. jsディレクトリ • skip-link-focus-fix.js: • customizer.js   : • navigation.js   :
  53. 53. jsディレクトリ • skip-link-focus-fix.js:バグFIX(っぽい) • customizer.js   :カスタマイザー用JS • navigation.js   :ドロップダウンナビ用JS
  54. 54. layoutsディレクトリ レイアウト調整用CSSが ちょっとだけ入ってるディレクトリ
  55. 55. layoutsディレクトリ • content-sidebar.css: • sidebar-content.css:
  56. 56. layoutsディレクトリ • content-sidebar.css:サイドバーを右に置くCSS • sidebar-content.css:サイドバーを左に置くCSS 中身をstyle.cssにコピペでもOK
  57. 57. languagesディレクトリ 翻訳ファイルがここに入ってます
  58. 58. _sは基本英語 「カテゴリ」や「タグ」「コメント」は、 日本語で表示させたい・・・!
  59. 59. http://bit.ly/1NlLeuS からja.moをDL
  60. 60. ja.moをlanguagesディレクトリへ
  61. 61. ja.moで翻訳完了! これが・・・
  62. 62. ja.moで翻訳完了! こうなる ↓翻訳の詳細(GitHub)↓ http://bit.ly/1KfIvmK
  63. 63. incディレクトリ オプション機能やカスタマイズ機能が まとめられているディレクトリ
  64. 64. incディレクトリ • custom-header.php: • customizer.php  : • extras.php    : • jetpack.php    : • template-tags.php :
  65. 65. incディレクトリ • custom-header.php:「ヘッダー画像」関係 • customizer.php  :「カスタマイザー」関係 • extras.php    :クラスやtitle拡張 • jetpack.php    :Jetpackの無限スクロール対応 • template-tags.php :テンプレートタグ拡張
  66. 66. その他 • rtl.css:SSCの用語言く書らか右
  67. 67. 3テーマに スタイルをつける
  68. 68. テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. <休憩> 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
  69. 69. テーマにスタイルをつける 1.基本的なスタイル調整方法 2. <休憩> 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
  70. 70. 基本的なスタイル調整方法 • Chromeやfirefoxの開発ツールを利用しよう • 調整方法は通常のHTMLファイルと一緒 • WordPressならではのクラスを使って条件分け
  71. 71. Chrome開発ツールの場合 Mac:[Option]キー + [command]キー + [i]キー  Win: F12
  72. 72. Chrome開発ツールの場合 赤枠内にCSSを書いていく
  73. 73. 最後にstyle.cssに 転記して保存しよう
  74. 74. ちょっとだけ Live Demo
  75. 75. テーマにスタイルをつける 1. 基本的なスタイル調整方法 2.<休憩> 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
  76. 76. 今の間に _sを有効化させてね ヽ(・ ・ )ノ
  77. 77. テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. <休憩> 3.とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
  78. 78. とりあえずみんなで触ってみよう 1. サイトを2カラムにする 2. 記事部分のスタイルを調整する 3. ヘッダーまわりにスタイルを追加する 4. アイキャッチ画像をサイトに表示させる
  79. 79. サイトを 2カラムにする
  80. 80. サイトを2カラムにする layoutsディレクトリのCSSを、style.cssにコピペ
  81. 81. サイトを2カラムにする content-sidebar.cssなら右サイドバー sidebar-content.cssなら左サイドバーになる
  82. 82. サイトを2カラムにする ついでに左右に余白を設けよう
  83. 83. サイトを2カラムにする bodyか.siteにCSSを追加する
  84. 84. サイトを2カラムにする .site { max-width: 1024px; margin: 0 auto; } style.cssに追加
  85. 85. 記事部分の スタイルを調整する
  86. 86. 記事部分のスタイルを調整する 記事部分に余白と枠線をつけてみる
  87. 87. 記事部分のスタイルを調整する .hentryにCSSを書き足そう
  88. 88. 記事部分のスタイルを調整する .hentry { margin: 0 0 1.5em; padding: 20px; border: 1px solid #e5e5e5; } style.cssの770行目近辺を探そう
  89. 89. 記事部分のスタイルを調整する サイドバーとの余白も調整する
  90. 90. 記事部分のスタイルを調整する .site-main { margin: 0 25% 0 0; padding: 10px; } style.cssに追加する
  91. 91. ヘッダーまわりに スタイルを追加する
  92. 92. 下層ページでタイトルがpタグになる デフォルトだとTOPと下層でスタイルがバラバラに・・・
  93. 93. .site-titleクラスを使ってスタイル調整
  94. 94. 記事部分のスタイルを調整する .site-title{ font-size: 2rem; font-weight: bold; margin: 0.5em auto; } .site-title,.site-description { text-align: center; } style.cssの一番下に書き足せばOK
  95. 95. ついでにナビゲーションも
  96. 96. ナビゲーションを調整する .main-navigation ul { background-color: #ffffff; border-top: 1px solid #f5f5f5; } .main-navigation li { border-left: 1px solid #f5f5f5; border-right: 1px solid #f5f5f5; } .main-navigation li:first-child{ border-left: 0px; } .main-navigation a { padding: 10px; } header{ border-bottom: 1px solid #f5f5f5; } style.cssの一番下に書き足せばOK
  97. 97. サイトっぽくなってきた
  98. 98. アイキャッチ画像を サイトに表示させる
  99. 99. template-parts/content.php <?php /** * Template part for displaying posts. * * @package _s */ ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <?php the_post_thumbnail();?> 10-11行目の間に書き足そう
  100. 100. 記事タイトルの上に アイキャッチ画像が表示される
  101. 101. こんな調子でCSSを いじっていくと・・・
  102. 102. 例えばこんな感じになる
  103. 103. なんやかんやしたstyle.css http://bit.ly/1KALb08
  104. 104. テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. <休憩> 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
  105. 105. WordPressならではのクラスを活用する • 動的にクラスを出す箇所が複数ある • body_class()やpost_class()で設定する • 上手く活用すれば記事別にスタイルを変更できる!
  106. 106. WordPressならではのクラスを活用する • 特定のタグの投稿のみ非表示   .tag-投稿タグのスラッグ{ display:none;} • 検索結果ページのみ赤文字に   .search-results{ color:red} • 先頭固定記事のみ黒背景   .sticky{ background-color: black}
  107. 107. クラスの出力サンプルをもっと知る Codexにサンプルがいろいろ載ってます! • body_class  http://wpdocs.osdn.jp/テンプレートタグ/body_class • post_class  http://wpdocs.osdn.jp/テンプレートタグ/post_class
  108. 108. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
  109. 109. トラブルシューティング 1. jQueryが使えない! 2. functions.php触ったら真っ白になった! 3. レイアウトが思ったとおりにならない!
  110. 110. jQueryが使えない! • WordPress本体のjQueryでは「$」が使えない • 他のJSライブラリとの衝突を回避するため • 「jQuery」か無名関数でラップして使おう
  111. 111. jQueryが使えない! (function($){ $('#foo').click(); })(jQuery);
  112. 112. functions.php触ったら真っ白になった! • functions.phpにPHPエラーが出ると管理画面も死ぬ • functions.phpは必ずバックアップを(git推奨) • ローカルでテストしてから本番反映しよう
  113. 113. レイアウトが思ったとおりにならない! • CSSのミスかも・・・? • 意図したテンプレートが読まれていない可能性あり • テンプレート階層を見直そう:http://bit.ly/1Lfpj7u
  114. 114. アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • より踏み込んだカスタマイズへ
  115. 115. _sを安全にいじる たった1つの原則
  116. 116. 自信がないなら PHPは使わない
  117. 117. オリジナルPHPは使わない • オリジナルPHPを使うとセキュリティがつらい  echo とか echo とか echoとか • PHPを書くならテンプレートタグで  http://wpdocs.osdn.jp/テンプレートタグ • ヘッダー画像はコピペでできる
  118. 118. inc/custome-header.php 8-12行目をコピーしよう!
  119. 119. header.php コピーしたPHPを貼り付けよう!
  120. 120. ヘッダー画像が表示された!
  121. 121. JavaScriptやCSSを 追加で読み込みさせるなら
  122. 122. wp_enqueue_script() wp_enqueue_style()
  123. 123. 外部ファイルは wp_head()かwp_footer() で読み込む
  124. 124. 任意の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
  125. 125. 任意の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
  126. 126. プラグインでも使うので、 wp_enqueue_scriptと wp_enqueue_styleは 覚えておくと便利b
  127. 127. enjoy !

×