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

4時間まったりWordPressテーマ作成講座
4時間まったり！ WordPressテーマ作成講座 html/cssが分かる人、コーダーさんやウェブデザイナーの方が、自分でWordPressの勉強ができるようになるところまで。 Shinichi Nishikawa @shinichiN http://nskw-style.com/ http://colog.jp/
目次 • １：アンケートと目標設定 • ４：テーマ！ • ２：テーマ？？ • テンプレートタグ • テーマを理解するために必要な知識一覧 • WordPressのファイル構成全体 • phpと関数 • テンプレート階層（テーマのファイル構 • データベース成） • WordPressについて • インクルードタグ • テンプレートタグ • 条件分岐タグ • テンプレート階層 • インクルードタグ • ４：発展編 • 条件分岐タグ • functions.php • functions.phpとプラグイン • プラグイン • ３：事前知識 • ５：勉強方法 • htmlとphp • 書籍 • クライアントとサーバ • ブログ（基本とすごいの） • データベースとphp • WordPressについて • ６：参加について
アンケート • 職業 • 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を使っている人たち、自分の分からないことをやろうとしている人たちをフォローする • 僕が気をつけていること • 感謝の気持ちを表す • 自分をフォローしてくれている人にも結果が分かるようにする • 分からないことを、分かったふりをしない • →「これ以上聞いたらしつこいかな」と考えてしまう気持ちが出てきてしまいますが、自分も聞かれた人もそのやりとりを見ている人も誰も得しません。 • 分かったフリをしている時、せっかく教えてくれている人にも、やりとりを見ている人にも、きっとバレていますよｗ • WordPressのコミュニティに恩返しをする • ブログに書く、フォーラムで答える、勉強会を開く。なんでもいいので、やってみるといいです。
リアルで勉強 • WordBench • http://wordbench.org/ • 毎月、日本各地で開かれているWordPressの勉強会がリストされています • WordCamp • WordPressが好きな人が数百人！ • ブロガー、初心者、デザイナー、ものすごく詳しい人、 WordPressを使って大規模サイトを作る人、外国からも、みんなが集まるお祭りです • 11月27日(日)に品川の楽天（2号館！）で開催されます
次のステップ！
次の次のステップ！
次の次のステップ＝オリジナルのタグが作れる • 必要なこと • phpの知識 • phpで関数を作るということ • テンプレートタグはphpの関数です
おしまい Shinichi Nishikawa @shinichiN http://nskw-style.com/

Check these out next

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

Recommended

More Related Content

Slideshows for you(20)

Viewers also liked(20)

Similar to 4時間まったりWordPressテーマ作成講座(20)

More from Shinichi Nishikawa(14)

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