サポート » 使い方全般 » カスタムフィールドを使ってイベントを表示

  • 解決済 ktakahashi

    (@ktakahashi)


    現在、カスタムフィールドを使ってイベントを管理するようにサイトを構成しています。
    そこで、ご質問なんですが

    TOPページに当日、明日、明後日のようにタブを作って各タブ内にアクセスした日に対して沿ったイベントのアイキャッチを表示させたいと考えております。

    その場合の方法をご教授いただけないでしょうか。

    イベントのカスタムフィールドには開催日・最終日が記載できるようにフィールドは作成しています。

    宜しくお願い致します。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • こんにちは。
    思いつきのアイデアですが、まず開催日〜最終日が当日、明日、明後日に該当するイベントをすべて取得します。
    その際、当日:today、明日:tomorrow、明後日:dayaftertomorrow、のようなクラスを付与します。
    イベント期間が3日全部に含まれるならクラスが3つ全部つくことになります。
    タブについては、タブ切り替えというよりも、該当クラスによるフィルタリングのようなイメージで表示を切り替えでどうでしょう。

    各タブに重複して表示されるイベントもあると思いますので、各タブ用にクエリをするより良いかなと。

    トピック投稿者 ktakahashi

    (@ktakahashi)

    @ikaring

    アイディアありがとうございます。

    申し訳ありません。
    もし可能であれば、そのように書く場合のソースを例として教えていただくことは可能でしょうか。

    イベント取得はコーデックスのWP_Queryのカスタムフィールドパラメータのところに、イベント投稿の取得のサンプルがありますので、開催日と終了日両方の条件を満たすものを指定すればよいかと思います。

    http://wpdocs.osdn.jp/関数リファレンス/WP_Query#.E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.95.E3.82.A3.E3.83.BC.E3.83.AB.E3.83.89.E3.81.AE.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF

    クラス付与はループ内で現在日などと開催期間の比較でできないかと思います。

    タブの動作はjsで、例えば

    $('.tab-today').on( 'click', function(){
    /*
      サンプルとしてtodayタブの動作のみ書きますが、各タブの動作は調整いただければと思います
      書きようによっては全部のタブの動作をまとめて記述することもできるかと
    */
      
      // 一旦全部のイベントを非表示に
      $('.event-list > div').hide();
      // todayクラスのついたイベントのみ表示
      $('.today').show();
    });

    @ktakahashi さま

    通りがかりで申し訳ございません。
    本課題は解決されていますでしょうか。

    もし自分が作成するなら

    1.phpの時間関数で現在のサーバー時刻を取得
    2.WPQueryでカスタムフィールドの日時をソートをかけた一覧を出します。

    WPQuery

    3.
    各イベントの投稿されるリストなどのタグに
    もしイベントの日時が現在の日付が同じだったら>「today」などをclassなどに付与します。

    4.
    ここまでで、JSのソート条件はそろっていますので「mixitup」というJQueryがありますので、JS側でソートすればできそうな気がします。

    MIXITUP
    https://www.kunkalabs.com/mixitup/

    もし、アクセスしたかどうか判別するにはPHP側でcookieを取得して比較するか
    JSでCookieなどが必要かもしれません。

    PHP date関数(qiita.com)
    https://qiita.com/shuntaro_tamura/items/b7908e6db527e1543837

    この手法ですと、php処理でソートとclassを制御しますので
    ページのリロード(再読み込み)が必要になります。

    簡単なコメントで申し訳ございません。

    トピック投稿者 ktakahashi

    (@ktakahashi)

    @ikaring

    ありがとうございました。
    無事、解決することが出来ました。

    トピック投稿者 ktakahashi

    (@ktakahashi)

    @mura0403

    ありがとうございました。
    無事、解決することが出来ました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「カスタムフィールドを使ってイベントを表示」には新たに返信することはできません。