WordBench京都版 _sハンズオン
11 likes2,330 views
WordCamp Kansai 2015 テーマ作成ハンズオン再演。 _sに絞ってWordBench京都向けにリメイクしています。
![Chrome開発ツールの場合
Mac:[Option]キー + [command]キー + [i]キー
Win: F12](https://image.slidesharecdn.com/wbs-150801151335-lva1-app6892/85/WordBench-_s-73-320.jpg)
WordBench京都版 _sハンズオン
- 2. はじめに
- 3. 今日体験してほしいこと • PHPの知識無しでもテーマは作れる • テーマは全部自作しなくてもいい • テーマ制作は思っているよりは簡単
- 6. アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ 全体的に増量してます！
- 7. アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
- 9. テーマ作成３つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
- 10. テーマ作成３つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
- 12. テーマ作成３つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
- 14. テーマ作成３つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
- 16. 高野さんによるまとめ 作成方法 長所 短所 スクラッチ開発 コントロールできる 制作に時間が掛かる 子テーマ 素早く機能を 取り入れられる 親テーマへの依存が 大きい スターターテーマ 学習しやすい 元テーマの更新を 継承しない http://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/
- 17. アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
- 19. スターターテーマでテーマを作る スターターテーマを使えば、 必要なPHPが った状態でテーマ制作が可能 • _s：http://underscores.me/ • bones：http://themble.com/bones/ など
- 20. What about _s？
- 25. アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
- 27. 1_sのセットアップ
- 28. _sのセットアップ 1. テーマファイルを作成 2. 開発環境へインストール 3. テーマの有効化
- 31. テーマファイルを作成する • 基本設定は_sのDLページで設定可能 • とりあえず使ってみる場合なら、 「Theme Name」を入力するだけ • 細かい設定は「Advanced Options」をクリック
- 32. テーマ名を入れて クリック！
- 34. Advanced Options • スラッグ・作者・説明文を入力できる • スラッグは関数同士の衝突回避に使われる twentyeleven_foo() 、twentyten_foo() など • 入力したらGENERATEでダウンロード開始
- 36. 開発環境へアップロード • 先ほどDLしたzipを管理画面からアップロード • テーマ一覧に表示されればOK • テストデータを入れておくと便利 http://nuuno.net/note/wordpress-testdata/
- 37. クリック！
- 40. 「有効化」
- 42. 2知って得する _sの内部構造
- 44. テンプレート階層 archive.php single.php page.php404.php search.php index.php アーカイブ カテゴリ タグ 著者 etc.. 個別投稿 メディア ブログ カスタム投稿 etc.. 404ページ 固定ページ 検索結果 TOPページや 下記以外のページ
- 52. その他のカスタム要素 • jsディレクトリ：_sデフォルトのJS置き場 • layoutディレクトリ：レイアウト用CSS置き場 • languagesディレクトリ：翻訳ファイル置き場 • incディレクトリ：拡張機能置き場
- 54. jsディレクトリ • skip-link-focus-fix.js： • customizer.js ： • navigation.js ：
- 55. jsディレクトリ • skip-link-focus-fix.js：バグFIX（っぽい） • customizer.js ：カスタマイザー用JS • navigation.js ：ドロップダウンナビ用JS
- 66. incディレクトリ • custom-header.php： • customizer.php ： • extras.php ： • jetpack.php ： • template-tags.php ：
- 67. incディレクトリ • custom-header.php：「ヘッダー画像」関係 • customizer.php ：「カスタマイザー」関係 • extras.php ：クラスやtitle拡張 • jetpack.php ：Jetpackの無限スクロール対応 • template-tags.php ：テンプレートタグ拡張
- 69. 3テーマに スタイルをつける
- 70. テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. ＜休憩＞ 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
- 71. テーマにスタイルをつける 1.基本的なスタイル調整方法 2. ＜休憩＞ 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
- 72. 基本的なスタイル調整方法 • Chromeやfirefoxの開発ツールを利用しよう • 調整方法は通常のHTMLファイルと一緒 • WordPressならではのクラスを使って条件分け
- 76. ちょっとだけ Live Demo
- 77. テーマにスタイルをつける 1. 基本的なスタイル調整方法 2.＜休憩＞ 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
- 79. テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. ＜休憩＞ 3.とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
- 80. とりあえずみんなで触ってみよう 1. サイトを２カラムにする 2. 記事部分のスタイルを調整する 3. ヘッダーまわりにスタイルを追加する 4. アイキャッチ画像をサイトに表示させる
- 81. サイトを ２カラムにする
- 86. サイトを２カラムにする .site { max-width: 1024px; margin: 0 auto; } style.cssに追加
- 87. 記事部分の スタイルを調整する
- 90. 記事部分のスタイルを調整する .hentry { margin: 0 0 1.5em; padding: 20px; border: 1px solid #e5e5e5; } style.cssの770行目近辺を探そう
- 92. 記事部分のスタイルを調整する .site-main { margin: 0 25% 0 0; padding: 10px; } style.cssに追加する
- 96. 記事部分のスタイルを調整する .site-title{ font-size: 2rem; font-weight: bold; margin: 0.5em auto; } .site-title,.site-description { text-align: center; } style.cssの一番下に書き足せばOK
- 97. ついでにナビゲーションも
- 98. ナビゲーションを調整する .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
- 99. サイトっぽくなってきた
- 100. アイキャッチ画像を サイトに表示させる
- 101. 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行目の間に書き足そう
- 104. 例えばこんな感じになる
- 106. テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. ＜休憩＞ 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
- 107. WordPressならではのクラスを活用する • 動的にクラスを出す箇所が複数ある • body_class()やpost_class()で設定する • 上手く活用すれば記事別にスタイルを変更できる！
- 108. WordPressならではのクラスを活用する • 特定のタグの投稿のみ非表示 .tag-投稿タグのスラッグ{ display:none;} • 検索結果ページのみ赤文字に .search-results{ color:red} • 先頭固定記事のみ黒背景 .sticky{ background-color: black}
- 110. アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
- 111. トラブルシューティング 1. jQueryが使えない！ 2. functions.php触ったら真っ白になった！ 3. レイアウトが思ったとおりにならない！
- 112. jQueryが使えない！ • WordPress本体のjQueryでは「$」が使えない • 他のJSライブラリとの衝突を回避するため • 「jQuery」か無名関数でラップして使おう
- 114. functions.php触ったら真っ白になった！ • functions.phpにPHPエラーが出ると管理画面も死ぬ • functions.phpは必ずバックアップを（git推奨） • ローカルでテストしてから本番反映しよう
- 115. レイアウトが思ったとおりにならない！ • CSSのミスかも・・・？ • 意図したテンプレートが読まれていない可能性あり • テンプレート階層を見直そう：http://bit.ly/1Lfpj7u
- 116. アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • より踏み込んだカスタマイズへ
- 117. _sを安全にいじる たった１つの原則
- 118. 自信がないなら PHPは使わない
- 119. オリジナルPHPは使わない • オリジナルPHPを使うとセキュリティがつらい echo とか echo とか echoとか • PHPを書くならテンプレートタグで http://wpdocs.osdn.jp/テンプレートタグ • ヘッダー画像はコピペでできる
- 122. ヘッダー画像が表示された！
- 126. 任意の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
- 127. 任意の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
- 129. enjoy !