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]
で、書くことが出来ます。

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント一覧

  1. WP勉強中 より:

    はじめまして、
    Events Managerの使い方を調べていたのでとても参考になりました。ありがとうございます。

    1つ質問があるのですが、CSSはどこに記述すればよいのでしょうか?

    • hanaweb より:

      ご返信が遅くなり申し訳ありません!!
      まさか、メッセージが来るとは思っていなくて。。。

      cssは任意のファイルを作って記述すれば良いと思います。
      私は、テンプレートのcssに記述しています。

      参考になれば良いのですが。。。
      不明な点等があれば、hana@hanawebnet.comに直接ご連絡頂ければ回答が早いです!

      遅くなってごめんなさい。

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。

CAPTCHA