_s + bootstrapで始めるwordpressテーマ開発入門
TRANSCRIPT
_s & Bootstrapで始めるテーマ作成入門
WordCamp Tokyo 2015 ハンズオン岡本 秀高
はじめに
今日の流れ
• オリエンテーション
• _sのインストール
• Bootstrapの追加
• テーマを実際に作っていく
今日伝えたいと思ってること
• 巨人の肩に乗れば「テーマ作成」は簡単
• テーマ作成にPHPの知識はそれほど必要ない
• だれか公式テーマ特攻はよ
私について
• 岡本秀高（ヒデ）
• 株式会社デジタルキューブ
• WordBench京都モデレーター
• オープンデータとかAWSとか。
テーマ・プラグイン作ったりとか
http://ja.amimoto-ami.com/
時間少ないんでいろいろ端折ります
詳しい内容は過去のハンズオン資料を
http://bit.ly/1Ozk1Wg
http://bit.ly/1fSZOyB
1_sをインストールしよう
_sってなに？
_s(underscores) Automatticが作ったスターターテーマ
テーマに必要なPHPファイルが一式揃っている
CSSが書ければオリジナルテーマが作れる
_sのセットアップ
1. テーマファイルを作成
2. 開発環境へインストール
3. テーマの有効化
_sのセットアップ
1.テーマファイルを作成2. 開発環境へインストール
3. テーマの有効化
テーマファイルを作成する
• 基本設定は_sのDLページで設定可能
• とりあえず使ってみる場合なら、 「Theme Name」を入力するだけ *公式テーマ名と被ると後で死ぬ
• 細かい設定は「Advanced Options」をクリック
テーマ名を入れて クリック！
_sのセットアップ
1. テーマファイルを作成
2.開発環境へインストール3. テーマの有効化
開発環境へアップロード
• 先ほどDLしたzipを管理画面からアップロード
• テーマ一覧に表示されればOK
• テストデータを入れておくと便利 http://nuuno.net/note/wordpress-testdata/
クリック！
先ほどDLしたzipファイルを アップロードしよう
_sのセットアップ
1. テーマファイルを作成
2. 開発環境へインストール
3.テーマの有効化
「有効化」
2_sにBootstrapを追加しよう
Bootstrapの説明は省きます。
アドレスだけコピーする
テーマのfunctions.phpを開く
テーマにCSSを追加するコード
function themename_css() { wp_enqueue_style(
'theme-name', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'
);}
add_action( 'wp_enqueue_scripts', 'themename_css' );
BoostrapCSS適用後
3_s with Bootstrapを触ってみよう
ここまでは進めたい
やること
• Bootstrapのグリッドシステムを使う
• ナビゲーションをBootstrap仕様にする
• _s with Bootstrapのポイント
Bootstrapのグリッドシステムを使う
HTMLタグにrowやcolクラスを
書き足していくだけ！
header.php 40行目くらい
Before :
<div id="content" class=“site-content">
After:
<div id="content" class="site-content row">
index.php 14行目くらい
Before:
<div id="primary" class="content-area">
After:
<div id="primary" class="content-area col-md-8">
sidebar.php 12行目くらい
Before:
<div id="secondary" class="widget-area" role="complementary">
After:
<div id="secondary" class="widget-area col-md-4" role="complementary">
こうなる
まとめ
id:content primary/secondaryをラップしている
id:primary content.php（メインコンテンツ）が入ってる
id:secondary sidebar.php(ウィジェット）が入ってる
ナビゲーションをBootstrap仕様に
PHPにパラメータを１つ追加するだけ。
header.php 36行目くらいBefore:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
After:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ,'menu_class' => 'nav navbar-nav') ); ?>
メニューにスタイルがつく
wp_nav_menu
WordPressのメニューを表示させる関数
‘menu-class’ => ‘className’,でクラス名を設定できる。
More Info
https://wpdocs.osdn.jp/テンプレートタグ/wp_nav_menu
知りたいことはだいたいcodexに載っている
_s with Bootstrapのポイント
• Bootstrapで設定されているクラスを_sに適用する
• メニューとウィジェットはWordPress関数なのでCodexを
• 「if ～ endif」と「while ～ endwhile」に要注意
Free Time !(おまけ)
ヘッダー画像を表示する
inc/custome-header.php
8-12行目をコピーしよう！
header.php
コピーしたPHPを貼り付けよう！
これだけでOK！
JSを読み込む
任意の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フレームワークを使う
テーマにCSSを追加するコード
function themename_css() { wp_enqueue_style(
'theme-name', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'
);}
add_action( 'wp_enqueue_scripts', 'themename_css' );
テーマにCSSを追加するコード
function themename_css() { wp_enqueue_style(
'theme-name', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'
);}
add_action( 'wp_enqueue_scripts', 'themename_css' );
パスを変えるだけ！
おさらい
• codexが読めればPHPもだいたいいける
• _sとBootstrapの組み合わせでテーマ制作がラクに
• 他のスターターテーマやライブラリも試してみて
One More Thing…
• _s使っていれば公式テーマ準拠のテーマになる
• せっかくなので年内にレビュー出してみよう！• テーマレビューについてはまた明日b