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

WordPress 勉強会@松戸

http://wp-matsudo.net/

テンプレートファイルとクエリ基礎

第23回 WordPress 勉強会@松戸 2016年7月13日



自己紹介

1


WordPress 勉強会@松戸 2

自己紹介

おもな活動

名前　三柴誠一郎（愛媛県出身）職業　フリーランス（Webエンジニア）拠点　千葉県松戸市特徴　絶望的に方向音痴趣味　旅、料理、滝めぐり、神社めぐり

WordPress 勉強会@松戸（運営）WordPressもくもく倶楽部 at コエド（アドバイザー）WordCamp Tokyo2015（登壇）WordCamp Tokyo2014（運営スタッフ）

運営サイト34デザインねっと

http://burabura-jinja.net/


http://34-d.net/

ぶらぶら神社


http://burabura-jinja.net/


http://34-d.net/



WordPress の仕組み

3



WordPress でページを表示する（イメージ）

4

Webサーバ

HTTPリクエスト

HTTPレスポンス

①こんなんください。

②こんなん聞かれてます。

③こんなん持ってます。

④こんなんでました！



①こんなんください。ブラウザから発行されたHTTPリクエストをWebサーバが受け取る

②こんなん聞かれてます。Webサーバは受け取ったHTTPリクエストを基に、PHPを介してクエリを発行し、データベース（MySQL）から必要なデータを取得する

③こんなん持ってます。取得したデータをテンプレートファイルを利用してHTMLに変換する

④こんなんでました！生成されたHTMLをHTTPレスポンスとしてブラウザへ返す

WordPress でページ表示する（基本フロー）



HTTPリクエスト

6



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リクエストのボディ部にデータを格納し送信する。



実際に確認してみよう（デモします！）

8

Firefox の場合・・・アドオン Firebug を利用する。

①アドオンFirebug を開く。

②パネルの一覧からネットを選択する。

③確認したいサイト（例）http://wp-matsudo.net/ をブラウザで表示する。

④一覧のURLから確認したいサイト（例）wp-matsudo.net を選択する。

⑤リクエストヘッダのソースを表示を選択する。

デモ・デモ・デモ





クエリ基礎

9



データベース（WordPress では MySQL）からデータを抽出したり操作したりといった処理を行うための命令のこと（問い合わせ）。データベースに対して、文字列や命令をクエリとして発行することによって、特定の条件に合致したデータを検索したり、置換や削除などを行ったりすることができる。

クエリとは



HTTPリクエスト

HTTPレスポンス

HTTPリクエストを基にクエリを発行

テンプレートを利用し HTMLに変換



HTTPリクエスト

HTTPレスポンス


テンプレートを利用しHTMLに変換

①クエリ条件の設定 ※どのページが見たいの？※カテゴリとか条件はある？ ↓ ②クエリを発行し、DBからデータを取得 ↓ ③グローバル変数（$wp_query）の生成 ※次頁参照

($wp_query)



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



テンプレートファイル

14



HTTPリクエスト

HTTPレスポンス


テンプレートを利用し HTMLに変換



HTTPリクエスト

HTTPレスポンス


テンプレートを利用しHTMLに変換

①テンプレートローダー実行※表示用テンプレートファイルを選択 ↓ ②テンプレートファイル読み込み ↓ ③ループ処理（テンプレート内容によって） ↓ ④HTMLに変換



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;

※説明用に修正を加えています



そこで、テンプレート階層

18



参考）WordPress Codex https://wpdocs.osdn.jp/テンプレート階層

https://wpdocs.osdn.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



ページ表示時に利用するテンプレートファイルの優先順位を表している

20



1.single-{post_type}.php

2.single.php

3.singular.php

4.index.php

固定投稿ページの場合

ない！

ない！

ない！

ある!!

ある!!

ある!!

（必ず）ある!!

決定!!

決定!!

決定!!

決定!!



実際に確認してみよう！

（※ここからはデモします）

22



ローカル環境、テスト環境などお持ちで、お試しになる場合、今回のデモと同じ環境（テーマファイル）を、サイトからダウンロードできます。※ダウンロードサイトのアドレスは勉強会当日に会場にてご案内させて頂きます。

環境について



スターターテーマ（_s）

参考）UNDERSCORES（_s） http://underscores.me/

今回のテーマはスターターテーマ（_s）を利用しています

初期状態のファイル構成

http://underscores.me/



1. page.php をコピーし、固定ページ「＊＊＊」だけサイドバーを表示させないテンプレートを作成してみる。

2. archive.php をコピーし、投稿カテゴリ「＊＊＊」だけタイトルを表示させないテンプレートを作成しみる。

実際に確認してみよう① デモ・デモ・デモ



つづきはもくもく時間に・・・!?

26



3. archive.php をさらにコピーし、カスタム投稿「＊＊＊」の一覧を表示するテンプレートを作成してみる。4. index.php をコピーし、固定ページ「＊＊＊」の内容をトップページに表示するテンプレートを作成してみる。

5. index.php をコピーし、すべての投稿の一覧を表示するテンプレートを作成してみる。

確認してみよう② デモ・デモ・デモ



おわり！

28

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

Internet