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


                         html/cssが分かる人、
                     コーダーさんやウェブデザイナーの方が、
                        自分でWordPressの勉強が
                       できるようになるところまで。




Shinichi Nishikawa
@shinichiN
http://nskw-style.com/
http://colog.jp/
目次
•   1: アンケートと目標設定
                                   •   4:テーマ!

•   2:テーマ??
                                       •   テンプレートタグ

    •   テーマを理解するために必要な知識一覧
                                       •   WordPressのファイル構成全体

        •   phpと関数
                                       •   テンプレート階層(テーマのファイル構

        •   データベース                         成)

        •   WordPressについて              •   インクルードタグ

        •   テンプレートタグ                   •   条件分岐タグ

        •   テンプレート階層

        •   インクルードタグ               •   4:発展編

        •   条件分岐タグ                     •   functions.php

        •   functions.phpとプラグイン        •   プラグイン



•   3:事前知識                         •   5:勉強方法

    •   htmlとphp                       •   書籍

    •   クライアントとサーバ                     •   ブログ(基本とすごいの)

    •   データベースとphp

    •   WordPressについて              •   6:参加について
アンケート

• 職業
• html/css
• WordPress経験
• php
• js
• その他のプログラミング言語
目標




• 今日の目標をここに書く。
• どこまで進むかとか。
僕の目標

• 分かりやすく、速く
• 全体→個別
• 仕組みも理解してもらう!
• 後から読んでわかればOK。
• 勉強しながら「あーそういうことだったか」でOK。
現在地の確認
 • テーマが作れる ←今日ココまでいきた
  い

• 応用
 • functions.phpが分かる
 • 独自関数が作れる
 • プラグインフックが分かる
 • プラグインが作れる
 • サービスを作る! 
前提となる知識




• php
• データベース
• WordPressの作り
php




• PHP Hypertext Preproccessor
 = PHP html 前処理プログラム

• htmlを作るためのプログラム
phpの例


<html>
<head></head>
<body>
     <h1>今日は何日?</h1>
     <p>今日は、<?php echo date( Y年m月d日 ); ?>です。</p>
</body>
</html>
やってみる
関数いっぱい
マニュアル:http://jp.php.net/manual/ja/
WordPressでは?
独自の関数がいっぱい
テンプレートタグの形

                         <?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 ); ?>
<?php ?>




 <?php ?>

これで囲みます。
<?php the_title(); ?>




  <?php the_title(); ?>

 基本の形   名前 + () + ;
<?php the_title(); ?>
<?php bloginfo( xxx ); ?>



   <?php bloginfo( url ); ?>
  <?php bloginfo( name ); ?>

     () の中に何かを入れる
<?php bloginfo( url ); ?>
<?php bloginfo( name ); ?>


   name



    url
<?php wp_title(xxx, xxx, xxx); ?>




   <?php wp_title( ¦ , true, right ); ?>

         () の中にいくつも入れる
<?php wp_title( ¦ , true, right ); ?>
<?php wp_list_categories( a=x&b=y&c=z ); ?>




<?php wp_list_categories( orderby=id&show_count=1&exclude=10 ); ?>


                       こんなのもある
wp_list_categories( orderby=id&show_count=1&exclude=10 );
データベース




• すごいエクセル
データベース
データベース




便利ポイント=検索できる
・「部長が男子」な部活の部屋番号
・「優しい女の子が所属してる」条件で部活を選ぶ
・「水泳部に所属してる全員の名前」が知りたい
データを足したり消したりできる
       phpで。



• フォームに入れてもらう
• データベースに保存する
WordPressでは?
管理画面 = でかいフォーム
データの流れ


• 人が、管理画面に入力する
• WordPress(php)が、データベースに保存する
• 人が、おもて画面(url)にアクセスする
• WordPress(php)が、データベースを検索し
 て、htmlを作って見せる
サーバ
こんな形




 データセンター




自宅サーバー
クライアント
クライアントとサーバ


                     2

                              サーバ
         1                3

クライアント
              4


     http://example.com
     と、ブラウザで入力する。
クライアントサイドプログラム

JavaScript
             •   ブラウザで実行される

                 •   こう書くと、こう動くというルールをブラ
                     ウザが知っている

                 •   ちなみにhtml/cssのルールも知ってい
                     る。ブラウザを作っている人たちの会議と
                     かもあるし

                 •   通信は発生しない

                     •   その場で動く

                     •   Ajaxという通信するのもある
サーバサイドプログラム

phpとか
            •   サーバで実行される

                •   クリックとかアイコンとかないので、見え
                    ません

    見えません       •   phpだけじゃなく、Java, Ruby, Perl,
                    Pythonなど、たくさんあります

                •   WordPressはサーバサイド

                •   クライアントからのリクエスト内容に応じ
                    て、色々計算して、結果を返してあげます。

                •   WordPressの場合、URLやフォームの内
                    容を受け取って、色々やったあと、結果を
                    htmlにして、返しています。
データベース

MySQL
          •   サーバで実行される

              •   ほんとは見えないんだけど、phpMyAdmin
                  などを使うと、無理やり見えます。

              •   リレーショナルデータベースの一種で、
                  PostgreSQLや、Oracleとかもあります。

              •   リレーショナル∼ではないものに、アマゾン
                  のSimpleDB、GoogleのBigTableなどがあ
                  るらしいです。

              •   WordPressではMySQLです。

              •   SQL文という命令文を使いますが、テーマを
                  作る、簡単なプラグインを作る場面では気に
                  しなくて大丈夫です。
クライアントとサーバ


                     2

                              サーバ
         1                3

クライアント
              4


     http://example.com
     と、ブラウザで入力する。
WordPressのファイル
全体
上の階層も
        知っておく
•   wp-admin

    •   管理画面系のファイル群

•   wp-content

    •   テーマ、プラグイン、言語ファイルとか。

    •   ここしか触らない。

•   wp-includes

    •   管理画面系のファイル群

    •   いろんな関数やクラスが保存されている。

    •   他のファイルから呼び出されまくる。

    •   テンプレートタグは、この中で定義され
        ている!
上の階層も
        知っておく
•   wp-admin

    •   管理画面系のファイル群

•   wp-content

    •   テーマ、プラグイン、言語ファイルとか。

    •   ここしか触らない。

•   wp-includes

    •   管理画面系のファイル群

    •   いろんな関数やクラスが保存されている。

    •   他のファイルから呼び出されまくる。

    •   テンプレートタグは、この中で定義され
        ている!
テーマ
WordPressでの「テーマ」の役割



• データベースに保存されてるデータを、
• テンプレートタグを使って表示したり、
• URLなどによって条件を判断して表示したり、
• あとデザインしたりすること
 (ここは、普通のコーディングと同じ)
ページによって、表示する内容を変える方法




   • 条件分岐タグ
   • テンプレート階層
   • WordPressループ
条件分岐タグ
テンプレート階層




                テキスト




• http://wpdocs.sourceforge.jp/テンプレート階層
テンプレート階層

• トップページは、home.php
• 個別ページは、single.php
• アーカイブページは、archive.php
• カテゴリーページは、category.php
• 固定ページは、page.php

• と、とりあえず覚えておいて、
 必要なときに、さっきのページを見ながら
 フムフム、とファイルを作るのが吉。
インクルードタグ
ループ
TwentyEleven を読む
TwentyEleven




• デモ的に読みました。
• YouTube動画参照です。
他の例
例:wp_tag_cloud();
例:wp_login_form();

<?php wp_login_form(); ?>
       と書くと、、
           ↓
勉強できるようになる
現在地の確認
•   ネットサーフィンできる!

•   html/cssのコーディングができる!

•   本体、テーマ、プラグインがインストールできる!

•   テンプレートタグが使える/分かる ←今日はココ

•   勉強できる ←明日からココ

•   テーマが作れる ←がんばればココも明日から。作りながら勉強すると吉!

•   オリジナルのテンプレートタグが作れる

•   プラグインが作れる

•   サービスを作る!

•   どんどん作る!

•   WordPressのもっとすごいのを作る!?
ネットで勉強
•   Codex

    •   テンプレートタグ

        •   http://wpdocs.sourceforge.jp/テンプレートタグ

    •   テンプレート階層

        •   http://wpdocs.sourceforge.jp/テンプレート階層



•   ブログ

    •   かちびと.net
        http://kachibito.net/

    •   WebDesignRecipe
        http://webdesignrecipes.com/
本で勉強

• WordPress関連
 • WordPress関数リファレンスガイド
 • Amazon WordPress で検索
  こればっかりは、色々試さないとです。。

• PHP関連
 • よくわかるPHPの教科書
 • PHP逆引きレシピ
WordPressコミュニティで勉強
•   Forum

    •   http://ja.forums.wordpress.org/

    •   まず検索しよう!ナレッジベースという考え方

        •   自分が困っていることは、多分誰かが以前に困ってる。

        •   自分が困っていることは、多分誰かが以後に困る。

    •   質問の仕方

        •   WP_DEBUG を true に変えよう

        •   プラグインを停止しよう。プラグインが原因だった場合は、そのプラグイン
            の名前とURLを報告しよう

        •   何をしたくて、何を試し、どういうエラーが出たのか。エラー文はコピペす
            べし

        •   解決したら、報告をする。自己解決の場合にも、報告する。
twitterで勉強
•   ハッシュタグ

    •   #wordpressjp を付けてつぶやいたら、誰かが答えてくれるかもしれない

•   フォロー

    •   wordpressを使っている人たち、自分の分からないことをやろうとしている人たちをフォローする

•   僕が気をつけていること

    •   感謝の気持ちを表す

    •   自分をフォローしてくれている人にも結果が分かるようにする

    •   分からないことを、分かったふりをしない

        •   →「これ以上聞いたらしつこいかな」と考えてしまう気持ちが出てきてしまいますが、自分も聞
            かれた人もそのやりとりを見ている人も誰も得しません。

        •   分かったフリをしている時、せっかく教えてくれている人にも、やりとりを見ている人にも、
            きっとバレていますよw

    •   WordPressのコミュニティに恩返しをする

        •   ブログに書く、フォーラムで答える、勉強会を開く。なんでもいいので、やってみるといいで
            す。
リアルで勉強
•   WordBench

    •   http://wordbench.org/

    •   毎月、日本各地で開かれているWordPressの勉強会がリスト
        されています

•   WordCamp

    •   WordPressが好きな人が数百人!

    •   ブロガー、初心者、デザイナー、ものすごく詳しい人、
        WordPressを使って大規模サイトを作る人、外国からも、み
        んなが集まるお祭りです

    •   11月27日(日)に品川の楽天(2号館!)で開催されます
次のステップ!
次の次のステップ!
次の次のステップ
=オリジナルのタグが作れる

• 必要なこと
 • phpの知識
 • phpで関数を作るということ
 • テンプレートタグはphpの関数です
おしまい


       Shinichi Nishikawa
              @shinichiN
  http://nskw-style.com/

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