Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ライバルに差をつけろ!
カスタム○○○
猛特訓ゼミ!!!
小野 隆士 @onocom
α+
ご参加ありがとうございました
ワークショップで使用したプログラム・データは以下に配置してあ
りますので復習等にご利用ください。
http://onocom.net/wordbench/201512/workshop_files.zip
本スライ...
自己紹介
小野 隆士
WordBenchとの関わり
WordBench名古屋コミュニティ幹事(~2013年)
WordFes Nagoya 2015実行委員
WordFes Nagoya 2014実行委員
WordFes Nagoya 2013...
自己紹介
経歴
1. システム開発会社でプログラマ
2. 個人でWEB制作・職業訓練等
3. 不動産・保険会社で営業
4. 印刷会社でWEB制作(今ココ)
本日の時間割
20min. カスタム○○○入門(座学)
100min.
ワーク
ショップ
説明
カスタム○○○の設定
カスタム○○○用のテンプレート作成
動作確認
チームで考えよう
20min. PHP基礎(座学)
途中で適宜休憩を入れます。
カスタム○○○入門
20min.
今回紹介するカスタム○○○
カスタム投稿タイプ
カスタムタクソノミー
カスタムフィールド
カスタム○○○を
理解するための前置き
突然ですが...問題です
アナタは、飲料メーカーのマーケティング担当です。
日本全国のショッピングセンターを飛び回って、
各店の飲料担当者からアンケートを集めています。
アンケート用紙として用いるなら
AかBのどちらが適切でしょうか?
アンケート用紙として適切なのは?
A:何も書かれていない紙 B:質問内容が記載された紙
誰にでも回答してもらえる方法を
アンケート用紙にあらかじめ
質問を羅列しておけば、
回答者は迷うこと無くアンケート
に回答できますね。
続けて第二問
全国から回収したアンケートは、
後日、都道府県別に集計しようと思います。
アンケート用紙の保存方法として適切なのは、
AかBのどちらでしょうか?
保存方法として適切なのは?
A:とにかくバインダーに綴じる B:都道府県ごとに仕切りを付けて
バインダーに綴じる
仕切りをつけると管理しやすい
アンケートをあらかじめ都道府県
別にまとめておけば、集計がとて
も簡単ですね。
最終問題
新商品の味をきめるために
お客様からアンケートを採ることになりました。
アンケート用紙の保存方法として適切なのは、
AかBのどちらでしょうか?
保存方法として適切なのは?
A:先ほどと同じバインダー
にまとめて綴じる
B:別のバインダーを買ってきて
そちらに綴じる
別々のバインダだと管理しやすい
バインダを分けて管理することで、
アンケート混入を防いだり、
集計漏れを防いだりできますね。
WordPressの記事管理を
現実に置き換えたら
現実
WordPressには最初から2つの
バインダが存在します。
WordPressの記事管理を
現実に置き換えたら
最初から存在する2つのバインダ
最初から存在する2つのバインダ
「投稿」
バインダ
「固定ページ」
バインダ
「投稿」バインダ
日記など、思いのままに書
き込むことに向いている。
日付順に綴じられる。
用紙は白紙なので自由度が
高い。
反面、スキルが無いと難し
く感じることも。
「投稿」バインダ
「カテゴリー」
という仕切りを使って、
情報を整理できる。
「タグ」
という付箋を使って、
目印を付けられる。
「固定ページ」バインダ
好きな順に綴じられるので、
人に読んでもらう情報を
書くことに適している。
用紙は白紙なので自由度が
高い。
反面、スキルが無いと難し
く感じることも。
「固定ページ」バインダ
「ページテンプレート」
ページごとにデザインを切
り替えられる。
「ページ階層」
ページの親子関係を設定で
きる。
でもこれだけだと物足りない時も
どこに記事を
書けばいいの?
あれ?先日発売した
新商品の情報ってのせた?
カテゴリ分けにも
限界が...
商品情報とお知らせ
明らかに内容が違うけど...
商品紹介のページに
何かけばいいか教えて~
固定ページ...
この物足りなさを解消するのが
【カスタム○○○】なのだっ!
どこに記事を
書けばいいの?
あれ?先日発売した
新商品の情報ってのせた?
カテゴリ分けにも
限界が...
商品情報とお知らせ
明らかに内容が違うけど...
商品紹介のページに
何かけ...
カスタム投稿タイプ カスタムフィールド カスタムタクソノミー
オリジナルのバインダを
作って記事を管理できます。
だれでも簡単に入力できる
専用用紙を作れます。
専用のカテゴリーやタグを
作って効率よく記事を
管理できます!
カスタム○○○で
...
WordPressのバインダを増やせます
「投稿」 「固定ページ」 「商品情報」
カスタム投稿タイプ
専用の用紙を作れます。
「商品情報」用紙 商品情報には、写真と金額はのせなきゃ。
あとは自由に書いてくれればいいや。
カスタムフィールド
自由入力
金額
専用の仕切りや付箋を作れます。
商品専用の仕切り・付箋
商品をカテゴリごとに整理しておきたい
↓
「商品カテゴリ」を作ろう!
商品のサイズの付箋を貼っておきたい
↓
「商品サイズタグ」を作ろう!
カスタムタクソノミー
カスタム○○○イメージ
カスタム投稿タイプ カスタムフィールド カスタムタクソノミー
ワークショップ
100min.
はぁい、それでは今から皆さんにぃ~
ワークショップをしてもらいまぁ~す。
Attention Please
ご協力ください。
ワークショップ成功のためには
皆様の協力が不可欠です。
次の点にご協力ください。
Attention Please
5チームに分かれます。
チームリーダーを決めた後、
チーム名を決めてください。
本日のお題
アナタはカフェのサイト運営を任されています。
ある日、カフェのオーナーからこんな依頼があり
ました。
カスタム○○○を使って解決しましょう!
依頼
特記事項
カフェのメニューをサイトに掲載したい。
・カフェのメニューは頻繁に変わる。...
リニューアル計画
現状のサイトを把握しよう
カスタム投稿タイプを追加しよう
カスタムタクソノミーを追加しよう
カスタムフィールドを追加しよう
次へすすむ
リニューアル計画
グローバルナビを修正しよう
記事を表示させよう
動作確認しよう
完成
現状のサイトを把握しよう
10min.
現状のサイトを把握しよう
WBN CAFE
チームごとに修正するURLが異なるので注意!
停止しました。
http://wb.onocom.net/team01/
http://wb.onocom.net/team02/
http://wb.o...
完成イメージを見てみよう
WBN CAFE 完成形
http://wb.onocom.net/ok/
デザインを変更しよう
「Lightning」 テーマの子テーマと
して構築されています。
Lightning : http://lightning.vektor-inc.co.jp/ja/
①チーム毎にログイン
②外観→カスタマイズ
③各チーム...
使用するプラグインを有効化しよう
5min.
今回使用するプラグイン
Custom Post Type UI
カスタム投稿タイプ、カスタムタクソノミー
を追加するためのプラグイン
Advanced Custom Fields
カスタムフィールド
を追加するためのプラグイン
今回のワークショ...
カスタム投稿タイプを追加しよう
5min.
カスタム投稿タイプを追加しよう
カスタム投稿タイプ
「 メニュー 」 カフェのメニューを管理する
「メニュー」
カスタム投稿タイプ
を作ります!
カスタム投稿タイプを追加しよう
【管理画面】
CPT UI→ Add/Edit Post Types
■Post Type Slug
menu
■Plural Label、単数形のラベル
メニュー
カスタム投稿タイプを追加しよう
■Has Archive
☑ True
カスタム投稿タイプを追加しよう
■サポートのチェックボックス
☑ Title
☑ Editor
☑ Excerpt
☑ Custom Fields
Add Post Type
ボタンを押して登録完了です!
カスタムタクソノミーを追加しよう
5min.
カスタムタクソノミーを追加しよう
カフェのメニューを分類する
「メニューカテゴリー」
カスタムタクソノミーを
作ります!
カスタムタクソノミー
「メニューカテゴリー」
カスタムタクソノミーを追加しよう
【管理画面】
CPT UI→ Add/Edit Taxonomies
■Taxonomy Slug
menu-category
■Plural Label、単数形のラベル
メニューカテゴリー
■利用する投稿タイ...
カスタムタクソノミーを追加しよう
■階層
「True」に変更
Add Taxonomy
ボタンを押して登録完了です!
カスタムタクソノミーを追加しよう
ドリンクメニュー
スラッグ: drink
メニュー→メニューカテゴリーから
以下のカテゴリを追加しましょう!
フードメニュー
スラッグ: food
カスタムフィールドを追加しよう
10min.
カスタムフィールド
カスタムフィールドを追加しよう
カフェのメニューを入力するための
カスタムフィールドを作ります!
メニュー画像と料金を
入力できるようにしましょう。
カスタムフィールドを追加しよう
(カスタムフィールド)
自由入力
(エディタで代用)
料金
メニュー画像
(カスタムフィールド)
名称 (タイトルで代用)
カフェメニュー専用の入力画面
あらかじめ入力する項目が
決まっていれば、
WEBの知識が...
カスタムフィールドを追加しよう
【管理画面】
カスタムフィールド→ 新規追加
■フィールドグループ名
メニュー
+フィールドを追加
ボタンをクリック
カスタムフィールドを追加しよう
■フィールドラベル
メニュー画像
■フィールド名
menu-image
■フィールドタイプ
☑ 画像
■戻り値
☑ 画像ID
「メニュー画像」用フィールド追加
カスタムフィールドを追加しよう
■フィールドラベル
メニュー料金
■フィールド名
menu-price
■フィールドタイプ
☑ テキスト
■フォーマット
☑ No Formatting
「メニュー料金」用フィールド追加
カスタムフィールドを追加しよう
こんな感じになったかな?
カスタムフィールドを追加しよう
「 menu 」を選択
カスタム投稿タイプ「メニュー」と関連付ける
カスタムフィールドを追加しよう
■Style
☑Standard(WP metabox)
カスタムフィールドの表示スタイルを設定
カスタムフィールドを追加しよう
■画面に表示しない
☑カスタムフィールド
既存のカスタムフィールド入力ボックスを
編集画面では非表示にする
公開ボタンを
押して登録完了です!
記事の試し書きをしよう
10min.
グローバルナビを修正しよう
5min.
グローバルナビを修正しよう
メニューカテゴリーを
以下のようにグローバル
ナビに追加
ドリンクメニュー
├ ドリンクメニュー
└ フードメニュー
グローバルナビを修正しよう
親階層のドリンクメニューの
ナビゲーションラベルを以下
のように修正
カフェメニュー
├ ドリンクメニュー
└ フードメニュー
記事を表示させよう
15min.
記事を表示させよう
カスタム○○○を思い通りに表示させるためには、
専用のテンプレートを追加する必要があります!
どんなテンプレートファイルを作れば良いかは、
テンプレート階層図をチェックしましょう!
詳細はCodexを見ると良いですよ~。
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
...
詳細はCodexを見ると良いですよ~。
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
...
テンプレート階層
1. taxonomy-{taxonomy}-{term}.php
2.taxonomy-{taxonomy}.php
3. taxonomy.php
4. archive.php
5. index.php
カスタムタクソノミ...
テンプレート階層
1.single-{posttype}.php
2. single.php
3. singular.php
4. index.php
カスタム投稿個別ページ表示用
テンプレート呼び出し順序
今回作るテンプレート
メニューカテゴリーの一覧用テンプレート
taxonomy-menu-category.php
(taxonomy-タクソノミー名.php)
メニュー詳細ページ用テンプレート
single-menu.php
(single-...
すでにこちらにできております。
テーマフォルダ内の以下のファイルから
_ を取り除いてアップロードしましょう。
_taxonomy-menu-category.php
_single-menu.php
テンプレートファイルの
内容を見てみよう
10min.
重要なテンプレートタグ
カスタムフィールドの値を取得するためのタグ
(今日覚えるのはこれだけ!)
get_post_meta
(記事ID, カスタムフィールド名, 単一フラグ);
カスタムフィールド取得サンプルコード
// price というカスタムフィールドの値を取得する
$price = get_post_meta(get_the_ID(), "price", true);
// カスタムフィールドの値を表示する
e...
動作確認しよう!
5min.
チームで考えてみよう
20min.
お題
メニュー投稿タイプアーカイブの
表示を変えてみよう!
メニュー投稿タイプアーカイブURL
http://wb.onocom.net/teamXX/menu/
お題回答例
archive-menu.php
ファイルを作るか、
Lightningテーマの場合、
module_loop_menu.php
を作ることでも実現できます。
PHP基礎
これだけは覚えておきましょう!
20min.
復習の際には…
添付資料の以下のファイルに、PHP基礎で紹介
したプログラムを記載してあります。
必要に応じてコメントアウトを外して動作確認
などにご活用ください
/themes/workshop_finish/_functions.php
PHP基礎
 基本構文
 出力
 変数
 配列
 条件分岐
 繰り返し
 関数
 クラス
 名前空間
 デバッグ
基本構文(ファイル名)
PHPプログラムを記載したファイルの拡張子は、
基本的に「.php」です。
●●●.php
◎◎◎.php
▲▲▲.php
基本構文
<?php
// ココにプログラムを書く
?>
基本構文
<?php
/*
末尾迄プログラムが続く場合は、
この書き方もOK
*/
基本構文
<?php
// 命令の後にはセミコロン(;)必須
echo “Hello WordPress !!!”;
基本構文(HTMLとの共存)
<div id=“contents”>
<h1><?php echo “表題”; ?></h1>
<div>
<?php echo “本文です~!”; ?>
</div>
</div><!-- /#contents...
出力 echo
ブラウザ出力結果
元気モリモリ
鈴木一郎
<?php
$myname = “鈴木一郎”;
echo “元気モリモリ” . “<br>”;
echo “{$myname}”;
?>
変数
値を記録しておくメモ用紙1枚
$name という紙に“鈴木一郎”とメモる!
書き換えは自由に出来る!
$name = “鈴木一郎”;
echo $name;
配列
メモ用紙をマスで区切って沢山の事をメモれる
ようにする機能
$names = array(“鈴木一郎”,”山田太郎”,”木村拓哉”);
配列の用法(名前の管理)
配列使わない場合
$name1 = “鈴木一郎”;
$name2 = “山田太郎”;
$name3 = “木村拓哉”;
echo $name1;
echo $name2;
echo $name3;
配列使う場合
$na...
配列使わない場合 配列使う場合
$name1
鈴木一郎
$name2
山田太郎
$name3
木村拓哉
0 鈴木一郎
1 山田太郎
2 木村拓哉
$names
どちらも正解!
性質を見極めて使えるようになろう!
配列の用法(名前の管理)
連想配列
配列の値の意味付けをする機能。
$names = array(
“shacho” => “鈴木一郎”,
“bucho” => ”山田太郎”,
“shain” => ”木村拓哉”);
echo $names[“shacho”]; // ...
連想配列
0 shacho 鈴木一郎
1 bucho 山田太郎
2 shain 木村拓哉
$names
↑添字 ↑キー(KEY)
条件分岐 if … else
$name = “ono”;
if( $name == “ono” ) {
// 名前が”ono”だった時(true)の処理
} else {
// 名前が”ono”ではない時(false)の処理
}
条件分岐 if … elseif … else
$name = “ono”;
if( $name == “ono” ) {
// 名前が”ono”だった時(true)の処理
} elseif( $name == “yamada” ) {
// ...
比較方法を覚えよう
$name = “ono”;
if( $name == “ono” ) {
// 名前が”ono”だった時(true)の処理
} else {
// 名前が”ono”ではない時(false)の処理
}
比較演算子
例 名前 結果
$a == $b 等しい $a が $b に等しい時
に TRUE。
$a != $b 等しくない $a が $b に等しくない場合
に TRUE。
$a < $b より少ない $a が $b より少ない時
に TR...
繰り返し(for)
// 1~10までの数字を合計する処理
$total = 0;
for( $i = 1; $i <= 10; $i++ ) {
$total = $total + $i;
}
echo $total;
繰り返し(foreach)
鈴木一郎
山田太郎
木村拓哉
$names = array(“鈴木一郎”,”山田太郎”,”木村拓哉”);
foreach( $names as $name ) {
echo $name . “<br>”;
}
繰り返し(foreach)
shacho:鈴木一郎
bucho:山田太郎
shain:木村拓哉
$names = array(
“shacho” => “鈴木一郎”,
“bucho” => ”山田太郎”,
“shain” => ”木村拓哉”);...
繰り返し(while)
0 1 2 3 4 5 6 7 8 9 10
$count = 0;
while( $count <= 10 ) {
echo $count . “ “;
$count++;
}
繰り返し(do-while)
0 1 2 3 4 5 6 7 8 9 10
// whileとは違って必ず1回は処理を行う
$count = 0;
do {
echo $count . “ “;
$count++;
} while( $coun...
関数
命令を与えると、答えをくれる機能
関数命令 → → 答え
自作関数1
// 渡された名前を出力する関数
function disp_namelist( $names ) {
foreach( $names as $name ) {
echo “<p>{$name}</p>”;
}
}
自作関数2
// 名前が”ono”かチェックする関数
function is_ono( $name ) {
if( $name == “ono” ) {
return true;
} else {
return false;
}
}
自作関数2の使い方
$name1 = “yamada”;
$name2 = “ono”;
if( is_ono($name1) ) echo “OK!”;
if( is_ono($name2) ) echo “OK!”;
クラス
データの保持の仕方や扱い方法を厳密に決めた
設計図的なもの。
$name
$age
is_ossan()
if( $this->age >= 40 ) {
echo “オッサンだよ”;
} else {
echo “若者だよ”;
}
O...
クラスの書き方と使い方
class Ossan {
var $name = "";// 名前
var $age = 0;// 年齢
function is_ossan() {
if( $this->age >= 40 ) {
echo "オッサ...
名前空間(namespace)
通常、同じ名前の関数やクラスを定義すると
エラーになる。
function do_presentation() { 処理 }
function do_presentation() { 処理 }
同じ関数名は定義で...
名前空間(namespace)
namespace work¥ono;
function do_presentation() { echo “小野です。”; }
名前空間を使うと。。。
namespace work¥yamada;
functi...
名前空間(namespace)
関数やクラスがバッティングしないように用いる
フォルダのような概念。
work
ono
yamada
プレゼン.pptx
プレゼン.pptx
/work/ono/プレゼン.pptx
/work/yamada/プレ...
名前空間(namespace)
// 名前空間を指定してから関数を呼び出し
namespace work¥ono;
do_presentation();
// 名前空間の完全修飾名を使用しての関数呼び出し
¥work¥yamada¥do_pre...
デバッグ
 変数の内容を吐き出す。
$names = array(
“shacho” => “鈴木一郎”,
“bucho” => ”山田太郎”,
“shain” => ”木村拓哉”);
var_dump( $names );
array(3)...
デバッグ
ブラウザのデバッグモード使ってます?
PHPのどこでエラーが出ているかを把握する手
がかりになります。
Chrome: ツール → デベロッパーツール
Firefox : Firebugプラグイン
IE:ツール → 開発者ツール
おわり
お疲れ様でした
Upcoming SlideShare
Loading in …5
×

ライバルに差をつけろ! カスタム○○○ 猛特訓ゼミ!!!+α

681 views

Published on

WordBench名古屋の2015年12月に行ったワークショップのスライドです。
カスタム投稿タイプ、カスタムフィールド、カスタムタクソノミーを学ぶワークショップです。PHPの基本構文なども学ぶ内容になっています。

Published in: Engineering
  • Be the first to comment

ライバルに差をつけろ! カスタム○○○ 猛特訓ゼミ!!!+α

  1. 1. ライバルに差をつけろ! カスタム○○○ 猛特訓ゼミ!!! 小野 隆士 @onocom α+
  2. 2. ご参加ありがとうございました ワークショップで使用したプログラム・データは以下に配置してあ りますので復習等にご利用ください。 http://onocom.net/wordbench/201512/workshop_files.zip 本スライドについて 復習をしやすいように、公開用のスライドはPHP基礎の内容を最後に移動 してあります。 また、公開用にスライドの内容を一部修正してあります。
  3. 3. 自己紹介 小野 隆士 WordBenchとの関わり WordBench名古屋コミュニティ幹事(~2013年) WordFes Nagoya 2015実行委員 WordFes Nagoya 2014実行委員 WordFes Nagoya 2013副実行委員長 WordBeach 2012実行委員長 WordBeach 2011実行委員長 WordCamp Nagoya 2010実行委員 保有資格
  4. 4. 自己紹介 経歴 1. システム開発会社でプログラマ 2. 個人でWEB制作・職業訓練等 3. 不動産・保険会社で営業 4. 印刷会社でWEB制作(今ココ)
  5. 5. 本日の時間割 20min. カスタム○○○入門(座学) 100min. ワーク ショップ 説明 カスタム○○○の設定 カスタム○○○用のテンプレート作成 動作確認 チームで考えよう 20min. PHP基礎(座学) 途中で適宜休憩を入れます。
  6. 6. カスタム○○○入門 20min.
  7. 7. 今回紹介するカスタム○○○ カスタム投稿タイプ カスタムタクソノミー カスタムフィールド
  8. 8. カスタム○○○を 理解するための前置き
  9. 9. 突然ですが...問題です アナタは、飲料メーカーのマーケティング担当です。 日本全国のショッピングセンターを飛び回って、 各店の飲料担当者からアンケートを集めています。 アンケート用紙として用いるなら AかBのどちらが適切でしょうか?
  10. 10. アンケート用紙として適切なのは? A:何も書かれていない紙 B:質問内容が記載された紙
  11. 11. 誰にでも回答してもらえる方法を アンケート用紙にあらかじめ 質問を羅列しておけば、 回答者は迷うこと無くアンケート に回答できますね。
  12. 12. 続けて第二問 全国から回収したアンケートは、 後日、都道府県別に集計しようと思います。 アンケート用紙の保存方法として適切なのは、 AかBのどちらでしょうか?
  13. 13. 保存方法として適切なのは? A:とにかくバインダーに綴じる B:都道府県ごとに仕切りを付けて バインダーに綴じる
  14. 14. 仕切りをつけると管理しやすい アンケートをあらかじめ都道府県 別にまとめておけば、集計がとて も簡単ですね。
  15. 15. 最終問題 新商品の味をきめるために お客様からアンケートを採ることになりました。 アンケート用紙の保存方法として適切なのは、 AかBのどちらでしょうか?
  16. 16. 保存方法として適切なのは? A:先ほどと同じバインダー にまとめて綴じる B:別のバインダーを買ってきて そちらに綴じる
  17. 17. 別々のバインダだと管理しやすい バインダを分けて管理することで、 アンケート混入を防いだり、 集計漏れを防いだりできますね。
  18. 18. WordPressの記事管理を 現実に置き換えたら 現実
  19. 19. WordPressには最初から2つの バインダが存在します。 WordPressの記事管理を 現実に置き換えたら
  20. 20. 最初から存在する2つのバインダ
  21. 21. 最初から存在する2つのバインダ 「投稿」 バインダ 「固定ページ」 バインダ
  22. 22. 「投稿」バインダ 日記など、思いのままに書 き込むことに向いている。 日付順に綴じられる。 用紙は白紙なので自由度が 高い。 反面、スキルが無いと難し く感じることも。
  23. 23. 「投稿」バインダ 「カテゴリー」 という仕切りを使って、 情報を整理できる。 「タグ」 という付箋を使って、 目印を付けられる。
  24. 24. 「固定ページ」バインダ 好きな順に綴じられるので、 人に読んでもらう情報を 書くことに適している。 用紙は白紙なので自由度が 高い。 反面、スキルが無いと難し く感じることも。
  25. 25. 「固定ページ」バインダ 「ページテンプレート」 ページごとにデザインを切 り替えられる。 「ページ階層」 ページの親子関係を設定で きる。
  26. 26. でもこれだけだと物足りない時も どこに記事を 書けばいいの? あれ?先日発売した 新商品の情報ってのせた? カテゴリ分けにも 限界が... 商品情報とお知らせ 明らかに内容が違うけど... 商品紹介のページに 何かけばいいか教えて~ 固定ページにも商品情報 があるし、投稿にも新商 品の情報が... Oh...もう載ってた... 折角記事書いたのに。 例えば服屋さんの場合... HTMLの知識無いから レイアウトがバラバラ...
  27. 27. この物足りなさを解消するのが 【カスタム○○○】なのだっ! どこに記事を 書けばいいの? あれ?先日発売した 新商品の情報ってのせた? カテゴリ分けにも 限界が... 商品情報とお知らせ 明らかに内容が違うけど... 商品紹介のページに 何かけばいいか教えて~ 固定ページにも商品情報 があるし、投稿にも新商 品の情報が... Oh...もう載ってた... 折角記事書いたのに。 例えば服屋さんの場合... HTMLの知識無いから レイアウトがバラバラ...
  28. 28. カスタム投稿タイプ カスタムフィールド カスタムタクソノミー オリジナルのバインダを 作って記事を管理できます。 だれでも簡単に入力できる 専用用紙を作れます。 専用のカテゴリーやタグを 作って効率よく記事を 管理できます! カスタム○○○で WordPressがさらに便利に
  29. 29. WordPressのバインダを増やせます 「投稿」 「固定ページ」 「商品情報」 カスタム投稿タイプ
  30. 30. 専用の用紙を作れます。 「商品情報」用紙 商品情報には、写真と金額はのせなきゃ。 あとは自由に書いてくれればいいや。 カスタムフィールド 自由入力 金額
  31. 31. 専用の仕切りや付箋を作れます。 商品専用の仕切り・付箋 商品をカテゴリごとに整理しておきたい ↓ 「商品カテゴリ」を作ろう! 商品のサイズの付箋を貼っておきたい ↓ 「商品サイズタグ」を作ろう! カスタムタクソノミー
  32. 32. カスタム○○○イメージ カスタム投稿タイプ カスタムフィールド カスタムタクソノミー
  33. 33. ワークショップ 100min.
  34. 34. はぁい、それでは今から皆さんにぃ~ ワークショップをしてもらいまぁ~す。
  35. 35. Attention Please ご協力ください。 ワークショップ成功のためには 皆様の協力が不可欠です。 次の点にご協力ください。
  36. 36. Attention Please 5チームに分かれます。 チームリーダーを決めた後、 チーム名を決めてください。
  37. 37. 本日のお題 アナタはカフェのサイト運営を任されています。 ある日、カフェのオーナーからこんな依頼があり ました。 カスタム○○○を使って解決しましょう! 依頼 特記事項 カフェのメニューをサイトに掲載したい。 ・カフェのメニューは頻繁に変わる。 ・オーナーも更新したい。 ・オーナーには制作の知識は無い。
  38. 38. リニューアル計画 現状のサイトを把握しよう カスタム投稿タイプを追加しよう カスタムタクソノミーを追加しよう カスタムフィールドを追加しよう 次へすすむ
  39. 39. リニューアル計画 グローバルナビを修正しよう 記事を表示させよう 動作確認しよう 完成
  40. 40. 現状のサイトを把握しよう 10min.
  41. 41. 現状のサイトを把握しよう WBN CAFE チームごとに修正するURLが異なるので注意! 停止しました。 http://wb.onocom.net/team01/ http://wb.onocom.net/team02/ http://wb.onocom.net/team03/ http://wb.onocom.net/team04/ http://wb.onocom.net/team05/
  42. 42. 完成イメージを見てみよう WBN CAFE 完成形 http://wb.onocom.net/ok/
  43. 43. デザインを変更しよう 「Lightning」 テーマの子テーマと して構築されています。 Lightning : http://lightning.vektor-inc.co.jp/ja/ ①チーム毎にログイン ②外観→カスタマイズ ③各チームデザイン変更をどうぞ
  44. 44. 使用するプラグインを有効化しよう 5min.
  45. 45. 今回使用するプラグイン Custom Post Type UI カスタム投稿タイプ、カスタムタクソノミー を追加するためのプラグイン Advanced Custom Fields カスタムフィールド を追加するためのプラグイン 今回のワークショップでは、以下のプラグインを使用します。 管理画面にログインして有効化しましょう!
  46. 46. カスタム投稿タイプを追加しよう 5min.
  47. 47. カスタム投稿タイプを追加しよう カスタム投稿タイプ 「 メニュー 」 カフェのメニューを管理する 「メニュー」 カスタム投稿タイプ を作ります!
  48. 48. カスタム投稿タイプを追加しよう 【管理画面】 CPT UI→ Add/Edit Post Types ■Post Type Slug menu ■Plural Label、単数形のラベル メニュー
  49. 49. カスタム投稿タイプを追加しよう ■Has Archive ☑ True
  50. 50. カスタム投稿タイプを追加しよう ■サポートのチェックボックス ☑ Title ☑ Editor ☑ Excerpt ☑ Custom Fields Add Post Type ボタンを押して登録完了です!
  51. 51. カスタムタクソノミーを追加しよう 5min.
  52. 52. カスタムタクソノミーを追加しよう カフェのメニューを分類する 「メニューカテゴリー」 カスタムタクソノミーを 作ります! カスタムタクソノミー 「メニューカテゴリー」
  53. 53. カスタムタクソノミーを追加しよう 【管理画面】 CPT UI→ Add/Edit Taxonomies ■Taxonomy Slug menu-category ■Plural Label、単数形のラベル メニューカテゴリー ■利用する投稿タイプ ☑ メニュー
  54. 54. カスタムタクソノミーを追加しよう ■階層 「True」に変更 Add Taxonomy ボタンを押して登録完了です!
  55. 55. カスタムタクソノミーを追加しよう ドリンクメニュー スラッグ: drink メニュー→メニューカテゴリーから 以下のカテゴリを追加しましょう! フードメニュー スラッグ: food
  56. 56. カスタムフィールドを追加しよう 10min.
  57. 57. カスタムフィールド カスタムフィールドを追加しよう カフェのメニューを入力するための カスタムフィールドを作ります! メニュー画像と料金を 入力できるようにしましょう。
  58. 58. カスタムフィールドを追加しよう (カスタムフィールド) 自由入力 (エディタで代用) 料金 メニュー画像 (カスタムフィールド) 名称 (タイトルで代用) カフェメニュー専用の入力画面 あらかじめ入力する項目が 決まっていれば、 WEBの知識が無いオーナー でも簡単に更新できる!
  59. 59. カスタムフィールドを追加しよう 【管理画面】 カスタムフィールド→ 新規追加 ■フィールドグループ名 メニュー +フィールドを追加 ボタンをクリック
  60. 60. カスタムフィールドを追加しよう ■フィールドラベル メニュー画像 ■フィールド名 menu-image ■フィールドタイプ ☑ 画像 ■戻り値 ☑ 画像ID 「メニュー画像」用フィールド追加
  61. 61. カスタムフィールドを追加しよう ■フィールドラベル メニュー料金 ■フィールド名 menu-price ■フィールドタイプ ☑ テキスト ■フォーマット ☑ No Formatting 「メニュー料金」用フィールド追加
  62. 62. カスタムフィールドを追加しよう こんな感じになったかな?
  63. 63. カスタムフィールドを追加しよう 「 menu 」を選択 カスタム投稿タイプ「メニュー」と関連付ける
  64. 64. カスタムフィールドを追加しよう ■Style ☑Standard(WP metabox) カスタムフィールドの表示スタイルを設定
  65. 65. カスタムフィールドを追加しよう ■画面に表示しない ☑カスタムフィールド 既存のカスタムフィールド入力ボックスを 編集画面では非表示にする 公開ボタンを 押して登録完了です!
  66. 66. 記事の試し書きをしよう 10min.
  67. 67. グローバルナビを修正しよう 5min.
  68. 68. グローバルナビを修正しよう メニューカテゴリーを 以下のようにグローバル ナビに追加 ドリンクメニュー ├ ドリンクメニュー └ フードメニュー
  69. 69. グローバルナビを修正しよう 親階層のドリンクメニューの ナビゲーションラベルを以下 のように修正 カフェメニュー ├ ドリンクメニュー └ フードメニュー
  70. 70. 記事を表示させよう 15min.
  71. 71. 記事を表示させよう カスタム○○○を思い通りに表示させるためには、 専用のテンプレートを追加する必要があります! どんなテンプレートファイルを作れば良いかは、 テンプレート階層図をチェックしましょう!
  72. 72. 詳細はCodexを見ると良いですよ~。 http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4 テンプレート階層
  73. 73. 詳細はCodexを見ると良いですよ~。 http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4 テンプレート階層
  74. 74. テンプレート階層 1. taxonomy-{taxonomy}-{term}.php 2.taxonomy-{taxonomy}.php 3. taxonomy.php 4. archive.php 5. index.php カスタムタクソノミーアーカイブ表示用 テンプレート呼び出し順序
  75. 75. テンプレート階層 1.single-{posttype}.php 2. single.php 3. singular.php 4. index.php カスタム投稿個別ページ表示用 テンプレート呼び出し順序
  76. 76. 今回作るテンプレート メニューカテゴリーの一覧用テンプレート taxonomy-menu-category.php (taxonomy-タクソノミー名.php) メニュー詳細ページ用テンプレート single-menu.php (single-投稿タイプ名.php)
  77. 77. すでにこちらにできております。 テーマフォルダ内の以下のファイルから _ を取り除いてアップロードしましょう。 _taxonomy-menu-category.php _single-menu.php
  78. 78. テンプレートファイルの 内容を見てみよう 10min.
  79. 79. 重要なテンプレートタグ カスタムフィールドの値を取得するためのタグ (今日覚えるのはこれだけ!) get_post_meta (記事ID, カスタムフィールド名, 単一フラグ);
  80. 80. カスタムフィールド取得サンプルコード // price というカスタムフィールドの値を取得する $price = get_post_meta(get_the_ID(), "price", true); // カスタムフィールドの値を表示する echo $price;
  81. 81. 動作確認しよう! 5min.
  82. 82. チームで考えてみよう 20min.
  83. 83. お題 メニュー投稿タイプアーカイブの 表示を変えてみよう! メニュー投稿タイプアーカイブURL http://wb.onocom.net/teamXX/menu/
  84. 84. お題回答例 archive-menu.php ファイルを作るか、 Lightningテーマの場合、 module_loop_menu.php を作ることでも実現できます。
  85. 85. PHP基礎 これだけは覚えておきましょう! 20min.
  86. 86. 復習の際には… 添付資料の以下のファイルに、PHP基礎で紹介 したプログラムを記載してあります。 必要に応じてコメントアウトを外して動作確認 などにご活用ください /themes/workshop_finish/_functions.php
  87. 87. PHP基礎  基本構文  出力  変数  配列  条件分岐  繰り返し  関数  クラス  名前空間  デバッグ
  88. 88. 基本構文(ファイル名) PHPプログラムを記載したファイルの拡張子は、 基本的に「.php」です。 ●●●.php ◎◎◎.php ▲▲▲.php
  89. 89. 基本構文 <?php // ココにプログラムを書く ?>
  90. 90. 基本構文 <?php /* 末尾迄プログラムが続く場合は、 この書き方もOK */
  91. 91. 基本構文 <?php // 命令の後にはセミコロン(;)必須 echo “Hello WordPress !!!”;
  92. 92. 基本構文(HTMLとの共存) <div id=“contents”> <h1><?php echo “表題”; ?></h1> <div> <?php echo “本文です~!”; ?> </div> </div><!-- /#contents -->
  93. 93. 出力 echo ブラウザ出力結果 元気モリモリ 鈴木一郎 <?php $myname = “鈴木一郎”; echo “元気モリモリ” . “<br>”; echo “{$myname}”; ?>
  94. 94. 変数 値を記録しておくメモ用紙1枚 $name という紙に“鈴木一郎”とメモる! 書き換えは自由に出来る! $name = “鈴木一郎”; echo $name;
  95. 95. 配列 メモ用紙をマスで区切って沢山の事をメモれる ようにする機能 $names = array(“鈴木一郎”,”山田太郎”,”木村拓哉”);
  96. 96. 配列の用法(名前の管理) 配列使わない場合 $name1 = “鈴木一郎”; $name2 = “山田太郎”; $name3 = “木村拓哉”; echo $name1; echo $name2; echo $name3; 配列使う場合 $names = array(); $names[] = “鈴木一郎”; $names[] = “山田太郎”; $names[] = “木村拓哉”; echo $names[0]; echo $names[1]; echo $names[2];
  97. 97. 配列使わない場合 配列使う場合 $name1 鈴木一郎 $name2 山田太郎 $name3 木村拓哉 0 鈴木一郎 1 山田太郎 2 木村拓哉 $names どちらも正解! 性質を見極めて使えるようになろう! 配列の用法(名前の管理)
  98. 98. 連想配列 配列の値の意味付けをする機能。 $names = array( “shacho” => “鈴木一郎”, “bucho” => ”山田太郎”, “shain” => ”木村拓哉”); echo $names[“shacho”]; // 鈴木一郎
  99. 99. 連想配列 0 shacho 鈴木一郎 1 bucho 山田太郎 2 shain 木村拓哉 $names ↑添字 ↑キー(KEY)
  100. 100. 条件分岐 if … else $name = “ono”; if( $name == “ono” ) { // 名前が”ono”だった時(true)の処理 } else { // 名前が”ono”ではない時(false)の処理 }
  101. 101. 条件分岐 if … elseif … else $name = “ono”; if( $name == “ono” ) { // 名前が”ono”だった時(true)の処理 } elseif( $name == “yamada” ) { // 名前が”yamada”だった時(true)の処理 } else { // 名前が”ono”でも“yamada”でもない時(false)の処 理 }
  102. 102. 比較方法を覚えよう $name = “ono”; if( $name == “ono” ) { // 名前が”ono”だった時(true)の処理 } else { // 名前が”ono”ではない時(false)の処理 }
  103. 103. 比較演算子 例 名前 結果 $a == $b 等しい $a が $b に等しい時 に TRUE。 $a != $b 等しくない $a が $b に等しくない場合 に TRUE。 $a < $b より少ない $a が $b より少ない時 に TRUE。 $a > $b より多い $a が $b より多い時 に TRUE。 $a <= $b より少ないか等しい $a が $b より少ないか等しい時に TRUE。 $a >= $b より多いか等しい $a が $b より多いか等しい時 に TRUE。 http://www.php.net/manual/ja/language.operators.comparison.php
  104. 104. 繰り返し(for) // 1~10までの数字を合計する処理 $total = 0; for( $i = 1; $i <= 10; $i++ ) { $total = $total + $i; } echo $total;
  105. 105. 繰り返し(foreach) 鈴木一郎 山田太郎 木村拓哉 $names = array(“鈴木一郎”,”山田太郎”,”木村拓哉”); foreach( $names as $name ) { echo $name . “<br>”; }
  106. 106. 繰り返し(foreach) shacho:鈴木一郎 bucho:山田太郎 shain:木村拓哉 $names = array( “shacho” => “鈴木一郎”, “bucho” => ”山田太郎”, “shain” => ”木村拓哉”); foreach( $names as $key =>$name ) { echo $key . “:” . $name . “<br>”; }
  107. 107. 繰り返し(while) 0 1 2 3 4 5 6 7 8 9 10 $count = 0; while( $count <= 10 ) { echo $count . “ “; $count++; }
  108. 108. 繰り返し(do-while) 0 1 2 3 4 5 6 7 8 9 10 // whileとは違って必ず1回は処理を行う $count = 0; do { echo $count . “ “; $count++; } while( $count <= 10 );
  109. 109. 関数 命令を与えると、答えをくれる機能 関数命令 → → 答え
  110. 110. 自作関数1 // 渡された名前を出力する関数 function disp_namelist( $names ) { foreach( $names as $name ) { echo “<p>{$name}</p>”; } }
  111. 111. 自作関数2 // 名前が”ono”かチェックする関数 function is_ono( $name ) { if( $name == “ono” ) { return true; } else { return false; } }
  112. 112. 自作関数2の使い方 $name1 = “yamada”; $name2 = “ono”; if( is_ono($name1) ) echo “OK!”; if( is_ono($name2) ) echo “OK!”;
  113. 113. クラス データの保持の仕方や扱い方法を厳密に決めた 設計図的なもの。 $name $age is_ossan() if( $this->age >= 40 ) { echo “オッサンだよ”; } else { echo “若者だよ”; } Ossan(オッサンクラス) $person = new Ossan(); $person->name = “鈴木一郎”; $person->age = 50; $person->is_ossan(); // オッサンだよ
  114. 114. クラスの書き方と使い方 class Ossan { var $name = "";// 名前 var $age = 0;// 年齢 function is_ossan() { if( $this->age >= 40 ) { echo "オッサンだよ"; } else { echo "若者だよ"; } } } $person = new Ossan(); $person->name = “鈴木一郎”; $person->age = 50; $person->is_ossan(); // オッサンだよ
  115. 115. 名前空間(namespace) 通常、同じ名前の関数やクラスを定義すると エラーになる。 function do_presentation() { 処理 } function do_presentation() { 処理 } 同じ関数名は定義できない Fatal error: Cannot redeclare do_presentation()
  116. 116. 名前空間(namespace) namespace work¥ono; function do_presentation() { echo “小野です。”; } 名前空間を使うと。。。 namespace work¥yamada; function do_presentation() { echo “山田です。”; } 名前空間が違うので同一の関数も定義可能
  117. 117. 名前空間(namespace) 関数やクラスがバッティングしないように用いる フォルダのような概念。 work ono yamada プレゼン.pptx プレゼン.pptx /work/ono/プレゼン.pptx /work/yamada/プレゼン.pptx ファイル名は一緒だが、 フォルダが違うのでOK イメージ図
  118. 118. 名前空間(namespace) // 名前空間を指定してから関数を呼び出し namespace work¥ono; do_presentation(); // 名前空間の完全修飾名を使用しての関数呼び出し ¥work¥yamada¥do_presentation(); 使うときはこんな感じ。 小野です。山田です。 結果
  119. 119. デバッグ  変数の内容を吐き出す。 $names = array( “shacho” => “鈴木一郎”, “bucho” => ”山田太郎”, “shain” => ”木村拓哉”); var_dump( $names ); array(3) { ["shacho"]=> string(12) "鈴木一郎" ["bucho"]=> string(12) " 山田太郎" ["shain"]=> string(12) "木村拓哉" }
  120. 120. デバッグ ブラウザのデバッグモード使ってます? PHPのどこでエラーが出ているかを把握する手 がかりになります。 Chrome: ツール → デベロッパーツール Firefox : Firebugプラグイン IE:ツール → 開発者ツール
  121. 121. おわり お疲れ様でした

×