WordBench京都版 _sハンズオン

>100 Views

August 02, 15

スライド概要

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

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

WordPressはじめの一歩 テーマ作成ハンズオン 2015/08/02 WordBench京都

2.

はじめに

3.

今日体験してほしいこと • PHPの知識無しでもテーマは作れる • テーマは全部自作しなくてもいい • テーマ制作は思っているよりは簡単

4.

名前:岡本秀高 仕事:PHPエンジニア 地域:京都〜滋賀 その他:WordBench京都モデレーター 興味:WP-API, React.js, Polymer,JSON-LD

5.

一応公式テーマ作者です https://profiles.wordpress.org/hideokamoto

6.

アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • 全体的に増量してます! _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ

7.

アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ

8.

テーマの作り方は 1つじゃない

9.

テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ

10.

テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ

11.

フルスクラッチで作る 一からデザインを作成し、 作成したHTMLにWordPressを実装させる作り方 • メリット:自由度MAX • デメリット:PHP知識必要

12.

テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ

13.

子テーマとして作る 既にあるテーマを活用し、 「子テーマ」として機能を上書きする作り方 • メリット:編集範囲が少なく済む • デメリット:親テーマに仕様が依存しやすい

14.

テーマ作成3つの方法 • フルスクラッチ • 子テーマ • スターターテーマ

15.

スターターテーマで作る 最低限のPHPが実装されたテーマに CSSでデザインを追加する作り方 • メリット:PHP知識が無くても作れる • デメリット:スターターテーマの仕様に依存、 英語

16.

高野さんによるまとめ 作成方法 長所 短所 スクラッチ開発 コントロールできる 制作に時間が掛かる 子テーマ 素早く機能を 取り入れられる 親テーマへの依存が 大きい 学習しやすい 元テーマの更新を 継承しない スターターテーマ http://ja.naoko.cc/2012/12/02/wordpress-theme-development-approach/

17.

アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ

18.

PHPが書けなくても テーマは作れる

19.

スターターテーマでテーマを作る スターターテーマを使えば、 必要なPHPが揃った状態でテーマ制作が可能 • _s:http://underscores.me/ • bones:http://themble.com/bones/ など

20.

What about ̲s?

21.

̲s(underscores) Automatticが作ったスターターテーマ テーマに必要なPHPファイルが一式揃っている CSSが書ければオリジナルテーマが作れる

22.

https://wordpress.org/themes/hew/

23.

https://wordpress.org/themes/cinnamon/

24.

https://wordpress.org/themes/business-leader/

25.

アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ

26.

̲sの中身と使い方を 簡単にご紹介

27.

1 _sのセットアップ

28.

_sのセットアップ 1. テーマファイルを作成 2. 開発環境へインストール 3. テーマの有効化

29.

_sのセットアップ 1.テーマファイルを作成 2. 開発環境へインストール 3. テーマの有効化

30.

http://underscores.me/

31.

テーマファイルを作成する • 基本設定は_sのDLページで設定可能 • とりあえず使ってみる場合なら、 「Theme Name」を入力するだけ • 細かい設定は「Advanced Options」をクリック

32.

テーマ名を入れて クリック!

34.

Advanced Options • スラッグ・作者・説明文を入力できる • スラッグは関数同士の衝突回避に使われる twentyeleven_foo() 、twentyten_foo() など • 入力したらGENERATEでダウンロード開始

35.

_sのセットアップ 1. テーマファイルを作成 2.開発環境へインストール 3. テーマの有効化

36.

開発環境へアップロード • 先ほどDLしたzipを管理画面からアップロード • テーマ一覧に表示されればOK • テストデータを入れておくと便利 http://nuuno.net/note/wordpress-testdata/

37.

クリック!

38.

先ほどDLしたzipファイルを アップロードしよう

39.

_sのセットアップ 1. テーマファイルを作成 2. 開発環境へインストール 3.テーマの有効化

40.

「有効化」

42.

2 知って得する _sの内部構造

43.

No.1 テンプレート階層 知って得する_sの内部構造

44.

テンプレート階層 index.php archive.php single.php アーカイブ 個別投稿 カテゴリ タグ 著者 etc.. メディア ブログ カスタム投稿 etc.. 404.php TOPページや 下記以外のページ page.php 404ページ 固定ページ search.php 検索結果

45.

詳細はCodexで http://bit.ly/1Lfpj7u

46.

No.2 テンプレートパーツ 知って得する_sの内部構造

47.

_sでは、 パーツ別にPHPが 分割されている

48.

header.php content.php sidebar.php comment.php footer.php

49.

content.phpは 更に細分化されている

50.

コンテンツ階層 content.php 下記に該当しない コンテンツ contentnone.php contentsingle.php contentpage.php contentsearch.php 該当記事なし 個別投稿 固定ページ 検索結果 index.php search.php archive.php single.php page.php search.php

51.

No.3 カスタム要素 知って得する_sの内部構造

52.

その他のカスタム要素 • jsディレクトリ:_sデフォルトのJS置き場 • layoutディレクトリ:レイアウト用CSS置き場 • languagesディレクトリ:翻訳ファイル置き場 • incディレクトリ:拡張機能置き場

53.

jsディレクトリ _sにデフォルトで使用されている JavaScriptファイルなどがある

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

56.

layoutsディレクトリ レイアウト調整用CSSが ちょっとだけ入ってるディレクトリ

57.

layoutsディレクトリ • content-sidebar.css: • sidebar-content.css:

58.

layoutsディレクトリ • content-sidebar.css:サイドバーを右に置くCSS • sidebar-content.css:サイドバーを左に置くCSS 中身をstyle.cssにコピペでもOK

59.

languagesディレクトリ 翻訳ファイルがここに入ってます

60.

_sは基本英語 「カテゴリ」や「タグ」「コメント」は、 日本語で表示させたい・・・!

61.

http://bit.ly/1NlLeuS からja.moをDL

62.

ja.moをlanguagesディレクトリへ

63.

ja.moで翻訳完了! これが・・・

64.

ja.moで翻訳完了! こうなる ↓翻訳の詳細(GitHub)↓ http://bit.ly/1KfIvmK

65.

incディレクトリ オプション機能やカスタマイズ機能が まとめられているディレクトリ

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 :テンプレートタグ拡張

68.

その他 • rtl.css:SSCの用語言く書らか右

69.

3 テーマに スタイルをつける

70.

テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. <休憩> 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する

71.

テーマにスタイルをつける 1.基本的なスタイル調整方法 2. <休憩> 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する

72.

基本的なスタイル調整方法 • Chromeやfirefoxの開発ツールを利用しよう • 調整方法は通常のHTMLファイルと一緒 • WordPressならではのクラスを使って条件分け

73.

Chrome開発ツールの場合 Mac:[Option]キー + [command]キー Win: F12 + [i]キー

74.

Chrome開発ツールの場合 赤枠内にCSSを書いていく

75.

最後にstyle.cssに 転記して保存しよう

76.

ちょっとだけ Live Demo

77.

テーマにスタイルをつける 1. 基本的なスタイル調整方法 2.<休憩> 3. とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する

78.

今の間に _sを有効化させてね ヽ(・ ・ )ノ

79.

テーマにスタイルをつける 1. 基本的なスタイル調整方法 2. <休憩> 3.とりあえずみんなで触ってみよう 4. WordPressならではのクラスを活用する

80.

とりあえずみんなで触ってみよう 1. サイトを2カラムにする 2. 記事部分のスタイルを調整する 3. ヘッダーまわりにスタイルを追加する 4. アイキャッチ画像をサイトに表示させる

81.

サイトを 2カラムにする

82.

サイトを2カラムにする layoutsディレクトリのCSSを、style.cssにコピペ

83.

サイトを2カラムにする content-sidebar.cssなら右サイドバー sidebar-content.cssなら左サイドバーになる

84.

サイトを2カラムにする ついでに左右に余白を設けよう

85.

サイトを2カラムにする bodyか.siteにCSSを追加する

86.

サイトを2カラムにする .site { max-width: 1024px; margin: 0 auto; } style.cssに追加

87.

記事部分の スタイルを調整する

88.

記事部分のスタイルを調整する 記事部分に余白と枠線をつけてみる

89.

記事部分のスタイルを調整する .hentryにCSSを書き足そう

90.

記事部分のスタイルを調整する .hentry { margin: 0 0 1.5em; padding: 20px; border: 1px solid #e5e5e5; } style.cssの770行目近辺を探そう

91.

記事部分のスタイルを調整する サイドバーとの余白も調整する

92.

記事部分のスタイルを調整する .site-main { margin: 0 25% 0 0; padding: 10px; } style.cssに追加する

93.

ヘッダーまわりに スタイルを追加する

94.

下層ページでタイトルがpタグになる デフォルトだとTOPと下層でスタイルがバラバラに・・・

95.

.site-titleクラスを使ってスタイル調整

96.
[beta]
記事部分のスタイルを調整する
.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行目の間に書き足そう

102.

記事タイトルの上に アイキャッチ画像が表示される

103.

こんな調子でCSSを いじっていくと・・・

104.

例えばこんな感じになる

105.

なんやかんやしたstyle.css http://bit.ly/1KALb08

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}

109.

クラスの出力サンプルをもっと知る Codexにサンプルがいろいろ載ってます! • body_class http://wpdocs.osdn.jp/テンプレートタグ/body_class • post_class http://wpdocs.osdn.jp/テンプレートタグ/post_class

110.

アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • トラブルシューティング • より踏み込んだカスタマイズへ

111.

トラブルシューティング 1. jQueryが使えない! 2. functions.php触ったら真っ白になった! 3. レイアウトが思ったとおりにならない!

112.

jQueryが使えない! • WordPress本体のjQueryでは「$」が使えない • 他のJSライブラリとの衝突を回避するため • 「jQuery」か無名関数でラップして使おう

113.

jQueryが使えない! (function($){ $('#foo').click(); })(jQuery);

114.

functions.php触ったら真っ白になった! • functions.phpにPHPエラーが出ると管理画面も死ぬ • functions.phpは必ずバックアップを(git推奨) • ローカルでテストしてから本番反映しよう

115.

レイアウトが思ったとおりにならない! • CSSのミスかも・・・? • 意図したテンプレートが読まれていない可能性あり • テンプレート階層を見直そう:http://bit.ly/1Lfpj7u

116.

アジェンダ • テーマ作成3つの方法 • PHP知識なしでもテーマを作る方法 • _sを使った作成の流れ • より踏み込んだカスタマイズへ

117.

̲sを安全にいじる たった1つの原則

118.

自信がないなら PHPは使わない

119.

オリジナルPHPは使わない • オリジナルPHPを使うとセキュリティがつらい echo とか echo とか echoとか • PHPを書くならテンプレートタグで http://wpdocs.osdn.jp/テンプレートタグ • ヘッダー画像はコピペでできる

120.

inc/custome-header.php 8-12行目をコピーしよう!

121.

header.php コピーしたPHPを貼り付けよう!

122.

ヘッダー画像が表示された!

123.

JavaScriptやCSSを 追加で読み込みさせるなら

124.

wp̲enqueue̲script() wp̲enqueue̲style()

125.

外部ファイルは wp_head()かwp_footer() で読み込む

126.
[beta]
任意の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.
[beta]
任意の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

128.

プラグインでも使うので、 wp̲enqueue̲scriptと wp̲enqueue̲styleは 覚えておくと便利b

129.

enjoy !