狠狠撸

狠狠撸Share a Scribd company logo
WordPress 勉強会@松戸
http://wp-matsudo.net/
テンプレートファイルとクエリ基礎
第23回 WordPress 勉強会@松戸
2016年7月13日
WordPress 勉強会@松戸
http://wp-matsudo.net/
自己紹介
1
http://wp-matsudo.net/
WordPress 勉強会@松戸 2
自己紹介
おもな活動
名前 三柴 誠一郎(愛媛県出身)?
職業 フリーランス(Webエンジニア)?
拠点 千葉県松戸市?
特徴 絶望的に方向音痴?
趣味 旅、料理、滝めぐり、神社めぐり
WordPress 勉強会@松戸(運営)?
WordPressもくもく倶楽部 at コエド(アドバイザー)?
WordCamp Tokyo2015(登壇)?
WordCamp Tokyo2014(運営スタッフ)
運営サイト
34デザインねっと
http://burabura-jinja.net/
http://wp-matsudo.net/
http://34-d.net/
ぶらぶら神社
WordPress 勉強会@松戸
WordPress 勉強会@松戸
http://wp-matsudo.net/
WordPress の仕組み
3
http://wp-matsudo.net/
WordPress 勉強会@松戸
WordPress でページを表示する(イメージ)
4
Webサーバ
HTTPリクエスト
HTTPレスポンス
①こんなんください。
②こんなん聞かれてます。
③こんなん持ってます。
④こんなんでました!
http://wp-matsudo.net/
WordPress 勉強会@松戸 5
①こんなんください。?
ブラウザから発行されたHTTPリクエストをWebサーバが受け取る
②こんなん聞かれてます。?
Webサーバは受け取ったHTTPリクエストを基に、PHPを介してクエリを発
行し、データベース(MySQL)から必要なデータを取得する
③こんなん持ってます。?
取得したデータをテンプレートファイルを利用してHTMLに変換する
④こんなんでました!?
生成されたHTMLをHTTPレスポンスとしてブラウザへ返す
WordPress でページ表示する(基本フロー)
WordPress 勉強会@松戸
http://wp-matsudo.net/
HTTPリクエスト
6
http://wp-matsudo.net/
WordPress 勉強会@松戸 7
GET / HTTP/1.1
!
Host: wp-matsudo.net
!
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:47.0) Gecko/20100101 Firefox/47.0
!
*** 略 ***
!
Connection: keep-alive
HTTPリクエスト
HTTPリクエスト(GETメソッド例)
1. HTTPリクエスト行
2. HTTPヘッダー行
(空白行)
3. HTTPボディ部
???1行
???複数行
???1行
???必要数(POSTメソッド)
【POST と GET】
Webサーバとのデータの受け渡しの方法(メソッド)。
GETメソッドはURLの末尾に「?」をつけ、「パラメーター名=“値”」という形式で送信する。POSTメソッドは
HTTPリクエストのボディ部にデータを格納し送信する。
http://wp-matsudo.net/
WordPress 勉強会@松戸
実際に確認してみよう(デモします!)
8
Firefox の場合???アドオン Firebug を利用する。
①アドオンFirebug を開く。
②パネルの一覧からネットを選択する。
③確認したいサイト(例)http://wp-matsudo.net/ をブラウザで表示する。
④一覧のURLから確認したいサイト(例)wp-matsudo.net を選択する。
⑤リクエストヘッダのソースを表示を選択する。
デモ?デモ?デモ
WordPress 勉強会@松戸
http://wp-matsudo.net/
クエリ基礎
9
http://wp-matsudo.net/
WordPress 勉強会@松戸 10
データベース(WordPress では MySQL)から
データを抽出したり操作したりといった処理を行
うための命令のこと(問い合わせ)。データベー
スに対して、文字列や命令をクエリとして発行す
ることによって、特定の条件に合致したデータを
検索したり、置換や削除などを行ったりすること
ができる。
クエリとは
http://wp-matsudo.net/
WordPress 勉強会@松戸 11
HTTPリクエスト
HTTPレスポンス
HTTPリクエストを基に?
クエリを発行
テンプレートを利用し
HTMLに変換
http://wp-matsudo.net/
WordPress 勉強会@松戸 12
HTTPリクエスト
HTTPレスポンス
HTTPリクエストを基に?
クエリを発行
テンプレートを利用し?
HTMLに変換
①クエリ条件の設定?
※どのページが見たいの??
※カテゴリとか条件はある?
↓
②クエリを発行し、DBからデータを取得
↓
③グローバル変数($wp_query)の生成?
※次頁参照
($wp_query)
http://wp-matsudo.net/
WordPress 勉強会@松戸 13
WP_Query は wp-includes/query.php に定義されているクラ
スで、WordPress ブログへの複雑な投稿やページのリクエストを
取り扱います。 wp-blog-header.php (バージョン 2.0 では WP ク
ラス) が $wp_query オブジェクトに現在のリクエストを定義する
情報を与えることで、$wp_query はどのタイプのクエリを扱って
いるのか (カテゴリーアーカイブ、年月別アーカイブ、フィード、検索
など) を確定し、要求された投稿を取り出します。$wp_query はリ
クエスト上の情報を多く保持していて、後からでも利用することが
できます。
関数リファレンス/WP Query(抜粋)
参考)WordPress Codex / 関数リファレンス/WP Query
https://wpdocs.osdn.jp/関数リファレンス/WP_Query
WordPress 勉強会@松戸
http://wp-matsudo.net/
テンプレートファイル
14
http://wp-matsudo.net/
WordPress 勉強会@松戸 15
HTTPリクエスト
HTTPレスポンス
HTTPリクエストを基に?
クエリを発行
テンプレートを利用し
HTMLに変換
http://wp-matsudo.net/
WordPress 勉強会@松戸 16
HTTPリクエスト
HTTPレスポンス
HTTPリクエストを基に?
クエリを発行
テンプレートを利用し?
HTMLに変換
①テンプレートローダー実行?
※表示用テンプレートファイルを選択
↓
②テンプレートファイル読み込み
↓
③ループ処理(テンプレート内容によって)
↓
④HTMLに変換
http://wp-matsudo.net/
WordPress 勉強会@松戸
wp-includes/template-loader.php (抜粋)
17
/* 省略 */?
if ( defined('WP_USE_THEMES') && WP_USE_THEMES ) :
$template = false;
if ( is_404() && $template = get_404_template() ) :
elseif ( is_front_page() && $template = get_front_page_template() ) :
elseif ( is_home() && $template = get_home_template() ) :
/* 省略 */
elseif ( is_single() && $template = get_single_template() ) :
elseif ( is_page() && $template = get_page_template() ) :
/* 省略 */?
elseif ( is_paged() && $template = get_paged_template() ) :
else :
$template = get_index_template();
endif;
/* ↑テンプレートフィルの選択 */
/* ↓テンプレートフィルのインクルード */
if ( $template = apply_filters( 'template_include', $template ) )
include( $template );
return;
endif;
※説明用に修正を加えています
WordPress 勉強会@松戸
http://wp-matsudo.net/
そこで、
テンプレート階層
18
http://wp-matsudo.net/
WordPress 勉強会@松戸 19
参考)WordPress Codex
https://wpdocs.osdn.jp/テンプレート階層
WordPress 勉強会@松戸
http://wp-matsudo.net/
ページ表示時に利用する
テンプレートファイルの
優先順位を表している
20
http://wp-matsudo.net/
WordPress 勉強会@松戸 21
1.single-{post_type}.php?
2.single.php?
3.singular.php?
4.index.php
固定投稿ページの場合
ない!
ない!
ない!
ある!!
ある!!
ある!!
(必ず)ある!!
決定!!
決定!!
決定!!
決定!!
WordPress 勉強会@松戸
http://wp-matsudo.net/
実際に
確認してみよう!
(※ここからはデモします)
22
http://wp-matsudo.net/
WordPress 勉強会@松戸 23
ローカル環境、テスト環境などお持ちで、お試しになる場合、今
回のデモと同じ環境(テーマファイル)を、サイトからダウンロー
ドできます。?
※ダウンロードサイトのアドレスは勉強会当日に会場にてご案
内させて頂きます。
環境について
http://wp-matsudo.net/
WordPress 勉強会@松戸 24
スターターテーマ(_s)
参考)UNDERSCORES(_s)
http://underscores.me/
今回のテーマは スターターテーマ(_s)を利用しています
初期状態のファイル構成
http://wp-matsudo.net/
WordPress 勉強会@松戸 25
1. page.php をコピーし、固定ページ「***」だけサイドバーを表示さ
せないテンプレートを作成してみる。
2. archive.php をコピーし、投稿カテゴリ「***」だけタイトルを表示
させないテンプレートを作成しみる。
実際に確認してみよう① デモ?デモ?デモ
WordPress 勉強会@松戸
http://wp-matsudo.net/
つづきは
もくもく時間に???!?
26
http://wp-matsudo.net/
WordPress 勉強会@松戸 27
3. archive.php をさらにコピーし、カスタム投稿「***」の一覧を表
示するテンプレートを作成してみる。?
4. index.php をコピーし、固定ページ「***」の内容をトップページ
に表示するテンプレートを作成してみる。
5. index.php をコピーし、すべての投稿の一覧を表示するテンプレー
トを作成してみる。
確認してみよう② デモ?デモ?デモ
WordPress 勉強会@松戸
http://wp-matsudo.net/
おわり!
28

More Related Content

WordPress 勉強会@松戸 | テンフ?レートファイルとクエリ基礎