自由自在!WordPress上級

カスタムフィールドでデザインを変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
カスタムフィールドの値に応じて、HTMLや適用するCSSを切り替えていく方法を解説します。
講師:
08:51

字幕

このレッスンでは カスタムフィールドを使った デザインの切り替えについて学習します 今イベントの一覧は 全て同じデザインで表示されています これを 既に申し込みが満員になったイベントは 薄いピンクで もうイベントの開催が終了したものについては 薄いグレーで 表示をする様に 変更したいと思います それではエディターに移動します event.php を開きます 少し整理しますと イベントには三つの状態がある事が分かります 一つは申し込みが出来る状態 もう一つは既に満員になって イベントに申し込みが出来ない状態 そして最後が 既に開催が終わって 終了している状態 あるイベントがどの状態にあるのか という事を判断して その状態に応じて CSS のクラス名を付けて デザインを変更して行く という風にしたいと思います あるイベントの状態を判別する訳ですので if 文を使った 条件分岐を使って行けば良さそうです 最初に そのイベントが 既に終了しているのかどうかについて 調べてみたいと思います あるイベントが既に 終了しているのかどうかという事は そのイベントの開催日が 今日から見て過去なのかどうか という事を調べれば良さそうです 開催日を取得する get_post_meta を使って 今日の日付と開催日の日付を 比較する様にします ここをちょっと見てみるですとね 今日の日付は date で取得できます そして開催日は get_post_meta それぞれの 値をこの strtotime と言う php 関数に入れています この strtotime と言う 関数が一体どういうものを 示しているのかというのを ちょっと調べてみたいと思います strtotime をですね echo を使って 画面に出力する様にしてみます 書けたら保存をして 画面で表示をしてみましょう リロードをします ここに表示されました 何だかとても大きい桁の数字が出ています strtotime は 数字を出すんですね この数字は何かと言うと strtotime と言うのは パラメータに与えた日付の 1970 年の 1 月 1 日 午前 0 時から その日付けまで何秒経過したかという秒数を 返してくれる関数です 経過した秒数になりますので 未来の日付程 数字が大きくなります これを見ると 7月 20 日 未来の日付の場合には 今日よりも開催日の方が未来ですので 数字が大きくなっています 逆に過去のイベントは 今日の方が未来になりますので 開催日よりも今日の日付けの方が 数字が大きくなっています この様に strtotime を使う事で 経過した秒数を取得できますので 開催日の秒数よりも 今日の秒数の方が大きいと言う事は 開催日は今日よりも過去 という事になりますので これによって 既にそのイベントが終了している という事が分かります それぞれのイベントの状態を status と言う変数を使って 保存していきたいと思います 終了したイベントは end-event にしておきます 終了したイベントでない場合 次に 満員かどうかを調べたいと思います 満員は カスタムフィールドの値を 取得すれば分かります カスタムフィールド 満員 の中にはですね 満員であれば何かデータが入っていて 満員で無ければ何も無いというフラグの 状態にしていますので if 文の中に get_post_meta と書くだけで 値があるかどうかが分かります 値があれば 満員という事ですので full-event という 値を入れておきます 上の二つのどちらでも無い場合というのは もう強制的に 申込みが出来るイベントとなりますので normal-event と入れておきます これで三つのイベントの状態をそれぞれ status という変数に 保存する事ができました 次にですね この status と言う 変数を CSS のクラス名として このリストタグに付けたいと思います リストタグでは既に post_class と言う テンプレートタグを使って その投稿の特徴を CSS クラスとして表示しています 実際に html を確認してみると それぞれのリストタグにクラスが 出力されているのが分かります post id とかが出ています 或いはカテゴリーとかが出ていますね この post クラスに 今自分が作った ステータスの中に保存されている このテキストを クラスとして追加したい場合には post クラスのパラメータに その クラス名を書きます ここではですね クラス名は status と言う 変数に入っています それぞれの投稿によって どの文字列が入っているのか 分かりませんので 変数名を書いておけば それぞれの文字列が ここに入る様になります 変数と言うのは こういった形でですね 何が入っているか分からないけれど あの値の入っているものを扱いたいという時に 大変便利です これで上手く CSS クラスが表示されて デザインが変更されるはずですので 画面をリロードして 確認してみたいと思います 正しく表示されました それぞれのクラスを確認してみると normal-event と入っています そして満員のイベントには full-event と CSS クラスが入っています それから 過去のイベントには end-event と入って グレーの表示になっています この様にですね カスタムフィールドに 満員かどうかといった フラグを入れておいたりだとか 或いはカスタムフィールドの値と 何か別のものを比較して そのイベントの状態が どういう状態なのかを調べて それによって デザインやレイアウトを変えて行く 表示する内容を変えて行く という事ができます このレッスンでは カスタムフィールドを使って デザインを変えて行く方法について 学習しました

自由自在!WordPress上級

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

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

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

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

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