Embed Size (px)
Citation preview
WordPressはじめの一歩 テーマ作成ハンズオン
2015/08/02WordBench京都
はじめに
今日体験してほしいこと
• PHPの知識無しでもテーマは作れる
• テーマは全部自作しなくてもいい
• テーマ制作は思っているよりは簡単
名前：岡本秀高
仕事：PHPエンジニア
地域：京都～滋賀
その他：WordBench京都モデレーター
興味：WP-API, React.js, Polymer,JSON-LD
アジェンダ• テーマ作成３つの方法
• 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が書ければオリジナルテーマが作れる
アジェンダ• テーマ作成３つの方法
• PHP知識なしでもテーマを作る方法
• _sを使った作成の流れ• トラブルシューティング
• より踏み込んだカスタマイズへ
_sの中身と使い方を 簡単にご紹介
1_sのセットアップ
_sのセットアップ
1. テーマファイルを作成
2. 開発環境へインストール
3. テーマの有効化
_sのセットアップ
1.テーマファイルを作成2. 開発環境へインストール
3. テーマの有効化
テーマファイルを作成する
• 基本設定は_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ページや 下記以外のページ
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は基本英語
「カテゴリ」や「タグ」「コメント」は、日本語で表示させたい・・・！
ja.moをlanguagesディレクトリへ
ja.moで翻訳完了！
これが・・・
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をいじっていくと・・・
例えばこんな感じになる
テーマにスタイルをつける
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 !
![[沖縄]Amimoto ハンズオン](https://img.pdfslide.tips/doc/110x75/55933edb1a28abb6138b45fe/amimoto-.jpg)
