XO Event Calendar プラグインのカレンダーの表示が崩れる場合の対処方です。
一部の古いテーマ(Twenty Ten 等)において、カレンダーの表示が崩れる場合があります。これは、テーマのスタイルで、#content table のように ID セレクタによるスタイル定義している場合、プラグインのスタイル定義より優先されることにより起こります。
プラグインのスタイルで ID セレクタや !important 宣言を使用すれば、このようなことは起こらないのですが、テーマ側でカスタマイズが容易にできるようにするためなので、プラグイン側での対処は難しいところです。
崩れた事例
このように崩れた表示の場合、下記のスタイルで防ぐことができます。
スタイル
下記のスタイルを、テーマ(子テーマ)の style.css や追加 CSS 等に追記してください。
#content .xo-event-calendar table {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}
#content table.xo-month {
margin: 0 0 8px 0;
border: 1px solid #ccc;
border-width: 1px 0 1px 1px;
}
#content table.xo-month th,
#content table.xo-month td {
padding: 0;
border: 1px solid #ccc;
}
#content table.xo-month .month-header {
margin: 2px 0 4px;
position: relative;
}
#content table.xo-month > thead th {
border-width: 0 1px 0 0;
padding: 1px 0;
text-align: center;
font-size: 100%;
font-weight: bold;
}
#content table.xo-month > thead th.sunday {
color: #d00;
}
#content table.xo-month > thead th.saturday {
color: #00d;
}
#content table.xo-month .month-week {
padding: 0;
border: 0;
width: 100%;
overflow: hidden;
}
#content table.xo-month .month-dayname {
border-width: 1px 0 0 1px;
}
#content table.xo-month .month-dayname td {
border-width: 1px 1px 0 0;
}
#content table.xo-month .month-event td {
padding: 0 1px 2px 1px;
border-width: 0 1px 0 0;
}
#content p.holiday-title {
margin: 0;
padding: 2px 0;
}
初めまして。yamaと申します。
現在、登録ユーザー(不特定多数)の方にイベントを登録してもらうサイトを作ろうと、色々とカレンダープラグインを検討した結果、このXO Event Calendarが一番目的に合っていると思い、導入しようと思っているところです。
そこで一つ教えていただきたいのですが、プラグインのAdvanced Custom Fields(https://www.advancedcustomfields.com/)を使って入力項目(定員の数など)を増やしたいのですが可能でしょうか。
またAdvanced Custom Fieldsのアドオン「ACF: Google Map Extended」(https://wordpress.org/plugins/advanced-custom-fields-google-map-extended/)を使い、イベント開催場所をGoogle Map上で表示したいのですが可能でしょうか。
お忙しいところ恐縮ですが、ご回答いただければ幸いです。
イベントはカスタム投稿タイプを使用しています。通常のカスタム投稿タイプと同様にカスタム フィールドを追加することができます。
ACF で使用する場合は、投稿タイプで「xo_event」(デフォルトの場合)を選択すればイベントの投稿に追加できます。Google Map Extended アドオンに関しては使用したことがないので、確かなことはいえませんが使用できるはずです。
また、投稿タイプ テンプレートにも対応しているので、single-xo_event.php の名前でテンプレートを作成すれば表示も自由にカスタマイズすることができます。
もし、使用できないようでしたら、なるでく対応していきたいとおもいますので、気軽にコメントしてください。
ご回答ありがとうございます。
早速試したいと思います。
また質問させていただくこともあるかと思いますが、その際は宜しくお願いいたします。
初めまして井上と申します。
XO Event Calendarを使用させていただいております。使い勝手がよく感謝しております。
一つ質問させてください。
サイドバーにイベントカテゴリの一覧を表示したいと思っております。
$the_query = new WP_Term_Query(
array(‘taxonomy’ => ‘xo_event_cat’,
‘orderby’ => ‘name’,
‘order’ => ‘ASC’,
‘hide_empty’ => false,)
);
上記のように、タクソノミーにxo_event_catを渡し取得することは出来るのですが、並び順が親子関係などを無視しソートされてしまいます。
カテゴリーの登録画面のように、親子関係を維持たまま、カテゴリー一覧を表示するにはどのように記述すればよろしいでしょうか。
よろしければ、お時間のある時にご教授いただければ助かります。
こんにちは
カテゴリーを並び替えるプラグイン(Intuitive Custom Post Order 等)を使用すると自由に並び替えることもできていいかなと思います。
あとは、get_terms 関数等で簡単に表示できます。
$terms = get_terms( 'xo_event_cat', array( 'hide_empty' => 0 ) );
if ( !empty( $terms ) && !is_wp_error( $terms ) ) {
foreach ( $terms as $term ) {
echo $term->name;
}
}
石鷹様こんにちは
迅速なお返事ありがとうございます。
ご教授頂いたソースを参考に、カテゴリーのリンクウィジェットや、休日と同じ様にカテゴリー見本に利用させていただこうと思います。
ご対応いただきありがとうございました。
これからも開発応援しております
始めまして。
今回XO Event Calendarを導入させていただくことにしたのですが、
1点質問させていただきます。
・日曜日と木曜日に休日を設定しました。
・イベントの設定がない週は、休日は上半分が着色されます。
・週のどこかにイベントがあると、イベントは下半分に表示されます。同時に、休日はセル全体が着色されて今います。
修正方法を探したのですが見つけることができませんでした。
直す方法を教えていただけますと幸いです。
こんにちは、はじめまして。
テーマの CSS が影響していると思われます。
次のアップデートで対策したいと思います。それまでは下記の CSS をカスタマイズの「追加 CSS」またはテーマの style.css などに追記して対応してもらえればと思います。
石鷹 様
ご返答ありがとうございます。
style.cssにソースを追記しましたところ、きれいに表示されるようになりました。どうもありがとうございました。
使いやすいプラグインをありがとうございます!
今後ともよろしくお願いいたします。