XO Event CalendarはWordPressにシンプルで使いやすいカレンダープラグイン

[xo_event_calendar]

XO Event Calendarが結構使いやすい。

作者:石鷹氏のHP

https://xakuro.com/

WordPress公式ページ

https://ja.wordpress.org/plugins/xo-event-calendar/

 

ホームページで予定を表示させたいお店のページとか

イベントのページを作っている人はこれお勧め!

 

まず、わかりやすい

スマホで見たときに勝手に省略されない

スケジュールの機能がシンプルで迷わない。

 

納品するサイトで店舗で管理するという場合

自分が管理するなら難しくてもいいけど

 

完全にパソコンっていったらエクセル、ワードしか使ったことがない!

という場合も多いはず。

 

そんなときに変に充実した機能があっても混乱するだけなのです。

だからこのXO Event Calendar プラグインはとってもありがたい!

 

正直、凝った機能なんていらないから

XO Event Calendar

この716個のプラグインで満足できたのは

イベント用の投稿タイプではこの「XO Event Calendar」

投稿記事をそのままカレンダーに表示させるなら「WP FullCalendar」

WordPressで自分の投稿記事件名をカレンダーに表示させてリンクもさせたい

 

いじってまたここに書き込みたいと思います。

 

【カスタマイズ】カレンダーに表示させる件名を改行させて全部表示させたい

XO Event Calendar

こういう感じで、件名が一部だけで全部表示されない場合

イベントサイトだとどんなイベントかわかりにくいですよね。

そこで自動改行させて件名全部を表示させるようにスタイルシートをいじってみました。

情報はプラグイン作者の石鷹様から直接教えて頂きました。

カスタマイズ関連(特にカレンダーの HTML 構成は入り組んでいるので)のドキュメントを作成しないといけないなとは思ってはいたのですが・・・分かり難くくてすみません。
タイトルは、スタイルで改行しない(white-space: nowrap;)ようにしています。改行するには下記を style.css 等に記述してみてください。
.xo-event-calendar table.xo-month .month-event-title {
white-space: normal;
}

引用元:https://xakuro.com/blog/wordpress/438#comment-26

→ XO Event Calendar のイベントの編集に独自の権限を設定

 

実際にいじったのは

xo-event-calendar.css の43行目

.xo-event-calendar table.xo-month .month-event-title { padding: 0 3px; display: block; color: #666; text-align: left; font-size: 0.8em; background-color: #ccc; border-radius: 3px; white-space: nowrap; overflow: hidden; }

 

この表記を

.xo-event-calendar table.xo-month .month-event-title { padding: 0 3px; display: block; color: #666; text-align: left; font-size: 0.8em; background-color: #ccc; border-radius: 3px; white-space: normal; word-break: break-all; word-wrap: break-word; height: auto; }

こういう風に変えました。

変わった所は後半の2つの命令文

white-space: nowrap;
overflow: hidden;

の部分です。

white-space: nowrap;

参照解説先→ http://www.htmq.com/style/white-space.shtml

overflow: hidden;

参照解説先→ http://www.htmq.com/style/overflow.shtml

 

この部分を

white-space: normal;
word-break: break-all;
word-wrap: break-word;
height: auto;

に変えました。

word-breakについての参照先→ http://www.htmq.com/style/word-break.shtml

word-wrapについての参照先→ http://www.htmq.com/style/word-wrap.shtml

改行の設定を3つの命令文で行い、高さの自動調整を「height: auto;」で行っています。

【カスタマイズ】カレンダーに表示される件名の文字色を変えたい

そうです、作成するWEBサイトによっては文字の色を変えないとイメージが合わない

という事も出てくるはずです。

実際に作成しているサイトはちょっとダークなイメージだったので

文字を変えたかったというのもあります。

そこで文字を変える方法を石鷹氏に教えて頂きました。

カレンダーの件名の文字色と背景色だけは style 属性で記述しているため、テーマの style.css より優先されてしまいます。
よって style.css で上書きする場合は、!important を指定して最優先させる必要があります。
.xo-event-calendar table.xo-month .month-event-title {
white-space: normal;
color: #0000ff !important;
background-color: #cccccc !important;
}

引用元:https://xakuro.com/blog/wordpress/438#comment-26

 

ということでやっぱり43行目の部分に追加!

.xo-event-calendar table.xo-month .month-event-title { padding: 0 3px; display: block; color: #fff; text-align: left; font-size: 0.8em; background-color: #ccc; color: #0000ff !important; background-color: #cccccc !important; border-radius: 3px; white-space: normal; word-break: break-all; word-wrap: break-word; height: auto; }

背景はそのままカレンダーの色を使いたかったので

background-color: transparent !important;

とさせていただきました。

background-colorについての参照先→ http://www.htmq.com/style/background-color.shtml

XO Event Calendar

こんな感じになりました。

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

関連記事

コメント

    • tonai
    • 2016年 11月 30日

    投稿記事のカレンダーで表示はWP FullCalendar大変参考になりました。イベント用の投稿タイプでは「XO Event Calendar」のプラグインですか。ありがとうございます。また訪問します。

      • una
      • 2016年 12月 06日

      tonaiさん、こんにちわ。
      使い分けるとしたらこの2つでだいたい足りてしまいますね!

  1. この記事へのトラックバックはありません。

CAPTCHA


ニュースレターを購読します

起死回生の道標!メルマガ。


ためになるノウハウよりも
今すぐ使えるノウハウを中心にお伝えしています。

裏カリキュラムも読者限定でご案内しています。
裏カリキュラムでは裏王道のノウハウを伝授します!

現在665人の受講生がいます。

成約1件あたりの報酬1万円越え、アフィリエイトASPのインフォカート

ページ上部へ戻る