この記事は最終更新日から10年経過しています。内容が古い可能性があります。
今朝「そうかー12月かー12月と言えばアドベントカレンダーだよね」と思いつきました。コワーキングスペース八王子 8Beat も色々コンテンツを増やしたいんだけどなかなか増えません。でも「アドベントカレンダーにしちゃえば毎日少しずつコンテンツも増えるし、話題作りにもなるし一石二鳥だよね！」と思いついたのでショートコードを組み合わせて楽に更新できるように作ってみました！
記事をざっと見る
ということでできあがったアドベントカレンダーは
ということで結果を先に見せちゃいますが、できあがったアドベントカレンダーはこちらです！
アドベントカレンダー自体は、固定ページで作ります。それぞれにリンクする記事は8Beatの投稿となります。
全体的な機能の説明
まずカレンダーを固定ページで作る。
アドベントカレンダー用の投稿はスラッグを advent1 のようにする。数字は日付にしておく。
以前作った、ryus_show_when_published（記事が公開されたら見せる） というショートコードをちょっと改造して、記事が公開されていればリンク付きの日付を表示してそれ以外の時は日付だけ表示する。
というようにしておきます。このようにしておけばアドベントカレンダーを作れば、毎日あるいは事前にアドベントカレンダー用の記事を追加して行けば自動的にその日になると、該当する記事があれば日付にリンクが貼られるようになります。
アドベントカレンダーの固定ページを作る
固定ページはこんな風になります。
<table id="adventcalendar">
<tr id="adventcalendar_th">
<th class="adventcalendar_th_each">
日
</th>
<th class="adventcalendar_th_each">
月
</th>
<th class="adventcalendar_th_each">
火
</th>
<th class="adventcalendar_th_each">
水
</th>
<th class="adventcalendar_th_each">
木
</th>
<th class="adventcalendar_th_each">
金
</th>
<th class="adventcalendar_th_each">
土
</th>
</tr>
<tr class="adventcalendar_td">
<td class="adventcalendar_td_each"></td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent1" alternative=1]<a href="/advent1/" target="_blank">1</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent2" alternative=2]<a href="/advent2/" target="_blank">2</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent3" alternative=3]<a href="/advent3/" target="_blank">3</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent4" alternative=4]<a href="/advent4/" target="_blank">4</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent5" alternative=5]<a href="/advent5/" target="_blank">5</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent6" alternative=6]<a href="/advent6/" target="_blank">6</a>[/ryus_show_when_published]</td>
</tr>
<tr class="adventcalendar_td">
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent7" alternative=7]<a href="/advent7/" target="_blank">7</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent8" alternative=8]<a href="/advent8/" target="_blank">8</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent9" alternative=9]<a href="/advent9/" target="_blank">9</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent10" alternative=10]<a href="/advent10/" target="_blank">10</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent11" alternative=11]<a href="/advent11/" target="_blank">11</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent12" alternative=12]<a href="/advent12/" target="_blank">12</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent13" alternative=13]<a href="/advent13/" target="_blank">13</a>[/ryus_show_when_published]</td>
</tr>
<tr class="adventcalendar_td">
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent14" alternative=14]<a href="/advent14/" target="_blank">14</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent15" alternative=15]<a href="/advent15/" target="_blank">15</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent16" alternative=16]<a href="/advent16/" target="_blank">16</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent17" alternative=17]<a href="/advent17/" target="_blank">17</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent18" alternative=18]<a href="/advent18/" target="_blank">18</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent19" alternative=19]<a href="/advent19/" target="_blank">19</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent20" alternative=20]<a href="/advent20/" target="_blank">20</a>[/ryus_show_when_published]</td>
</tr>
<tr class="adventcalendar_td">
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent21" alternative=21]<a href="/advent21/" target="_blank">21</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent22" alternative=22]<a href="/advent22/" target="_blank">22</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent23" alternative=23]<a href="/advent23/" target="_blank">23</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent24" alternative=24]<a href="/advent24/" target="_blank">24</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each">[ryus_show_when_published slug="advent25" alternative=25]<a href="/advent25/" target="_blank">25</a>[/ryus_show_when_published]</td>
<td class="adventcalendar_td_each"></td>
<td class="adventcalendar_td_each"></td>
</tr>
</table>
長い(^_^;ですね。しかしこのまま貼っても使えるようにしてあります。お使いのサイトがサブディレクトリとかでしたら href の /advent25/ にサブディレクトリを入れてください。このblogならば /blog/advent25/ とかになります。
あと子テーマの style.cssに、
table#adventcalendar,
th.adventcalendar_th_each,
td.adventcalendar_td_each {
border: 1px solid rgba(0, 0, 0, 0.1);
}
table#adventcalendar {
border-collapse: separate;
border-spacing: 0;
border-width: 1px 0 0 1px;
margin-bottom: 24px;
width: 100%;
}
/* advent calendar */
#adventcalendar_th {
margin-bottom:0px;
height:60px;
}
.adventcalendar_th_each{
width:90px;
height:60px;
text-align:center;
vertical-align:middle;
line-height:60px;
}
.adventcalendar_th_clear_both{
clear:both;
}
.adventcalendar_td {
margin-bottom:0px;
margin-top:0px;
height:60px;
}
.adventcalendar_td_each{
width:90px;
height:60px;
text-align:center;
vertical-align:middle;
line-height:60px;
}
このあたりを追加しておいていただけると、全く同じ形で表示できると思います。
ある記事が公開されていれば表示するショートコードをちょっと改造
「ある記事が公開されたら囲まれた部分を表示する」ショートコードを作りました
で作った、ryus_show_when_published というショートコードをちょっと改造しました。以前は「記事が公開されていなければブランクを返す」という仕様でしたがこれを「記事が公開されていなくてかつ代替文字が指定されてたら代替文字を返す、それ以外はブランクを返す」という仕様に変更しました。
ソースはこんな感じです。
// 別の記事が公開されていたら表示する
/* 予約投稿とかの時、公開済み記事に「補足でこういうblog書きました」みたいに表示したいけど、予約なので投稿されるまでは見せたくない。といって公開されるまで待つと書き忘れる、という教訓から */
/* 2014/12/01追加 代替文字 alternative 記事が公開されていないときに表示したい文字列 */
function ryus_show_when_published ( $atts, $content = null ) {
extract( shortcode_atts( array(
'postid' => '',
'slug' => '',
'alternative' => '',
), $atts ) );
// スラッグ指定の時、postidを取得する
if($slug != ''){
$postid = url_to_postid(site_url().'/'.$slug);
}
if($postid != ''){
$post = get_post($postid);
if($post){
if($post->post_status == 'publish'){
return $content;
}
}
}
if($alternative != ''){
return $alternative;
}
return '';
}
add_shortcode('ryus_show_when_published', 'ryus_show_when_published');
お使いになる場合は上記をコピーしてお使いの子テーマの functions.php に追加してください。
毎日の記事を書く
あとは毎日記事を書いていくだけです（というところが難しいんですが(^_^;）。
記事はもう普通に書けば良くて、ひとつだけ上記にも書きましたが スラッグ に advent1 のように付けておくというお約束だけです。つまり1日～25日までの記事のスラッグを advent1～advent25というスラッグにします。
ショートコードの機能で、記事が下書き状態や非公開であればリンクは貼られませんし、WordPressの投稿機能で予約投稿にしておけばいくつでも記事を書いておくことができます。予約投稿の日時になれば記事は「公開」状態になるのでその時点でショートコードが記事へのリンクを貼ってくれるようになります。
ということでこれから毎日アドベントカレンダーを書いていきたいと思いますので、よろしければ応援してください(^^)/
コメント