---
title: Word pressはじめの一歩 テーマ作成ハンズオン
tags:  #wordpress  
author: [Hidetaka Okamoto](https://www.docswell.com/user/hideokamoto)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/D7YP62Y87M.jpg?width=480
description: WordCamp Kansai 2015ハンズオンスライド
published: July 23, 15
canonical: https://www.docswell.com/s/hideokamoto/ZP9211-word-press-50840466
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/D7YP62Y87M.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/VEN5Z8P9J8.jpg)

はじめに


# Page. 3

![Page Image](https://bcdn.docswell.com/page/Y79YZK33E3.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/G7861RMLJD.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/L7L9QK3QER.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4EMZ12MK7W.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PER6LMV6J9.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/P7XMWVZDJX.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/37KGVQ8DED.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LJ3NMP2PJ5.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/8JDW6LZ3EG.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/VEP9Y2DP78.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/27VMGD1V7Q.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/5JGG8Y21JL.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47QX9MPNJP.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/KE46XVY3J1.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/L71VN36ZJG.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/G7WL4PW6J2.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4JZM2K5R73.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/YE6NVQ91EV.jpg)

What about ̲s？


# Page. 21

![Page Image](https://bcdn.docswell.com/page/GE55DRNLE4.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/972N8D53JR.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/DJYP62K8JM.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/V7N5Z8R9E8.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/YJ9YZKM373.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GJ861RLLED.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/LJL9QKLQ7R.jpg)

1
_sのセットアップ


# Page. 28

![Page Image](https://bcdn.docswell.com/page/47MZ121KJW.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/P7R6LML6E9.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/PJXMWVWDEX.jpg)

http://underscores.me/


# Page. 31

![Page Image](https://bcdn.docswell.com/page/3JKGVQVD7D.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/LE3NMPMPE5.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/8EDW6L637G.jpg)



# Page. 34

![Page Image](https://bcdn.docswell.com/page/V7P9Y2YPJ8.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/2JVMGDGVJQ.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/5EGG8Y81EL.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/4JQX9M9NEP.jpg)

クリック！


# Page. 38

![Page Image](https://bcdn.docswell.com/page/K746XVX3E1.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/LJ1VN3NZEG.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/GJWL4P46E2.jpg)

「有効化」


# Page. 41

![Page Image](https://bcdn.docswell.com/page/4EZM2K2RJ3.jpg)



# Page. 42

![Page Image](https://bcdn.docswell.com/page/Y76NVQV17V.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/G755DRDL74.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/9J2N8D83ER.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/DEYP6268EM.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/VJN5Z8Z978.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/YE9YZKZ3J3.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/GE861R1L7D.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/LEL9QKQQJR.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/4JMZ18KKEW.jpg)

WordPressならではのクラスを活用する
•
動的にクラスを出す箇所が複数ある
•
body_class()やpost_class()で設定する
•
上手く活用すれば記事別にスタイルを変更できる！


# Page. 51

![Page Image](https://bcdn.docswell.com/page/PJR6L5X679.jpg)

WordPressならではのクラスを活用する
•
特定のタグの投稿のみ非表示
.tag-投稿タグのスラッグ{ display:none;}
•
検索結果ページのみ赤文字に
.search-results{ color:red}
•
先頭固定記事のみ黒背景
.sticky{ background-color: black}


# Page. 52

![Page Image](https://bcdn.docswell.com/page/PEXMWK6D7X.jpg)

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


# Page. 53

![Page Image](https://bcdn.docswell.com/page/3EKGV51DJD.jpg)

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


# Page. 54

![Page Image](https://bcdn.docswell.com/page/L73NMKQP75.jpg)

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


# Page. 55

![Page Image](https://bcdn.docswell.com/page/87DW6393JG.jpg)

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


# Page. 56

![Page Image](https://bcdn.docswell.com/page/VJP9Y4ZPE8.jpg)

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


# Page. 57

![Page Image](https://bcdn.docswell.com/page/2EVMGXWVEQ.jpg)

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


# Page. 58

![Page Image](https://bcdn.docswell.com/page/57GG8VD17L.jpg)

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


# Page. 59

![Page Image](https://bcdn.docswell.com/page/4EQX961N7P.jpg)

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


# Page. 60

![Page Image](https://bcdn.docswell.com/page/KJ46X4R371.jpg)

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


# Page. 61

![Page Image](https://bcdn.docswell.com/page/LE1VN4QZ7G.jpg)

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


# Page. 62

![Page Image](https://bcdn.docswell.com/page/GEWL4XM672.jpg)

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


# Page. 63

![Page Image](https://bcdn.docswell.com/page/47ZM26QRE3.jpg)

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


# Page. 64

![Page Image](https://bcdn.docswell.com/page/YJ6NV261JV.jpg)

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


# Page. 65

![Page Image](https://bcdn.docswell.com/page/GJ55D26LJ4.jpg)

jsディレクトリ
•
skip-link-focus-fix.js：
•
customizer.js
：
•
navigation.js
：


# Page. 66

![Page Image](https://bcdn.docswell.com/page/LE3NMKQDE5.jpg)

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


# Page. 67

![Page Image](https://bcdn.docswell.com/page/8EDW63927G.jpg)

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


# Page. 68

![Page Image](https://bcdn.docswell.com/page/V7P9Y4ZLJ8.jpg)

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


# Page. 69

![Page Image](https://bcdn.docswell.com/page/2JVMGXW6JQ.jpg)

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


# Page. 70

![Page Image](https://bcdn.docswell.com/page/5EGG8VD2EL.jpg)

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


# Page. 71

![Page Image](https://bcdn.docswell.com/page/4JQX9619EP.jpg)

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


# Page. 72

![Page Image](https://bcdn.docswell.com/page/K746X46RE1.jpg)

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


# Page. 73

![Page Image](https://bcdn.docswell.com/page/LJ1VN4VVEG.jpg)

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


# Page. 74

![Page Image](https://bcdn.docswell.com/page/GJWL4XL3E2.jpg)

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


# Page. 75

![Page Image](https://bcdn.docswell.com/page/4EZM26MGJ3.jpg)

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


# Page. 76

![Page Image](https://bcdn.docswell.com/page/Y76NV2NQ7V.jpg)

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


# Page. 77

![Page Image](https://bcdn.docswell.com/page/G755D25274.jpg)

incディレクトリ
•
custom-header.php：
•
customizer.php
：
•
extras.php
：
•
jetpack.php
：
•
template-tags.php ：


# Page. 78

![Page Image](https://bcdn.docswell.com/page/9J2N84N1ER.jpg)

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


# Page. 79

![Page Image](https://bcdn.docswell.com/page/DEYP6MP4EM.jpg)

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


# Page. 80

![Page Image](https://bcdn.docswell.com/page/VJN5ZW5678.jpg)

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


# Page. 81

![Page Image](https://bcdn.docswell.com/page/YE9YZXYRJ3.jpg)

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


# Page. 82

![Page Image](https://bcdn.docswell.com/page/GE86126G7D.jpg)

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


# Page. 83

![Page Image](https://bcdn.docswell.com/page/LEL9Q29XJR.jpg)

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


# Page. 84

![Page Image](https://bcdn.docswell.com/page/4JMZ18Z3EW.jpg)

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


# Page. 85

![Page Image](https://bcdn.docswell.com/page/PJR6L56R79.jpg)

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


# Page. 86

![Page Image](https://bcdn.docswell.com/page/PEXMWKMY7X.jpg)

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


# Page. 87

![Page Image](https://bcdn.docswell.com/page/3EKGV5G4JD.jpg)

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


# Page. 88

![Page Image](https://bcdn.docswell.com/page/L73NMKND75.jpg)

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


# Page. 89

![Page Image](https://bcdn.docswell.com/page/87DW63W2JG.jpg)

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


# Page. 90

![Page Image](https://bcdn.docswell.com/page/VJP9Y49LE8.jpg)

任意のJSを追加する場合
function theme_name_scripts() {
wp_enqueue_script(
&#039;script-name&#039;,
get_template_directory_uri() . &#039;/js/example.js&#039;,
array(),
&#039;1.0.0&#039;,
true
);
}
add_action( &#039;wp_enqueue_scripts&#039;, &#039;theme_name_scripts&#039; );
赤文字部分をファイル名やファイルパスに書き換えればOK


# Page. 91

![Page Image](https://bcdn.docswell.com/page/2EVMGXM6EQ.jpg)

任意のCSSを追加する場合
function theme_name_style() {
wp_enqueue_style(
&#039;style-name&#039;,
get_stylesheet_uri(). ‘css/origin.css’
);
}
add_action( &#039;wp_enqueue_scripts&#039;, &#039;theme_name_style&#039; );
赤文字部分をファイル名やファイルパスに書き換えればOK


# Page. 92

![Page Image](https://bcdn.docswell.com/page/57GG8VG27L.jpg)

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


# Page. 93

![Page Image](https://bcdn.docswell.com/page/4EQX96X97P.jpg)

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


# Page. 94

![Page Image](https://bcdn.docswell.com/page/KJ46X42R71.jpg)

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


