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.

Wb osaka 20120623

3,124 views

Published on

  • Be the first to comment

Wb osaka 20120623

  1. 1. WP初心者なデザイナーと いっしょに勉強しよう! 自動で管理する「イベント開催情報」と便利機能「カスタムメニュー」 2012.06.23 石田 美穂
  2. 2. 自己紹介石田 美穂フリーランスでWEB制作やっています。女性向けデザインやブログのデザイン&カスタマイズ、小規模サイトの構築など。WP歴1年くらい。PHPはコピペ専門です( ー`дー́)キリッ10Fのオオサカンスペースのメンバー。こんな私でもWordCamp大阪の実行委員やってます! ishidamiho dk45blog
  3. 3. 今回のプレゼンの目的私と同じような、PHPわからないWP初心者デザイナーさんに向けて、同じ目線で、役立つ何かをお話できればなと思っています!
  4. 4. 目次その1.「カスタムフィールド」と「カスタムメニュー」を使って、簡単で更新しやすいサイト制作のご紹介。その2.PHPのソース大解剖!何が書いてあるのかをいっしょに読み解いていくよ!
  5. 5. サンプルサイト
  6. 6. ポイントは2つポイント1:イベント情報の自動管理イベント情報を掲載し、これから開催されるものを開催日が近い順に並べる。終了したイベントは消さずに「終了した」コーナーに置く。ポイント2:簡単に更新できるナビゲーショングローバルナビ、サイドナビは項目が増減される可能性があるのでなるべく簡単に更新できるようにしておきたい。
  7. 7. 1. イベント管理機能の実装
  8. 8. イベント管理の実装ポイントと全体のながれ1. 投稿ページでつくる2. カスタムフィールドを作ってそこに開催日を入力する3. カスタムフィールドの「開催日」に入った値と今日の日付を比較して、未来と過去に振り分けるPHPをテンプレートに書く。
  9. 9. カスタムフィールドを作成イベント開催日を入力するためのカスタムフィールドを作成する。※カスタムフィールドとは?通常入力する「タイトル」と「本文」に加え、何らかの項目を追加で作成し、その値を入力できる欄が作れる。
  10. 10. カスタムフィールドを作成このまま使うにはちょっと面倒? event-date 2012/06/06
  11. 11. プラグインを使って入力を簡単・確実に「Advanced Custom Fields」プラグインを使うと、日付がピッカーから入力できるので簡単で間違いがない。
  12. 12. プラグインを使って入力を簡単・確実に ・カスタムフィールドを表示させる場所を選べる  →今回はサイドバーに置いて、入力忘れを防ぐ。 ・必要な時だけ表示させる事ができる  →「イベント」以外では不要なので非表示に。 ・必須項目の設定ができる  →入力忘れが防げるから嬉しい。
  13. 13. イベントの過去と未来を振り分ける
  14. 14. ソースを大まかに分類して考えてみる 前半=準備エリア どんな条件で投稿に関する情報をDBから取ってくるのか 定義している 後半=出力エリア 上記の条件で取って来た値をブラウザーでどう表示するのか 書くエリア
  15. 15. $って何?→ 変数 の事。計算の結果などの値をここに入れる、という意味。変数の名前はページの中でユニークなものでないといけない(CSSでいったらIDみたいなもの?)もし2回定義すると、最初に書いたものが上書きされて意図通りに動かなくなることも。
  16. 16. $current_dateを翻訳する翻訳すると:$current_date 「current_date」という名前の変数を定義します。= その内容は、date_i18n wordpressの「date_i18n」という関数で取得したローカルの日付です( Y/m/d ) それをxxxx/xx/xx、という形式で表示してください; 定義おわり
  17. 17. 次のエリア
  18. 18. 次のエリア 最初のarray= カスタムフィールドに入れたイベント開催日の値で 記事を並べるように指定している 二番目のarray= カスタムフィールドに入れたイベント開催日と、現 在の日付を比較して未来か過去かを判断している
  19. 19. $args=array ってよく出てくるけど?$args ・・・ 引数array ・・・ 配列その後で出てくるquery_postsという、クエリ=DBに入っている情報を取り出してくる指示の中で、投稿記事に関する情報の中から、何を取り出してくるのかを定義している。query_posts( ★ );→この★のところに書いてもいいけど、たくさんある場合は$args=arrayというふうに一旦外に取り出して書いて、あとで戻すことが多いみたい。
  20. 20. $args=arrayの中を翻訳$args = array( 最新の30件を表示showposts => 30, 並び順は、カスタムフィールドに入ってる値の順でorderby => meta_value, どのカスタムフィールドかというと「final_day」ってmeta_key => final_day, やつorder => ASC, 値の小さい順=日付の近い順で並べる
  21. 21. meta_query => arrayの中を翻訳meta_query => array(array( 「final_day」という名前のカスタムフィールドをkey => final_day,value => $current_date, 「$current_date」で定義した値と比べて、compare => >=, これと同じ、もしくは大きい値のものを持って来てくださいtype => DATE 値のフォーマットは日付です
  22. 22. $output = ;$output 「output」という 変数を定義します= その内容は からっぽですこれから「$output」という関数を使いたいんだけど、すでにこの関数がどっかで定義されているかもしれないので、予期せぬ値が入るのを防ぐために一旦リセットする、というお話。
  23. 23. . って要るの? はつけないとダメなの? $output .= <ul classs="pagelist">; . 文字列と文字列を連結するための記号。これがついて いるうちは、ずっとひと続きですよ、という事 シングルクオーテーションの中に入っている内容はそ のままブラウザに出力される。
  24. 24. . って要るの? はつけないとダメなの? $output .= <ul classs="pagelist">; while ( have_posts() ) : the_post(); $output .= <li class="page_item">[ . get_post_meta( $post->ID, final_day, true ) . ] ; $output .= <a href=" . get_permalink() ."> . get_the_title() . </a></li>; endwhile; $output .= </ul>;<ul classs="pagelist"> <li class="page_item">[XXX]<a href= >あああ</a></li></ul>
  25. 25. echo? えこー?echo $output;ブラウザーに変数の値を出力する
  26. 26. wp_reset_query();query_posts で指定していたDBの検索条件をリセットする。これをしておかないと、今度またDBを検索した際に今回の条件が引き継がれてしまって、意図通りの動きにならない場合がある。
  27. 27. あらためて全体図 現在の日付を取得しておく カスタムフィールドに入れた日付の順番で並べ替え カスタムフィールドに入れた日付と現在の日付を比較して 未来かどうかを判断、未来の分だけ持ってくる $outputの変数をリセットでからっぽにして、 上で決めた条件にしたがって、投稿の情報をいれていく 上で入れた投稿の情報をブラウザーへ表示 投稿の情報の取得条件をリセット
  28. 28. イベント情報が完成!
  29. 29. カスタムメニューを使ったナビゲーション全体のながれ1. function.phpにソースを追加してカスタムメニューが使えるようにする2. テンプレートの、カスタムメニューを表示させたい場所にソースを書く3. 管理画面で、メニューに追加したいページや投稿を選ぶ
  30. 30. カスタムメニューの良い所・メニューに入れたいページを管理画面から簡単にメンテナンスできる・現在表示されているページにクラスをふってくれる 以前は・・・ wp_list_pages(echo=0&depth=1&exclude=3,7,31 ); (´-`).。oO( みたいにして、除外したいページのIDを 決めうちみたくしてメニューを作っていました。
  31. 31. 1. function.phpに下記を追加register_nav_menu( header_menu, ページ上部のメニュー );register_nav_menu( side_menu, ページ横のメニュー );
  32. 32. 2. テンプレート内にソースを追加ヘッダーナビゲーション<?php wp_nav_menu(array(theme_location => header_menu)); ?>サイドナビゲーション<?php wp_nav_menu(array(theme_location => side-menu)); ?>
  33. 33. 3. 管理画面からページ・投稿を選択
  34. 34. 完成!
  35. 35. 最後に・・・Special thanks! PHPのソースを書いてくれたり、ソースの解説をしてくれた WordPressなお兄さんたち!@show_web さん @01v0101 さん 木下さん
  36. 36. おしまいご清聴ありがとうございました

×