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.

4時間まったりWordPressテーマ作成講座

5,299 views

Published on

  • Be the first to comment

4時間まったりWordPressテーマ作成講座

  1. 1. 4時間まったり! WordPressテーマ作成講座 html/cssが分かる人、 コーダーさんやウェブデザイナーの方が、 自分でWordPressの勉強が できるようになるところまで。Shinichi Nishikawa@shinichiNhttp://nskw-style.com/http://colog.jp/
  2. 2. 目次• 1: アンケートと目標設定 • 4:テーマ!• 2:テーマ?? • テンプレートタグ • テーマを理解するために必要な知識一覧 • WordPressのファイル構成全体 • phpと関数 • テンプレート階層(テーマのファイル構 • データベース 成) • WordPressについて • インクルードタグ • テンプレートタグ • 条件分岐タグ • テンプレート階層 • インクルードタグ • 4:発展編 • 条件分岐タグ • functions.php • functions.phpとプラグイン • プラグイン• 3:事前知識 • 5:勉強方法 • htmlとphp • 書籍 • クライアントとサーバ • ブログ(基本とすごいの) • データベースとphp • WordPressについて • 6:参加について
  3. 3. アンケート• 職業• html/css• WordPress経験• php• js• その他のプログラミング言語
  4. 4. 目標• 今日の目標をここに書く。• どこまで進むかとか。
  5. 5. 僕の目標• 分かりやすく、速く• 全体→個別• 仕組みも理解してもらう!• 後から読んでわかればOK。• 勉強しながら「あーそういうことだったか」でOK。
  6. 6. 現在地の確認 • テーマが作れる ←今日ココまでいきた い• 応用 • functions.phpが分かる • 独自関数が作れる • プラグインフックが分かる • プラグインが作れる • サービスを作る! 
  7. 7. 前提となる知識• php• データベース• WordPressの作り
  8. 8. php• PHP Hypertext Preproccessor = PHP html 前処理プログラム• htmlを作るためのプログラム
  9. 9. phpの例<html><head></head><body> <h1>今日は何日?</h1> <p>今日は、<?php echo date( Y年m月d日 ); ?>です。</p></body></html>
  10. 10. やってみる
  11. 11. 関数いっぱいマニュアル:http://jp.php.net/manual/ja/
  12. 12. WordPressでは?
  13. 13. 独自の関数がいっぱい
  14. 14. テンプレートタグの形 <?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 ); ?>
  15. 15. <?php ?> <?php ?>これで囲みます。
  16. 16. <?php the_title(); ?> <?php the_title(); ?> 基本の形   名前 + () + ;
  17. 17. <?php the_title(); ?>
  18. 18. <?php bloginfo( xxx ); ?> <?php bloginfo( url ); ?> <?php bloginfo( name ); ?> () の中に何かを入れる
  19. 19. <?php bloginfo( url ); ?><?php bloginfo( name ); ?> name url
  20. 20. <?php wp_title(xxx, xxx, xxx); ?> <?php wp_title( ¦ , true, right ); ?> () の中にいくつも入れる
  21. 21. <?php wp_title( ¦ , true, right ); ?>
  22. 22. <?php wp_list_categories( a=x&b=y&c=z ); ?><?php wp_list_categories( orderby=id&show_count=1&exclude=10 ); ?> こんなのもある
  23. 23. wp_list_categories( orderby=id&show_count=1&exclude=10 );
  24. 24. データベース• すごいエクセル
  25. 25. データベース
  26. 26. データベース便利ポイント=検索できる・「部長が男子」な部活の部屋番号・「優しい女の子が所属してる」条件で部活を選ぶ・「水泳部に所属してる全員の名前」が知りたい
  27. 27. データを足したり消したりできる phpで。• フォームに入れてもらう• データベースに保存する
  28. 28. WordPressでは?
  29. 29. 管理画面 = でかいフォーム
  30. 30. データの流れ• 人が、管理画面に入力する• WordPress(php)が、データベースに保存する• 人が、おもて画面(url)にアクセスする• WordPress(php)が、データベースを検索し て、htmlを作って見せる
  31. 31. サーバ
  32. 32. こんな形 データセンター自宅サーバー
  33. 33. クライアント
  34. 34. クライアントとサーバ 2 サーバ 1 3クライアント 4 http://example.com と、ブラウザで入力する。
  35. 35. クライアントサイドプログラムJavaScript • ブラウザで実行される • こう書くと、こう動くというルールをブラ ウザが知っている • ちなみにhtml/cssのルールも知ってい る。ブラウザを作っている人たちの会議と かもあるし • 通信は発生しない • その場で動く • Ajaxという通信するのもある
  36. 36. サーバサイドプログラムphpとか • サーバで実行される • クリックとかアイコンとかないので、見え ません 見えません • phpだけじゃなく、Java, Ruby, Perl, Pythonなど、たくさんあります • WordPressはサーバサイド • クライアントからのリクエスト内容に応じ て、色々計算して、結果を返してあげます。 • WordPressの場合、URLやフォームの内 容を受け取って、色々やったあと、結果を htmlにして、返しています。
  37. 37. データベースMySQL • サーバで実行される • ほんとは見えないんだけど、phpMyAdmin などを使うと、無理やり見えます。 • リレーショナルデータベースの一種で、 PostgreSQLや、Oracleとかもあります。 • リレーショナル∼ではないものに、アマゾン のSimpleDB、GoogleのBigTableなどがあ るらしいです。 • WordPressではMySQLです。 • SQL文という命令文を使いますが、テーマを 作る、簡単なプラグインを作る場面では気に しなくて大丈夫です。
  38. 38. クライアントとサーバ 2 サーバ 1 3クライアント 4 http://example.com と、ブラウザで入力する。
  39. 39. WordPressのファイル
  40. 40. 全体
  41. 41. 上の階層も 知っておく• wp-admin • 管理画面系のファイル群• wp-content • テーマ、プラグイン、言語ファイルとか。 • ここしか触らない。• wp-includes • 管理画面系のファイル群 • いろんな関数やクラスが保存されている。 • 他のファイルから呼び出されまくる。 • テンプレートタグは、この中で定義され ている!
  42. 42. 上の階層も 知っておく• wp-admin • 管理画面系のファイル群• wp-content • テーマ、プラグイン、言語ファイルとか。 • ここしか触らない。• wp-includes • 管理画面系のファイル群 • いろんな関数やクラスが保存されている。 • 他のファイルから呼び出されまくる。 • テンプレートタグは、この中で定義され ている!
  43. 43. テーマ
  44. 44. WordPressでの「テーマ」の役割• データベースに保存されてるデータを、• テンプレートタグを使って表示したり、• URLなどによって条件を判断して表示したり、• あとデザインしたりすること (ここは、普通のコーディングと同じ)
  45. 45. ページによって、表示する内容を変える方法 • 条件分岐タグ • テンプレート階層 • WordPressループ
  46. 46. 条件分岐タグ
  47. 47. テンプレート階層 テキスト• http://wpdocs.sourceforge.jp/テンプレート階層
  48. 48. テンプレート階層• トップページは、home.php• 個別ページは、single.php• アーカイブページは、archive.php• カテゴリーページは、category.php• 固定ページは、page.php• と、とりあえず覚えておいて、 必要なときに、さっきのページを見ながら フムフム、とファイルを作るのが吉。
  49. 49. インクルードタグ
  50. 50. ループ
  51. 51. TwentyEleven を読む
  52. 52. TwentyEleven• デモ的に読みました。• YouTube動画参照です。
  53. 53. 他の例
  54. 54. 例:wp_tag_cloud();
  55. 55. 例:wp_login_form();<?php wp_login_form(); ?> と書くと、、 ↓
  56. 56. 勉強できるようになる
  57. 57. 現在地の確認• ネットサーフィンできる!• html/cssのコーディングができる!• 本体、テーマ、プラグインがインストールできる!• テンプレートタグが使える/分かる ←今日はココ• 勉強できる ←明日からココ• テーマが作れる ←がんばればココも明日から。作りながら勉強すると吉!• オリジナルのテンプレートタグが作れる• プラグインが作れる• サービスを作る!• どんどん作る!• WordPressのもっとすごいのを作る!?
  58. 58. ネットで勉強• Codex • テンプレートタグ • http://wpdocs.sourceforge.jp/テンプレートタグ • テンプレート階層 • http://wpdocs.sourceforge.jp/テンプレート階層• ブログ • かちびと.net http://kachibito.net/ • WebDesignRecipe http://webdesignrecipes.com/
  59. 59. 本で勉強• WordPress関連 • WordPress関数リファレンスガイド • Amazon WordPress で検索 こればっかりは、色々試さないとです。。• PHP関連 • よくわかるPHPの教科書 • PHP逆引きレシピ
  60. 60. WordPressコミュニティで勉強• Forum • http://ja.forums.wordpress.org/ • まず検索しよう!ナレッジベースという考え方 • 自分が困っていることは、多分誰かが以前に困ってる。 • 自分が困っていることは、多分誰かが以後に困る。 • 質問の仕方 • WP_DEBUG を true に変えよう • プラグインを停止しよう。プラグインが原因だった場合は、そのプラグイン の名前とURLを報告しよう • 何をしたくて、何を試し、どういうエラーが出たのか。エラー文はコピペす べし • 解決したら、報告をする。自己解決の場合にも、報告する。
  61. 61. twitterで勉強• ハッシュタグ • #wordpressjp を付けてつぶやいたら、誰かが答えてくれるかもしれない• フォロー • wordpressを使っている人たち、自分の分からないことをやろうとしている人たちをフォローする• 僕が気をつけていること • 感謝の気持ちを表す • 自分をフォローしてくれている人にも結果が分かるようにする • 分からないことを、分かったふりをしない • →「これ以上聞いたらしつこいかな」と考えてしまう気持ちが出てきてしまいますが、自分も聞 かれた人もそのやりとりを見ている人も誰も得しません。 • 分かったフリをしている時、せっかく教えてくれている人にも、やりとりを見ている人にも、 きっとバレていますよw • WordPressのコミュニティに恩返しをする • ブログに書く、フォーラムで答える、勉強会を開く。なんでもいいので、やってみるといいで す。
  62. 62. リアルで勉強• WordBench • http://wordbench.org/ • 毎月、日本各地で開かれているWordPressの勉強会がリスト されています• WordCamp • WordPressが好きな人が数百人! • ブロガー、初心者、デザイナー、ものすごく詳しい人、 WordPressを使って大規模サイトを作る人、外国からも、み んなが集まるお祭りです • 11月27日(日)に品川の楽天(2号館!)で開催されます
  63. 63. 次のステップ!
  64. 64. 次の次のステップ!
  65. 65. 次の次のステップ=オリジナルのタグが作れる• 必要なこと • phpの知識 • phpで関数を作るということ • テンプレートタグはphpの関数です
  66. 66. おしまい Shinichi Nishikawa @shinichiN http://nskw-style.com/

×