Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

WordPressのテンプレートタグを理解する

2014年10月
第15回ゼロから始めるWordPress勉強会「WordPressのテンプレートタグを理解する」でのプレゼン資料です。

WordPressのテンプレートタグに絞って説明をしました。

そもそも、テンプレートタグってなんなの?から、テンプレートタグbloginfoを解析することでどのような仕組みなのかに触れてみました。

なんとなく、WordPressの全体的なとこから、テンプレートタグの位置づけが分かってもらえたらと思います。

  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

WordPressのテンプレートタグを理解する

  1. 1. WordPressのテンプレートタグを理解する Ticklecode. Yoshinori Kobayashi 1 第15回ゼロから始めるWordPress勉強会14.10.23
  2. 2. 生まれは奈良県です。 小林由憲(こばやしよしのり) Twitter: @AsbyuKobayashi ブログ: In Advance Only 2
  3. 3. アジェンダ 1.テンプレートタグとはなにか? 2.テンプレートタグの仕組み 3.まとめ
  4. 4. 4 デモで全体的にご説明。
  5. 5. 1.テンプレートタグとはなにか?
  6. 6. ページを表示するときのWordPressの動き。 DB:データベース MySql wp_posts WordPress コア ①http://ticklecode.com/blog/ テンプレート Page.php htmlを生成し て返す。 ② テンプレート タグ ③
  7. 7. 公式テーマ:Twenty Fourteen header.php <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_head(); ?> </head> 上記の、赤字がテンプレートタグ。
  8. 8. テンプレートタグの書き方 実例: <?php bloginfo( ‘name’ ); ?> 形式: <?php テンプレートタグ名(パラメタ); ?> プログラム言語PHPを使っているので、 <?php で始まり、?> で終わる。
  9. 9. WordPressでのテンプレートタグの位置づけ WordPressは、プログラミング言語PHPで作られている。 WordPress PHP サーバー WordPressでは便利なPHP関数が多数用意されてきる。その中でも WordPress テーマ用に定義されているのが、テンプレートタグと呼ばれている。
  10. 10. WordPress関数群の中でのテンプレートタグの位置づけ 関数リファレンス http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82% B9#.E3.83.86.E3.83.BC.E3.83.9E.E9.96.A2.E6.95.B0 投稿、カスタム投稿タイプ、固定ページ、添付 ファイル、ブックマーク関数 カテゴリー、タグ、タクソノミー関数 ユーザー、投稿者関数フィード関数 HTTP API 関数 コメント、ピン、トラックバック関数 アクション、フィルター、プラグイン、 ショートコード関数 テーマ関数フォーマット用関数 その他の関数マルチサイト関数 赤字がテンプレートタグと言われているか箇所
  11. 11. テンプレートタグの役割1 PHPの高度なプログラミング知識がなくてもテーマのカスタ マイズを可能にしてくれる。 PHPのif文や変数、配列、比較演算子といった基本文 法だけで、かなりのカスタマイズが行える。
  12. 12. 管理画面からの入力 データベース MySql header.php footer.php index.php テンプレートタグで データベースに保存した情報を 読みだす。 HTML .php のテンプレートに テンプレートタグが 記載されている テンプレートタグの役割2 管理画面で保存した情報を使えるようにする。(再利用する)
  13. 13. テンプレートタグの役割3 分割したテンプレートを結合する。(インクルードタグ) header.php index.php <?php get_header(); ?> <?php get_footer(); ?> footer.php
  14. 14. 2.テンプレートタグの仕組み
  15. 15. テンプレートタグとHTML出力結果1 twentyfourteen/header.php -> Line 22 <meta charset="<?php bloginfo( 'charset' ); ?>"> ブラウザで表示されると・・・ <meta charset="UTF-8">
  16. 16. テンプレートタグとHTML出力結果2 twentyfourteen/header.php -> LIne 26 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> ブラウザで表示されると・・・ <link rel="pingback" href="http://ticklecode.com/wp/xmlrpc.php">
  17. 17. テンプレートタグとHTML出力結果3 twentyfourteen/header.php -> LIne 33 <body <?php body_class(); ?>> ブラウザで表示されると・・・ <body class="home page page-id-6 page-template-default masthead-fixed full-width grid">
  18. 18. テンプレートタグとHTML出力結果4 twentyfourteen/header.php -> LIne 24 <title><?php wp_title( '|', true, 'right' ); ?></title> ブラウザで表示されると・・・ <title>世田谷区で不動産のWebサイト制作のことなら、TickleCode | 世田谷区や東急田園都市沿線で新築不動産のPRサイトや不動 産物件サイトの制作、運営のことならTickleCodeにお尋ねください。 </title>
  19. 19. テンプレートタグ: bloginfo の仕組み PHP Cross Reference of WordPress http://phpxref.ftwr.co.uk/ Webサイトで、WordPressのソースを追跡できるサービス。
  20. 20. [Search] ⇒ [Function] の箇所で、「bloginfo」を入力して、[Search]
  21. 21. general-template.php の585 行目で定義(本体がある場所)されている。 クリックする。 wp-includes/general-template.php は、全体的によく使うタグ(関数)が集められて いるphpファイル
  22. 22. bloginfo の定義 function はユーザー定義関数。なにかをもらって、なにかを返す。 echo(エコー)は、なにかを表示する。 $showは、showという名前の変数(格納場所)を示す。 <?php bloginfo( ‘name’ ); ?>で呼ばれているので、$showには、’name’が入って いる。
  23. 23. bloginfo からget_bloginfo を探す。
  24. 24. get_bloginfo $show の中身は、’name’ で、$filter の中身は、display が入っている。 switch case は、何かの場合に切り替えて行くという意味。
  25. 25. get_bloginfo 「case ‘name’:」に、breakがないので、次の「default:」も実行する。 get_option(‘blogname’); を使って、「blogname」を取得している。
  26. 26. get_option データベースのoptionsテーブルから、指定したオプションの値を取得する。 http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E 3%83%B3%E3%82%B9/get_option データベースget_option(‘blogname’); option テーブル 世田谷区で不動産のWebサイト制作のことなら、 TickleCode
  27. 27. テンプレートタグには表示するもの(echoあり)、 データを取得するのみ(echoなし)がある。 〇表示するもの(echoあり) ⇒ そのままで、ブラウザで表示される、 bloginfo( ‘charset’ ) 、wp_title( ‘|’, true, ‘right’ ) など 〇データ取得(echoなし) ⇒ ブラウザにはなにも表示されない。 get_bloginfo( $show, 'display' ); ※ 表示させたい場合は、echo get_bloginfo( $show, ‘display’ ); とする。 ※ get_ から始まる、テンプレートタグは、データ取得のみ(echo なし)が多い。
  28. 28. 3.まとめ
  29. 29. ・WordPressテーマ用に作られた関数を、テンプレートタグという。 http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%B F%E3%82%B0 ・テンプレートタグで管理画面の情報(設定、投稿、固定ページ) を再利用できる。 ・テンプレートタグには、ブラウザ表示用(echoあり)と、データ取得のみ(echo なし)がある。
  30. 30. PHP 文法チートシート 文法意味 <?php ~ ?> ~ をPHPで実行することを示す。 ;(セミコロン) ;(セミコロン)までを一つの分として解釈 function 関数名() { return -- ; } ユーザー定義関数を示す。 関数は何かをもらって、何かを返す機能。 echo エコーと読む。 何かを出力(表示)する。 $show $showは、showという名前の変数(格納場 所)を示す。 「$」は変数の意味。 switch($show) { case ‘home’ : ~ case ‘url’ : $showの中身を、case(’home’など)と比較 していく。breakで抜ける。breakがないとき は、次のcaseも実行する。
  31. 31. 参考になる記事まとめ WordPressテンプレートタグ集|初心者即実践&仕事で使えるコピペ用: http://webdesignerwork.jp/wordpress/wordpress_tag/ WordPressテンプレートタグチートシート: http://mignonstyle.com/wordpress-cheat-sheet/ WordPress Codex テンプレートタグ: http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83% AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0
  32. 32. 参考図書 WordPressユーザーのためのPHP入門は じめから、ていねいに。 PHPの説明もあり、テンプレート、テンプレートタグの解説が豊富。
  33. 33. 33 ご清聴、ありがとうございました。

×