Events Manager（イベント一覧①）

Events Managerのは、プレースフォルダが用意されています。
ログイン後の左側、イベントの中にヘルプがありますが、その中に書いてあります。英語ですが。。。

今回、私が作成したのは、
トップページのイベント一覧と他のページにイベント一覧を載せるというもの。

必要なのは。
#_EVENTIMAGE　　：　イベントのイメージ
#_EVENTURL　　　：　イベント詳細へのURL
#_{Y年n月j日(D)}#@_{-n月j日(D)} 　：　イベントの開催日
#_EVENTTIMES　　：　イベントの時間
#_LOCATIONLINK　：　開催地のリンク
#_EVENTPRICERANGEALL　：　イベント料金

です。

これを、HTMLの中に入れていけば、OK！
で！作ったのがコレ（トップページ）
トップイベントリスト

ショートコード[events_list]で表示させる為、イベント→　書式設定　→　イベント一覧のここに↓
イベントリスト設定画面①

以下の内容を記述

<div class="box">
			<a href="#_EVENTURL">
        <figure class="event-thumb">
            {has_image}#_EVENTIMAGE{/has_image}
            {no_image}画像はありません{/no_image}
        </figure>
    </a>
 <h1 class="event-list-title">
            <a href="#_EVENTURL">
            {is_future}近日開催{/is_future}
            {is_current}開催中{/is_current}
{fully_booked}content{/fully_booked}
            {is_past}終了{/is_past}
            </a>
        </h1>
<div class="event-meta-box">
            <dl>
                <dt>日時</dt>
                <dd>#_{Y年n月j日(D)}#@_{-n月j日(D)} #_EVENTTIMES</dd>
            </dl>
            <dl>
                <dd>場所 :  #_LOCATIONLINK</dd>
            </dl>
            <dl>
                <dt>料金 :  {is_free}無料{/is_free}{not_free}#_EVENTPRICERANGEALL{/not_free}</dt>
                <dd> <div class="event-btn">
            <a href="#_EVENTURL">詳しく見る</a> </div>
       </dd>
            </dl>
        </div>
        <div class="box_ribbon"></div></div>

cssはこちら

.box{
	margin: 0px 0px 3px 17px;
	width:90%;
	min-height: 100px;
        float:left;
	padding: 3%;
	position:relative;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3), to(#fff), color-stop(.1,#f3f3f3));
	border-top: 1px solid white;
	border-right: 1px solid #ccc;
	-webkit-border-bottom-right-radius: 60px 60px;
	-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
	
}
.box:before{
	content:'';	
	width: 25px;
	height: 20px;
	background: white;
	position: absolute;
	bottom:0; right:0;
	background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff), to( #eee), color-stop(.1,#fff));
	-webkit-border-bottom-right-radius: 30px;
	border-bottom-right-radius: 30px;
	-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
						transform: rotate(-20deg)
						skew(-40deg,-3deg)
						translate(-13px,-13px);
}

.box:after{
	content: '';
	z-index: -1;
	width: 100px;
	height: 100px;
	position:absolute;
	bottom:0;
	right:0;
	background: rgba(0, 0, 0, 0.2);
	display: inline-block;
	-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(0deg)
						translate(-45px,-20px)
					   	skew(20deg);
}


.box_ribbon{
	position:absolute;
	top:-25px; left: 35%;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
z-index:1000;
}
.event-thumb img{
width:258px;
max-height: 150px;
  overflow: hidden;
  text-align: center;
float:left;
}

cssを変更する事でお好きなデザインに出来ますね💛

通常の固定ページや投稿に上記のテンプレートを使わずに表示したい場合は
[events_list]ここにHTMLを書く[/events_list]
で、書くことが出来ます。

Posted by hanaweb