自由自在!WordPress上級

カスタムフィールドで日付を扱う

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
カスタムフィールドに日付を入力する場合には、あとでPHPなどを使って日付として処理しやすいようにしておくと便利です。
講師:
12:20

字幕

このレッスンでは カスタムフィールドを使った 日付の表示について学習します それでは 架空のイベントサイトを使いながら カスタムフィールドについて 学習していきたいと思います 今 このサイトは ある会社の社内の催しものを このように開催の日付順に 並べている そういうサイトになっています それぞれのイベントをクリックすると このように詳細情報が出て そして満員になれば 満員ですというふうに表示されます また イベントのデザインも 少し変わっています 申し込みができるイベントであれば このように 申し込むという― ボタンが表示されて 申し込みフォームに移動します それから すでに終わっているイベントに関しては このようにグレーのデザインで このイベントは終了しました というふうに表示されるようにしています このようなステータスの管理は デフォルトの 投稿だけでは なかなか管理が難しいですが カスタムフィールドをうまく使っていけば 管理することができます それから日付ですが 開催日と 実際にその投稿を公開した日というのは 違うので 例えば 今 7月20日になっていますが これを投稿日を7月20日にしてしまうと 7月20日まで この記事が公開されなくなってしまいます ですので 開催日という カスタムフィールドを作って 投稿日とは 別の日付を管理したいと思います 他には 開催時間 そして 開催場所 それから 満員かどうかといった ステータスを管理するためのフラグ これもカスタムフィールドで管理していきます それではですね 実際に 投稿のデータがどうなっているかを 確認してみたいと思います 一つ投稿を開くと タイトルと本文が入っていて そしてカスタムフィールドに 開催時間 開催日 開催場所 そして満員のフラグがあります 満員のカスタムフィールド このようにフラグとして使う場合にはですね 値には何が入っていても構わない― 値があるかないかで 条件分岐を使って判断しますので 例えば 1 とか満員ですとか なんでも構わない 何かあればいいというような形で 管理します そして開催日ですが 日付を カスタムフィールドで扱う場合にはですね 後々 php などで カスタマイズして 表示を自由に扱えるような データ形式で日付を入れておくと便利です 2013-05-15 というふうに 入れておくと 後で php などで操作しやすくなります これが満員の時の投稿ですね じゃ満員じゃない時の 投稿はどのようになってるかというと 単純に満員のフラグがない状態です 作らなければ データのない状態になりますので これで満員かどうかを 判断することが出来ます では 実際にテンプレートを編集して 画面を作っていきたいと思います エディターに移動します 今 テーマフォルダーの中に sample-event という― 新しいテーマを作成しています この中にはすでにですね 必要なスタイルですとか JavaScriptを用意しています また必要な テンプレートファイルも用意しています 一通りですね 作成してある テンプレートをざっと確認してみます まず index.php ですが get_header と get_footer をして 基本的なテンプレートを読み込んでいます そして投稿ですので メッセージループを使って get_template_part('event') という イベント php を読み込むようにしています そしてページのナビゲーションのところですが wp_pagenavi― というプラグインを使って ページングを表示しています 次に header.php ですが こちらもごく普通に HTML の head タグを表示して そして body タグを表示しています 後はサイト名やキャッチフレーズを表示して コンテンツ部分には contents という id を付けています そしてフッターですが footer という id を付けた div タグに コピーライトの表記をしている そしてヘッダーで開いた― contents という id の div を閉じています でですね そしたら一度 テーマを変更して 完成版のテーマから これから作成する方の テーマに切り替えておきます これで 何も表示されなくなりました それでは event.php を 作成していきたいと思います 一つ一つのイベントは list タグで表示していきます もうおなじみという感じになりますが まず一番上の投稿のタグには the_ID を付けて ID を付けておくと それから post_class を使って 必要なクラス CSS クラスを 表示するようにしておきます 開閉を行うためにリンクタグを入れますが 開閉自体は JavaScript で 行いますので リンク先は指定しません それから heightLine JS を使って 高さを 統一しています はじめに日付部分を表示します はい 日付ですね 月そして日そして年が表示される部分 この部分のどのように表示するかですが php の date という関数を使います date という関数は 最初の引数で 日付のフォーマットを指定します n が ゼロで埋めない月 そしてスラッシュを表示して j ゼロで埋めない日を表示しなさい という命令です そして二つ目のパラメータで いつの日にちを表示するかというのを 指定するんですが ここでは当然 開催日を使いますので get_post_meta― カスタムフィールドを取得する テンプレートタグを使います そして取得する投稿は post->ID これで取得することができます ここは get_the_ID の テンプレートを使っても構いません そして開催日という フィールドを取得しますので 開催日と入力して 最後に true を入れます それ全体を echo date だけでは画面に表示されませんので echo で囲む 非常にたくさん入れ子になりますけれども このようになります 開催日を取得して その開催日を 今度は strtotime― これも php の関数ですが に渡しています この strtotime というのが さきほど 開催日をカスタムフィールドに 2013-05-13 というふうに入れましたが あの形式で渡してあげることによって それを date 関数で扱える値に変換してくれる そういう関数だというふうに思ってください つまり こういうふうに書くことによって 開催日が このフォーマットの日付で 表示されるということです そして 次に year 年を表示します これも全く同じ書き方ですね 今度は大文字の Yで 4桁の年を表示します そして strtotime をやはり使って このように書きます これで日付の表示ができました 次にタイトルや 開催時間 開催場所などを表示していきます ここはもう簡単ですね タイトルは the_title そして開催時間は カスタムフィールドですので get_post_meta を使って取得します 同じく post->ID そして開催時間 true ですね get_post_meta も get と書いてありますので これも取得を行うだけの関数なので 必ず echo を使って 画面に表示するようにします はい 後はタグをひたすら閉じて行って それから 本文部分ですね body というクラスを使って 本文を表示するクラスは the_content ですから the_content と表示して タグを閉じます これで完成です それでは保存をして 画面を表示しています はい リストが表示されました ちゃんと指定したフォーマットで 日付も表示されています 今はまだ開催日順で 並び替えるようにしていませんので 投稿日順に並んでいます ですので開催日が めちゃくちゃな順番になっています このレッスンでは カスタムフィールドで 日付を扱う方法について学習しました

自由自在!WordPress上級

このコースではWordPressを利用したさまざまな種類のサイトを構築しながら、より実践的なテクニックを解説します。コースの前半はカスタムフィールド機能などについて説明しながら、後半では自由度の高いサイト構築が可能になるマルチサイトについても学習します。

3時間17分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 2,990
発売日:2014年03月05日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。