XO Event Calendar プラグインにて、年間休日カレンダーのようなものを表示する例を紹介します。
ショートコード
xo_event_calendar ショートコードで、年 (year)、月 (month) および月数 (months) パラメーターを指定します。例では、年間カレンダー用のスタイルを適用させるために ID で “calendar-year” を指定しています。
例:
[xo_event_calendar id="calendar-year" year="2018" month="1" months="12" event="false" navigation="false" holidays="all"]
表示のカスタマイズ
スタイルで、年間カレンダーに適した表示にします。
具体的には、日付のセンタリング、前後月の日付を削除、今日の強調表示をしない、年表示をしない、PC の場合は3列表示にします。
スタイル (CSS)
/*
Calendar Year
*/
#calendar-year .xo-months {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 15px;
row-gap: 5px;
}
#calendar-year .month-event,
#calendar-year .month-event-space {
display: none;
}
#calendar-year .other-month {
display:none;
}
#calendar-year table.xo-month .month-dayname td div,
#calendar-year table.xo-month .month-week,
#calendar-year table.xo-month thead {
line-height: 1.5em;
height: 1.5em;
}
#calendar-year table.xo-month .month-dayname td div {
padding: 0;
text-align: center;
font-size: 1em;
}
#calendar-year .xo-event-calendar table.xo-month .month-dayname td div,
#calendar-year .xo-event-calendar table.xo-month .month-dayname td div.today {
color: #333;
font-weight: normal;
}
@media (max-width: 768px) {
#calendar-year .xo-months {
grid-template-columns: repeat(1, 1fr);
}
}
/* Calendar caption */
#calendar-year .xo-month .month-header span.calendar-caption {
font-size: 0;
}
#calendar-year .xo-month .month-header span.calendar-caption:before {
font-size: 20px;
}
#calendar-year .xo-month-wrap:nth-child(1) table.xo-month .month-header span.calendar-caption:before {
content: "1月";
}
#calendar-year .xo-month-wrap:nth-child(2) table.xo-month .month-header span.calendar-caption:before {
content: "2月";
}
#calendar-year .xo-month-wrap:nth-child(3) table.xo-month .month-header span.calendar-caption:before {
content: "3月";
}
#calendar-year .xo-month-wrap:nth-child(4) table.xo-month .month-header span.calendar-caption:before {
content: "4月";
}
#calendar-year .xo-month-wrap:nth-child(5) table.xo-month .month-header span.calendar-caption:before {
content: "5月";
}
#calendar-year .xo-month-wrap:nth-child(6) table.xo-month .month-header span.calendar-caption:before {
content: "6月";
}
#calendar-year .xo-month-wrap:nth-child(7) table.xo-month .month-header span.calendar-caption:before {
content: "7月";
}
#calendar-year .xo-month-wrap:nth-child(8) table.xo-month .month-header span.calendar-caption:before {
content: "8月";
}
#calendar-year .xo-month-wrap:nth-child(9) table.xo-month .month-header span.calendar-caption:before {
content: "9月";
}
#calendar-year .xo-month-wrap:nth-child(10) table.xo-month .month-header span.calendar-caption:before {
content: "10月";
}
#calendar-year .xo-month-wrap:nth-child(11) table.xo-month .month-header span.calendar-caption:before {
content: "11月";
}
#calendar-year .xo-month-wrap:nth-child(12) table.xo-month .month-header span.calendar-caption:before {
content: "12月";
}
PHP コードによる年月の変更
前セクションのスタイル (「/* Calendar caption */」以降) は、開始月が1月であることを前提にしています。
これでは汎用的ではないので、gettext_with_context フィルターフックを使用して変更する方法も紹介しておきます。
下記コードを、functions.php に追加することで月のみ表示されるようになります。
functions.php
function my_gettext_with_context_calendar( $translation, $text, $context, $domain ) {
if ( $domain == 'xo-event-calendar' && $context == 'calendar caption' && $text == '%1$s %2$s' ) {
$translation = '%1$s';
}
return $translation;
}
add_filter( 'gettext_with_context', 'my_gettext_with_context_calendar', 10, 4 );
※ このコードを追加した場合は、スタイルの「/* Calendar caption */」以降は不要です。
こんにちは。まず第一に、XO Event Calendarプラグインで行われたすべての作業に感謝します。このプラグインは、ミニマリストであると同時に、使いやすく、充実した機能を備えています。これは、限られたサーバーリソースを持っているときには非常に興味深いものです。
PS: deepl.comで翻訳
私はそれが可能かどうかを知りたいのですが、このプラグインで年間形式(数ヶ月)でナビゲーションを追加することは可能ですか?はいの場合は、どのように?
もう一度あなたに感謝します。
こんにちは、コメントありがとうございます。
月送りのナビゲーションは、ショートコードのパラメータで、
navigation=”true”
を指定することでできます。
年送りはできません。年ごとのページを作成してリンクを貼ることになります。
以上、よろしくお願いします。