WordBench京都版 _sハンズオン
>100 Views
August 02, 15
スライド概要
WordCamp Kansai 2015 テーマ作成ハンズオン再演。
_sに絞ってWordBench京都向けにリメイクしています。
Developer
関連スライド
各ページのテキスト
WordPressはじめの一歩 テーマ作成ハンズオン 2015/08/02 WordBench京都
はじめに
今日体験してほしいこと • PHPの知識無しでもテーマは作れる • テーマは全部自作しなくてもいい • テーマ制作は思っているよりは簡単
名前：岡本秀高 仕事：PHPエンジニア 地域：京都〜滋賀 その他：WordBench京都モデレーター 興味：WP-API, React.js, Polymer,JSON-LD
一応公式テーマ作者です https://profiles.wordpress.org/hideokamoto
アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • 全体的に増量してます！ _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
テーマの作り方は １つじゃない
テーマ作成３つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
テーマ作成３つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
フルスクラッチで作る 一からデザインを作成し、 作成したHTMLにWordPressを実装させる作り方 • メリット：自由度MAX • デメリット：PHP知識必要
テーマ作成３つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
子テーマとして作る 既にあるテーマを活用し、 「子テーマ」として機能を上書きする作り方 • メリット：編集範囲が少なく済む • デメリット：親テーマに仕様が依存しやすい
テーマ作成３つの方法 • フルスクラッチ • 子テーマ • スターターテーマ
スターターテーマで作る 最低限のPHPが実装されたテーマに CSSでデザインを追加する作り方 • メリット：PHP知識が無くても作れる • デメリット：スターターテーマの仕様に依存、 英語
高野さんによるまとめ 作成方法 長所 短所 スクラッチ開発 コントロールできる 制作に時間が掛かる 子テーマ 素早く機能を 取り入れられる 親テーマへの依存が 大きい 学習しやすい 元テーマの更新を 継承しない スターターテーマ http://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/
アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
PHPが書けなくても テーマは作れる
スターターテーマでテーマを作る スターターテーマを使えば、 必要なPHPが揃った状態でテーマ制作が可能 • _s：http://underscores.me/ • bones：http://themble.com/bones/ など
What about ̲s？
̲s(underscores) Automatticが作ったスターターテーマ テーマに必要なPHPファイルが一式揃っている CSSが書ければオリジナルテーマが作れる
https://wordpress.org/themes/hew/
https://wordpress.org/themes/cinnamon/
https://wordpress.org/themes/business-leader/
アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
̲sの中身と使い方を 簡単にご紹介
1 _sのセットアップ
_sのセットアップ 1. テーマファイルを作成 2. 開発環境へインストール 3. テーマの有効化
_sのセットアップ 1.テーマファイルを作成 2. 開発環境へインストール 3. テーマの有効化
http://underscores.me/
テーマファイルを作成する • 基本設定は_sのDLページで設定可能 • とりあえず使ってみる場合なら、 「Theme Name」を入力するだけ • 細かい設定は「Advanced Options」をクリック
テーマ名を入れて クリック！
Advanced Options • スラッグ・作者・説明文を入力できる • スラッグは関数同士の衝突回避に使われる twentyeleven_foo() 、twentyten_foo() など • 入力したらGENERATEでダウンロード開始
_sのセットアップ 1. テーマファイルを作成 2.開発環境へインストール 3. テーマの有効化
開発環境へアップロード • 先ほどDLしたzipを管理画面からアップロード • テーマ一覧に表示されればOK • テストデータを入れておくと便利 http://nuuno.net/note/wordpress-testdata/
クリック！
先ほどDLしたzipファイルを アップロードしよう
_sのセットアップ 1. テーマファイルを作成 2. 開発環境へインストール 3.テーマの有効化
「有効化」
2 知って得する _sの内部構造
No.１ テンプレート階層 知って得する_sの内部構造
テンプレート階層 index.php archive.php single.php アーカイブ 個別投稿 カテゴリ タグ 著者 etc.. メディア ブログ カスタム投稿 etc.. 404.php TOPページや 下記以外のページ page.php 404ページ 固定ページ search.php 検索結果
詳細はCodexで http://bit.ly/1Lfpj7u
No.２ テンプレートパーツ 知って得する_sの内部構造
_sでは、 パーツ別にPHPが 分割されている
header.php content.php sidebar.php comment.php footer.php
content.phpは 更に細分化されている
コンテンツ階層 content.php 下記に該当しない コンテンツ contentnone.php contentsingle.php contentpage.php contentsearch.php 該当記事なし 個別投稿 固定ページ 検索結果 index.php search.php archive.php single.php page.php search.php
No.３ カスタム要素 知って得する_sの内部構造
その他のカスタム要素 • jsディレクトリ：_sデフォルトのJS置き場 • layoutディレクトリ：レイアウト用CSS置き場 • languagesディレクトリ：翻訳ファイル置き場 • incディレクトリ：拡張機能置き場
jsディレクトリ _sにデフォルトで使用されている JavaScriptファイルなどがある
jsディレクトリ • skip-link-focus-fix.js： • customizer.js ： • navigation.js ：
jsディレクトリ • skip-link-focus-fix.js：バグFIX（っぽい） • customizer.js ：カスタマイザー用JS • navigation.js ：ドロップダウンナビ用JS
layoutsディレクトリ レイアウト調整用CSSが ちょっとだけ入ってるディレクトリ
layoutsディレクトリ • content-sidebar.css： • sidebar-content.css：
layoutsディレクトリ • content-sidebar.css：サイドバーを右に置くCSS • sidebar-content.css：サイドバーを左に置くCSS 中身をstyle.cssにコピペでもOK
languagesディレクトリ 翻訳ファイルがここに入ってます
_sは基本英語 「カテゴリ」や「タグ」「コメント」は、 日本語で表示させたい・・・！
http://bit.ly/1NlLeuS からja.moをDL
ja.moをlanguagesディレクトリへ
ja.moで翻訳完了！ これが・・・
ja.moで翻訳完了！ こうなる ↓翻訳の詳細（GitHub）↓ http://bit.ly/1KfIvmK
incディレクトリ オプション機能やカスタマイズ機能が まとめられているディレクトリ
incディレクトリ • custom-header.php： • customizer.php ： • extras.php ： • jetpack.php ： • template-tags.php ：
incディレクトリ • custom-header.php：「ヘッダー画像」関係 • customizer.php ：「カスタマイザー」関係 • extras.php ：クラスやtitle拡張 • jetpack.php ：Jetpackの無限スクロール対応 • template-tags.php ：テンプレートタグ拡張
その他 • rtl.css：SSCの用語言く書らか右
3 テーマに スタイルをつける
テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. ＜休憩＞ 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
テーマにスタイルをつける 1.基本的なスタイル調整方法 2. ＜休憩＞ 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
基本的なスタイル調整方法 • Chromeやfirefoxの開発ツールを利用しよう • 調整方法は通常のHTMLファイルと一緒 • WordPressならではのクラスを使って条件分け
Chrome開発ツールの場合 Mac:[Option]キー + [command]キー Win: F12 + [i]キー
Chrome開発ツールの場合 赤枠内にCSSを書いていく
最後にstyle.cssに 転記して保存しよう
ちょっとだけ Live Demo
テーマにスタイルをつける 1. 基本的なスタイル調整方法 2.＜休憩＞ 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
今の間に _sを有効化させてね ヽ(・ ・ )ﾉ
テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. ＜休憩＞ 3.とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
とりあえずみんなで触ってみよう 1. サイトを２カラムにする 2. 記事部分のスタイルを調整する 3. ヘッダーまわりにスタイルを追加する 4. アイキャッチ画像をサイトに表示させる
サイトを ２カラムにする
サイトを２カラムにする layoutsディレクトリのCSSを、style.cssにコピペ
サイトを２カラムにする content-sidebar.cssなら右サイドバー sidebar-content.cssなら左サイドバーになる
サイトを２カラムにする ついでに左右に余白を設けよう
サイトを２カラムにする bodyか.siteにCSSを追加する
サイトを２カラムにする .site { max-width: 1024px; margin: 0 auto; } style.cssに追加
記事部分の スタイルを調整する
記事部分のスタイルを調整する 記事部分に余白と枠線をつけてみる
記事部分のスタイルを調整する .hentryにCSSを書き足そう
記事部分のスタイルを調整する .hentry { margin: 0 0 1.5em; padding: 20px; border: 1px solid #e5e5e5; } style.cssの770行目近辺を探そう
記事部分のスタイルを調整する サイドバーとの余白も調整する
記事部分のスタイルを調整する .site-main { margin: 0 25% 0 0; padding: 10px; } style.cssに追加する
ヘッダーまわりに スタイルを追加する
下層ページでタイトルがpタグになる デフォルトだとTOPと下層でスタイルがバラバラに・・・
.site-titleクラスを使ってスタイル調整
記事部分のスタイルを調整する
.site-title{
font-size: 2rem;
font-weight: bold;
margin: 0.5em auto;
}
.site-title,.site-description {
text-align: center;
}
style.cssの一番下に書き足せばOK
ついでにナビゲーションも
ナビゲーションを調整する .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
サイトっぽくなってきた
アイキャッチ画像を サイトに表示させる
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行目の間に書き足そう
記事タイトルの上に アイキャッチ画像が表示される
こんな調子でCSSを いじっていくと・・・
例えばこんな感じになる
なんやかんやしたstyle.css http://bit.ly/1KALb08
テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. ＜休憩＞ 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する
WordPressならではのクラスを活用する • 動的にクラスを出す箇所が複数ある • body_class()やpost_class()で設定する • 上手く活用すれば記事別にスタイルを変更できる！
WordPressならではのクラスを活用する • 特定のタグの投稿のみ非表示 .tag-投稿タグのスラッグ{ display:none;} • 検索結果ページのみ赤文字に .search-results{ color:red} • 先頭固定記事のみ黒背景 .sticky{ background-color: black}
クラスの出力サンプルをもっと知る Codexにサンプルがいろいろ載ってます！ • body_class http://wpdocs.osdn.jp/テンプレートタグ/body_class • post_class http://wpdocs.osdn.jp/テンプレートタグ/post_class
アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ
トラブルシューティング 1. jQueryが使えない！ 2. functions.php触ったら真っ白になった！ 3. レイアウトが思ったとおりにならない！
jQueryが使えない！ • WordPress本体のjQueryでは「$」が使えない • 他のJSライブラリとの衝突を回避するため • 「jQuery」か無名関数でラップして使おう
jQueryが使えない！ (function($){ $('#foo').click(); })(jQuery);
functions.php触ったら真っ白になった！ • functions.phpにPHPエラーが出ると管理画面も死ぬ • functions.phpは必ずバックアップを（git推奨） • ローカルでテストしてから本番反映しよう
レイアウトが思ったとおりにならない！ • CSSのミスかも・・・？ • 意図したテンプレートが読まれていない可能性あり • テンプレート階層を見直そう：http://bit.ly/1Lfpj7u
アジェンダ • テーマ作成３つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • より踏み込んだカスタマイズへ
̲sを安全にいじる たった１つの原則
自信がないなら PHPは使わない
オリジナルPHPは使わない • オリジナルPHPを使うとセキュリティがつらい echo とか echo とか echoとか • PHPを書くならテンプレートタグで http://wpdocs.osdn.jp/テンプレートタグ • ヘッダー画像はコピペでできる
inc/custome-header.php 8-12行目をコピーしよう！
header.php コピーしたPHPを貼り付けよう！
ヘッダー画像が表示された！
JavaScriptやCSSを 追加で読み込みさせるなら
wp̲enqueue̲script() wp̲enqueue̲style()
外部ファイルは wp_head()かwp_footer() で読み込む
任意の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
任意の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
プラグインでも使うので、 wp̲enqueue̲scriptと wp̲enqueue̲styleは 覚えておくと便利b
enjoy !