Wb osaka 20120623
Upcoming SlideShare
Loading in...5
×
 

Wb osaka 20120623

on

  • 2,483 views

 

Statistics

Views

Total Views
2,483
Views on SlideShare
2,482
Embed Views
1

Actions

Likes
7
Downloads
13
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • その1:\nいまいちよくわからない「カスタム」なんちゃらを、実際の案件をつかって分かりやすく説明。\n今回は「カスタムフィールド」と「カスタムメニュー」のご紹介です。\n難しいPHPを書かなくても簡単な機能を追加できるので、初心者さんこそしっかり覚えて使ったほうがいいのかなと思いました。\n\nその2:\nソースに何が書いてあるのかをいっしょに読み解いていくよ!\n少し凝ったことをしようと思うと、やはりPHPのソースが必要になりますよね。\nずらずら書いてあるのを見ると、ウッ・・・となってしまうのですが\n今日はがんばって一つずつ徹底解剖して読み解いていこうと思います。\nそうすると、ぼんやりとでも意味がわかってきますよ。\n\n
  • \n
  • 実現したいこと1:\nイベント情報を掲載し、これから開催されるもの3件を開催日が近い順に並べる。\n終了したイベントは消さずに「終了した」コーナーに置く。\nできればこれらを自動的にやりたい。\n\n実現したいこと2:\nナビゲーション項目の追加・削除を簡単にしたい\nできればこれらを自動的にやりたい。\n\n=====\n◆イベント情報を掲載し自動で管理したい\n\nサクッと作ったけど…\n投稿日=イベント開催日ではない、もちろん\n\n日付を手動で書く?\n日付が前後するイベントを投稿したら、後から手動で順番を入れ替える?\n終わったイベントは速やかに消さないと誤解を生む、手動で非表示に?\n\n
  • \n
  • ここで注意しないといけないのは、記事の投稿日はイベントの開催日ではない、という事です。\n普通に投稿一覧を表示してしまうと、投稿を作成した日の順番で並んでしまうので具合がわるいのです。\n※ここで管理画面の投稿一覧をみせる\n\nそれを解消するために、投稿日とは別に「イベント開催日」という項目を入力するためのカスタムフィールドを使います。\n
  • 2. カスタムフィールドを作る。\n\nカスタムフィールドとは何かというと、普通の投稿記事はタイトルと本文くらいしか入力しないと思うのですが、それに加えて何らかの項目を入力する欄を作れる機能です。\n記事編集欄の下のあたりにこんなのが表示されているのを見た事がないでしょうか。\n
  • これをこのまま使うと、このように項目を登録して手打ちで日付を入れていく事になるのですが、なんかちょっとめんどくさいです。\nそこで、このあたりの手間を省けるようにプラグインを使いたいと思います。\n
  • 今回は「 Advanced Custom Fields」プラグインを使いました。\nこれを適用すると、こんな感じで入力欄をサイドに持って来て目立つようにしたり、\n日付もカレンダーからのピッカーで選べるので簡単で間違いがありません。\n\n
  • 更に、カスタムフィールドを必要な時だけ表示できたしやすい場所に設置したり、必須項目にできたりするので入力漏れや間違いを減らすことができますね。\n
  • こうしてイベント開催日が入力できるようになったところで、今度はその値を使って記事を並び替える処理をしていきます。\nここはさすがにPHPを書かないといけません。\nこのソースは私が書いた者ではないのですが、全体的にこんな感じになりました。\n
  • ◆大まかにいうと、\n前半=準備エリア どんな条件で投稿に関する情報をDBから取ってくるのか定義している\n後半=表示 上記の条件で取って来た値をブラウザーでどう表示するのか書くエリア\n\n\n
  • \n◆$ってなに?\n→変数の事。計算の結果などの値をここに入れる、という意味。\n変数の名前はページの中でユニークなものでないといけない(CSSでいったらIDみたいなの)\nもし2回定義すると、最初に書いたものが上書きされて動かなくなる。\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • . = プラス、という意味。\n変数にはいる値にどんどん新しい変数の値を足していく。\n\n. が無くなると、プラスではなく、置き換えになる。\n
  • これを書かないと、ブラウザになにも表示されない\n※変数はこれがないと表示されない。テンプレートタグは表示される。\n
  • \n
  • \n
  • \n
  • \n
  • カスタムメニューのよいところは、ページの増減にあわせて管理画面からメニュー項目を簡単にアップデートできるところです。テンプレートを都度、編集しなくていいのはうれしいですね。\nあともうひとつ、現在表示されているページに自動的にクラスをふってくれるので、\nわかりやすいナビゲーションが簡単に作れる事です。\n
  • で、で順ですが:まずはregister_nav_menu というテンプレートタグをfunctions.phpに書きます。今回はメニューを2個つくるので、ヘッダーメニュー用とサイドメニュー用それぞれ設定します。\nheader_menu という最初のは、あとでテンプレートでこのメニューを使うときのためのIDみたいなものです。\nページ上部のメニュー、というのはあとで管理画面でメニューに入れる項目を設定するときに、何のメニューなのか自分でわかるようにいれておきます。\n\n
  • \n
  • \n
  • \n
  • \n
  • \n

Wb osaka 20120623 Wb osaka 20120623 Presentation Transcript

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