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.

WordPress中級者への道!テンプレートタグはどう動くのか!?

7,605 views

Published on

こういうふうに説明してもらえたら、もっと速く理解できたのにな、ということをまとめて見ました。

テンプレートタグの使い方だけでなく、テンプレートタグが動くに至るまでの仕組みについて、サーバ、htmlとphpの関係、データベースなどの話を絡めて作っています。

初心者がWordPressをインストールした時に、ぶつかる壁について話をしたつもりです。

上級者には初心者が何に躓き易いかが気が付きにくく、初心者は自分が何がわからなくて迷子になっているのかが分からない。

その間が埋められればと思っています。

YouTubeに動画が上がるそうなので、そちらもお楽しみに!

  • Be the first to comment

WordPress中級者への道!テンプレートタグはどう動くのか!?

  1. 1. テンプレートタグ WordPress中級者への道! 僕がこういうふうに教えてもらえたら早かった、 をお話しします。 Shinichi Nishikawaネスト赤羽 IT勉強会 @shinichiN2011/11/11 http://nskw-style.com/
  2. 2. 目次• 目標、現在地の確認 • 2の続き:理解する • WordPressのファイル構成• 1:使う • TwentyElevenを読む • テンプレートタグって何? • 他にできることの事例 • 形 • 働きを見てみる/とりあえず やってみる • 3:勉強できるように• 2:理解する • 勉強する方法 • htmlとphp • 次のステップ • クライアントとサーバ • データベースとphp •
  3. 3. 目標• テンプレートタグを、使えるようになる• なぜ、テンプレートタグが動くのか、分かる• 自分で勉強して、成長できるようになる
  4. 4. 僕の目標• 分かりやすく!• 全体→個別• 仕組みも理解してもらう! (「おまじない」って言わない) 分からなかった頃に、「こういうふうに教えてもらいたかった」をまとめました。
  5. 5. 現在地の確認• ネットサーフィンできる!• html/cssのコーディングができる!• 本体、テーマ、プラグインがインストールできる! ←昨日までココ• テンプレートタグが使える/分かる ←今日はココ• 勉強できる ←明日からココ• テーマが作れる• オリジナルのテンプレートタグが作れる• プラグインが作れる• サービスを作る!• どんどん作る!• WordPressのもっとすごいのを作る!?
  6. 6. テンプレートタグって何?• 形を見てみる• 働きを見てみる• とりあえずやってみる
  7. 7. テンプレートタグの形 <?php ?> <?php the_title(); ?> <?php bloginfo( url ); ?> <?php bloginfo( name ); ?> <?php wp_title( ¦ , true, right ); ?><?php wp_list_categories( orderby=id&show_count=1&exclude=10 ); ?>
  8. 8. <?php ?> <?php ?>これで囲みます。
  9. 9. <?php the_title(); ?> <?php the_title(); ?> 基本の形   名前 + () + ;
  10. 10. <?php bloginfo( xxx ); ?> <?php bloginfo( url ); ?> <?php bloginfo( name ); ?> () の中に何かを入れる
  11. 11. <?php wp_title(xxx, xxx, xxx); ?> <?php wp_title( ¦ , true, right ); ?> () の中にいくつも入れる
  12. 12. <?php wp_list_categories( a=x&b=y&c=z ); ?><?php wp_list_categories( orderby=id&show_count=1&exclude=10 ); ?> こんなのもある
  13. 13. テンプレートタグの形 <?php ?> <?php the_title(); ?> <?php bloginfo( url ); ?> <?php bloginfo( name ); ?> <?php wp_title( ¦ , true, right ); ?><?php wp_list_categories( orderby=id&show_count=1&exclude=10 ); ?>
  14. 14. 働きを見てみるとりあえずやってみる
  15. 15. <?php the_title(); ?>
  16. 16. <?php bloginfo( url ); ?><?php bloginfo( name ); ?> name url
  17. 17. <?php wp_title( ¦ , true, right ); ?>
  18. 18. wp_list_categories( orderby=id&show_count=1&exclude=10 );
  19. 19. テンプレートタグの形 <?php ?> <?php the_title(); ?> <?php bloginfo( url ); ?> <?php bloginfo( name ); ?> <?php wp_title( ¦ , true, right ); ?><?php wp_list_categories( orderby=id&show_count=1&exclude=10 ); ?>
  20. 20. 今日の本題 テンプレートタグはなぜ動く?• phpとhtml• クライアントとサーバ• データベース• 小芝居• WordPressのファイル群• TwentyElevenを読む
  21. 21. htmlとphp• テーマにあるphpファイル。• html の中に、<?php xxx ?>が書かれてる。• ブラウザでソースを開いてみると・・・ • → phpの部分はなくなって、htmlだけになってる! • → 何が起こってるの??
  22. 22. クライアントとサーバ
  23. 23. クライアントとサーバ 自宅サーバーデータセンター
  24. 24. クライアントとサーバ
  25. 25. クライアントとサーバ サーバクライアント http://example.com と、ブラウザで入力する。
  26. 26. クライアントサイドプログラムJavaScript • ブラウザで実行される • こう書くと、こう動くというルールをブラ ウザが知っている • ちなみにhtml/cssのルールも知ってい る。ブラウザを作っている人たちの会議と かもあるし • 通信は発生しない • その場で動く • Ajaxという通信するのもある
  27. 27. サーバサイドプログラムphpとか • サーバで実行される • クリックとかアイコンとかないので、見えま せん 見えません • phpだけじゃなく、Java, Ruby, Perl, Pythonなど、たくさんあります • WordPressはphpだし、当たり前ですが、 モロにサーバサイドです。 • クライアントからのリクエスト内容に応じ て、色々計算して、結果を返してあげます。 • WordPressの場合、URLやフォームの内容 を受け取って、色々やったあと、結果をhtml にして、返しています。
  28. 28. データベースMySQL • サーバで実行される • ほんとは見えないんだけど、phpMyAdmin などを使うと、無理やり見えます。 • リレーショナルデータベースの一種で、 PostgreSQLや、Oracleとかもあります。 • リレーショナル∼ではないものに、アマゾン のSimpleDB、GoogleのBigTableなどがあ るらしいです。 • WordPressではMySQLです。 • SQL文という命令文を使いますが、テーマを 作る、簡単なプラグインを作る場面では気に しなくて大丈夫です。
  29. 29. 小芝居 クライアントとサーバのやり取り、 及び、サーバ内でのWordPressの働きについて、 当日は小芝居をしました。 YouTubeに動画が上がるそうなので、 興味のある方はご参照ください。
  30. 30. WordPressのファイル
  31. 31. 全体
  32. 32. 上の階層も 知っておく• wp-admin • 管理画面系のファイル群• wp-content • テーマ、プラグイン、言語ファイルとか。 • ここしか触らない。• wp-includes • 管理画面系のファイル群 • いろんな関数やクラスが保存されている。 • 他のファイルから呼び出されまくる。 • テンプレートタグは、この中で定義され ている!
  33. 33. 上の階層も 知っておく• wp-admin • 管理画面系のファイル群• wp-content • テーマ、プラグイン、言語ファイルとか。 • ここしか触らない。• wp-includes • 管理画面系のファイル群 • いろんな関数やクラスが保存されている。 • 他のファイルから呼び出されまくる。 • テンプレートタグは、この中で定義され ている!
  34. 34. wp-includes/general-template.php の1896行目
  35. 35. wp-includes/general-template.php の1896行目 テンプレートタグは、 phpの関数です。
  36. 36. wp-includes/general-template.php の1896行目 WordPressは、 テンプレートタグは、 phpの関数とかの集まりです。 phpの関数です。
  37. 37. TwentyEleven を読む
  38. 38. TwentyEleven• デモ的に読みました。• YouTube動画参照です。
  39. 39. 他の例
  40. 40. 例:wp_tag_cloud();
  41. 41. 例:wp_login_form();<?php wp_login_form(); ?> と書くと、、 ↓
  42. 42. 勉強できるようになる
  43. 43. 現在地の確認• ネットサーフィンできる!• html/cssのコーディングができる!• 本体、テーマ、プラグインがインストールできる!• テンプレートタグが使える/分かる ←今日はココ• 勉強できる ←明日からココ• テーマが作れる ←がんばればココも明日から。作りながら勉強すると吉!• オリジナルのテンプレートタグが作れる• プラグインが作れる• サービスを作る!• どんどん作る!• WordPressのもっとすごいのを作る!?
  44. 44. ネットで勉強• Codex • http://wpdocs.sourceforge.jp/テンプレートタグ • 英語版もある。• ブログ • かちびと.net http://kachibito.net/ • WebDesignRecipe http://webdesignrecipes.com/
  45. 45. 本で勉強• WordPress関連 • WordPress関数リファレンスガイド • Amazon WordPress で検索 こればっかりは、色々試さないとです。。• PHP関連 • よくわかるPHPの教科書 • PHP逆引きレシピ
  46. 46. WordPressコミュニティで勉強• Forum • http://ja.forums.wordpress.org/ • まず検索しよう!ナレッジベースという考え方 • 自分が困っていることは、多分誰かが以前に困ってる。 • 自分が困っていることは、多分誰かが以後に困る。 • 質問の仕方 • WP_DEBUG を true に変えよう • プラグインを停止しよう。プラグインが原因だった場合は、そのプラグイン の名前とURLを報告しよう • 何をしたくて、何を試し、どういうエラーが出たのか。エラー文はコピペす べし • 解決したら、報告をする。自己解決の場合にも、報告する。
  47. 47. twitterで勉強• ハッシュタグ • #wordpressjp を付けてつぶやいたら、誰かが答えてくれるかもしれない• フォロー • wordpressを使っている人たち、自分の分からないことをやろうとしている人たちをフォローする• 僕が気をつけていること • 感謝の気持ちを表す • 自分をフォローしてくれている人にも結果が分かるようにする • 分からないことを、分かったふりをしない • →「これ以上聞いたらしつこいかな」と考えてしまう気持ちが出てきてしまいますが、自分も聞 かれた人もそのやりとりを見ている人も誰も得しません。 • 分かったフリをしている時、せっかく教えてくれている人にも、やりとりを見ている人にも、 きっとバレていますよw • WordPressのコミュニティに恩返しをする • ブログに書く、フォーラムで答える、勉強会を開く。なんでもいいので、やってみるといいで す。
  48. 48. リアルで勉強• WordBench • http://wordbench.org/ • 毎月、日本各地で開かれているWordPressの勉強会がリスト されています• WordCamp • WordPressが好きな人が数百人! • ブロガー、初心者、デザイナー、ものすごく詳しい人、 WordPressを使って大規模サイトを作る人、外国からも、み んなが集まるお祭りです • 11月27日(日)に品川の楽天(2号館!)で開催されます
  49. 49. 次のステップ!
  50. 50. 次のステップ=テーマが作れる • 必要なこと • テンプレート階層 • インクルードタグ • ループ • 条件分岐タグ
  51. 51. 次の次のステップ!
  52. 52. 次の次のステップ=オリジナルのタグが作れる• 必要なこと • phpの知識 • phpで関数を作るということ • テンプレートタグはphpの関数です
  53. 53. おしまい Shinichi Nishikawa @shinichiN http://nskw-style.com/

×