WordBench京都版 _sハンズオン

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

2015/08/02WordBench京都

はじめに

今日体験してほしいこと

• 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の内部構造

テンプレート階層

archive.php single.php page.php404.php search.php

index.php

アーカイブ カテゴリ タグ 著者 etc..

個別投稿 メディア ブログ

カスタム投稿 etc..

404ページ 固定ページ 検索結果

TOPページや 下記以外のページ

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

No.２テンプレートパーツ

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

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

header.php

sidebar.phpcontent.php

footer.php

comment.php

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

コンテンツ階層

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

下記に該当しない コンテンツ

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]キー　+　[i]キー　 Win: F12

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.csshttp://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 !