アドベントカレンダーをWordPressとショートコードでサクッと作りました(^^)/

この記事は約16分で読めます。

Image

今朝「そうかー12月かー12月と言えばアドベントカレンダーだよね」と思いつきました。コワーキングスペース八王子 8Beat も色々コンテンツを増やしたいんだけどなかなか増えません。でも「アドベントカレンダーにしちゃえば毎日少しずつコンテンツも増えるし、話題作りにもなるし一石二鳥だよね!」と思いついたのでショートコードを組み合わせて楽に更新できるように作ってみました!

ということでできあがったアドベントカレンダーは

ということで結果を先に見せちゃいますが、できあがったアドベントカレンダーはこちらです!

Image

アドベントカレンダー自体は、固定ページで作ります。それぞれにリンクする記事は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の投稿機能で予約投稿にしておけばいくつでも記事を書いておくことができます。予約投稿の日時になれば記事は「公開」状態になるのでその時点でショートコードが記事へのリンクを貼ってくれるようになります。

ということでこれから毎日アドベントカレンダーを書いていきたいと思いますので、よろしければ応援してください(^^)/

2014アドベントカレンダー 【8Beat便利帳】

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress 全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。