XO Event Calendarが結構使いやすい。
作者：石鷹氏のHP
WordPress公式ページ
https://ja.wordpress.org/plugins/xo-event-calendar/
ホームページで予定を表示させたいお店のページとか
イベントのページを作っている人はこれお勧め！
まず、わかりやすい
スマホで見たときに勝手に省略されない
スケジュールの機能がシンプルで迷わない。
納品するサイトで店舗で管理するという場合
自分が管理するなら難しくてもいいけど
完全にパソコンっていったらエクセル、ワードしか使ったことがない！
という場合も多いはず。
そんなときに変に充実した機能があっても混乱するだけなのです。
だからこのXO Event Calendar プラグインはとってもありがたい！
正直、凝った機能なんていらないから
この716個のプラグインで満足できたのは
イベント用の投稿タイプではこの「XO Event Calendar」
投稿記事をそのままカレンダーに表示させるなら「WP FullCalendar」
→WordPressで自分の投稿記事件名をカレンダーに表示させてリンクもさせたい
いじってまたここに書き込みたいと思います。
【カスタマイズ】カレンダーに表示させる件名を改行させて全部表示させたい
こういう感じで、件名が一部だけで全部表示されない場合
イベントサイトだとどんなイベントかわかりにくいですよね。
そこで自動改行させて件名全部を表示させるようにスタイルシートをいじってみました。
情報はプラグイン作者の石鷹様から直接教えて頂きました。
カスタマイズ関連（特にカレンダーの HTML 構成は入り組んでいるので）のドキュメントを作成しないといけないなとは思ってはいたのですが・・・分かり難くくてすみません。
タイトルは、スタイルで改行しない（white-space: nowrap;）ようにしています。改行するには下記を style.css 等に記述してみてください。
.xo-event-calendar table.xo-month .month-event-title {
white-space: normal;
}
→ 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; }
こういう風に変えました。
変わった所は後半の２つの命令文
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
改行の設定を３つの命令文で行い、高さの自動調整を「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;
}
ということでやっぱり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
こんな感じになりました。
