狠狠撸
Submit Search
WordPress 勉強会@松戸 | テンフ?レートファイルとクエリ基礎
?
1 like
?
661 views
Seiichiro Mishiba
Follow
第23回 WordPress 勉強会@松戸 2016年7月13日
Read less
Read more
1 of 29
Download now
Download to read offline
More Related Content
WordPress 勉強会@松戸 | テンフ?レートファイルとクエリ基礎
1.
WordPress 勉強会@松戸 http://wp-matsudo.net/ テンプレートファイルとクエリ基礎 第23回 WordPress
勉強会@松戸 2016年7月13日
2.
WordPress 勉強会@松戸 http://wp-matsudo.net/ 自己紹介 1
3.
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 勉強会@松戸
4.
WordPress 勉強会@松戸 http://wp-matsudo.net/ WordPress の仕組み 3
5.
http://wp-matsudo.net/ WordPress 勉強会@松戸 WordPress でページを表示する(イメージ) 4 Webサーバ HTTPリクエスト HTTPレスポンス ①こんなんください。 ②こんなん聞かれてます。 ③こんなん持ってます。 ④こんなんでました!
6.
http://wp-matsudo.net/ WordPress 勉強会@松戸 5 ①こんなんください。? ブラウザから発行されたHTTPリクエストをWebサーバが受け取る ②こんなん聞かれてます。? Webサーバは受け取ったHTTPリクエストを基に、PHPを介してクエリを発 行し、データベース(MySQL)から必要なデータを取得する ③こんなん持ってます。? 取得したデータをテンプレートファイルを利用してHTMLに変換する ④こんなんでました!? 生成されたHTMLをHTTPレスポンスとしてブラウザへ返す WordPress
でページ表示する(基本フロー)
7.
WordPress 勉強会@松戸 http://wp-matsudo.net/ HTTPリクエスト 6
8.
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リクエストのボディ部にデータを格納し送信する。
9.
http://wp-matsudo.net/ WordPress 勉強会@松戸 実際に確認してみよう(デモします!) 8 Firefox の場合???アドオン
Firebug を利用する。 ①アドオンFirebug を開く。 ②パネルの一覧からネットを選択する。 ③確認したいサイト(例)http://wp-matsudo.net/ をブラウザで表示する。 ④一覧のURLから確認したいサイト(例)wp-matsudo.net を選択する。 ⑤リクエストヘッダのソースを表示を選択する。 デモ?デモ?デモ
10.
WordPress 勉強会@松戸 http://wp-matsudo.net/ クエリ基礎 9
11.
http://wp-matsudo.net/ WordPress 勉強会@松戸 10 データベース(WordPress
では MySQL)から データを抽出したり操作したりといった処理を行 うための命令のこと(問い合わせ)。データベー スに対して、文字列や命令をクエリとして発行す ることによって、特定の条件に合致したデータを 検索したり、置換や削除などを行ったりすること ができる。 クエリとは
12.
http://wp-matsudo.net/ WordPress 勉強会@松戸 11 HTTPリクエスト HTTPレスポンス HTTPリクエストを基に? クエリを発行 テンプレートを利用し HTMLに変換
13.
http://wp-matsudo.net/ WordPress 勉強会@松戸 12 HTTPリクエスト HTTPレスポンス HTTPリクエストを基に? クエリを発行 テンプレートを利用し? HTMLに変換 ①クエリ条件の設定? ※どのページが見たいの?? ※カテゴリとか条件はある? ↓ ②クエリを発行し、DBからデータを取得 ↓ ③グローバル変数($wp_query)の生成? ※次頁参照 ($wp_query)
14.
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
15.
WordPress 勉強会@松戸 http://wp-matsudo.net/ テンプレートファイル 14
16.
http://wp-matsudo.net/ WordPress 勉強会@松戸 15 HTTPリクエスト HTTPレスポンス HTTPリクエストを基に? クエリを発行 テンプレートを利用し HTMLに変換
17.
http://wp-matsudo.net/ WordPress 勉強会@松戸 16 HTTPリクエスト HTTPレスポンス HTTPリクエストを基に? クエリを発行 テンプレートを利用し? HTMLに変換 ①テンプレートローダー実行? ※表示用テンプレートファイルを選択 ↓ ②テンプレートファイル読み込み ↓ ③ループ処理(テンプレート内容によって) ↓ ④HTMLに変換
18.
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; ※説明用に修正を加えています
19.
WordPress 勉強会@松戸 http://wp-matsudo.net/ そこで、 テンプレート階層 18
20.
http://wp-matsudo.net/ WordPress 勉強会@松戸 19 参考)WordPress
Codex https://wpdocs.osdn.jp/テンプレート階層
21.
WordPress 勉強会@松戸 http://wp-matsudo.net/ ページ表示時に利用する テンプレートファイルの 優先順位を表している 20
22.
http://wp-matsudo.net/ WordPress 勉強会@松戸 21 1.single-{post_type}.php? 2.single.php? 3.singular.php? 4.index.php 固定投稿ページの場合 ない! ない! ない! ある!! ある!! ある!! (必ず)ある!! 決定!! 決定!! 決定!! 決定!!
23.
WordPress 勉強会@松戸 http://wp-matsudo.net/ 実際に 確認してみよう! (※ここからはデモします) 22
24.
http://wp-matsudo.net/ WordPress 勉強会@松戸 23 ローカル環境、テスト環境などお持ちで、お試しになる場合、今 回のデモと同じ環境(テーマファイル)を、サイトからダウンロー ドできます。? ※ダウンロードサイトのアドレスは勉強会当日に会場にてご案 内させて頂きます。 環境について
25.
http://wp-matsudo.net/ WordPress 勉強会@松戸 24 スターターテーマ(_s) 参考)UNDERSCORES(_s) http://underscores.me/ 今回のテーマは
スターターテーマ(_s)を利用しています 初期状態のファイル構成
26.
http://wp-matsudo.net/ WordPress 勉強会@松戸 25 1.
page.php をコピーし、固定ページ「***」だけサイドバーを表示さ せないテンプレートを作成してみる。 2. archive.php をコピーし、投稿カテゴリ「***」だけタイトルを表示 させないテンプレートを作成しみる。 実際に確認してみよう① デモ?デモ?デモ
27.
WordPress 勉強会@松戸 http://wp-matsudo.net/ つづきは もくもく時間に???!? 26
28.
http://wp-matsudo.net/ WordPress 勉強会@松戸 27 3.
archive.php をさらにコピーし、カスタム投稿「***」の一覧を表 示するテンプレートを作成してみる。? 4. index.php をコピーし、固定ページ「***」の内容をトップページ に表示するテンプレートを作成してみる。 5. index.php をコピーし、すべての投稿の一覧を表示するテンプレー トを作成してみる。 確認してみよう② デモ?デモ?デモ
29.
WordPress 勉強会@松戸 http://wp-matsudo.net/ おわり! 28
Download