Word pressはじめの一歩テーマ作成ハンズオン

WordPressはじめの一歩
テーマ作成ハンズオン
2015/07/25
WordCamp Kansai 2015

SlideShareで
スライド見れます

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.テーマファイルを作成

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

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

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

2.開発環境へインストール

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

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

3.テーマの有効化

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

テーマにスタイルをつける
1. 基本的なスタイル調整方法
2. WordPressならではのクラスを活用する

1.基本的なスタイル調整方法
2. WordPressならではのクラスを活用する

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

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

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

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

1. 基本的なスタイル調整方法
2.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

3知って得する
_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では、
パーツ別にPHPが
分割されている

header.php
sidebar.php
content.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.３
カスタム要素

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

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

• skip-link-focus-ﬁx.js：
• customizer.js ：
• navigation.js ：

• skip-link-focus-ﬁx.js：バグFIX（っぽい）
• customizer.js ：カスタマイザー用JS
• navigation.js ：ドロップダウンナビ用JS

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

• content-sidebar.css：
• sidebar-content.css：

• 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ディレクトリ
オプション機能やカスタマイズ機能が
まとめられているディレクトリ

• custom-header.php：
• customizer.php ：
• extras.php ：
• jetpack.php ：
• template-tags.php ：

• custom-header.php：「ヘッダー画像」関係
• customizer.php ：「カスタマイザー」関係
• extras.php ：クラスやtitle拡張
• jetpack.php ：Jetpackの無限スクロール対応
• template-tags.php ：テンプレートタグ拡張

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

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

より踏み込んだカスタマイズへ・・・
• PHPでカスタマイズする時に注意すべきこと
• JavaScript / CSSファイルを読み込む方法
• もっとガッツリ触りたい方への告知

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

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

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

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

外部ファイルは
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

もっとガッツリ触りたい方は・・・
８月２日
WordBench京都
_sで作るテーマ作成ハンズオン（再演）
http://bit.ly/1KpKSTc

Word pressはじめの一歩テーマ作成ハンズオン

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie Word pressはじめの一歩テーマ作成ハンズオン

Ähnlich wie Word pressはじめの一歩テーマ作成ハンズオン (20)

Mehr von Hidetaka Okamoto

Mehr von Hidetaka Okamoto (17)