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

Image

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

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

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

Image

アドベントカレンダー自体は、固定ページで作ります。それぞれにリンクする記事は8Beatの投稿となります。

全体的な機能の説明

まずカレンダーを固定ページで作る

アドベントカレンダー用の投稿はスラッグを advent1 のようにする。数字は日付にしておく。

以前作った、ryus_show_when_published(記事が公開されたら見せる) というショートコードをちょっと改造して、記事が公開されていればリンク付きの日付を表示してそれ以外の時は日付だけ表示する

というようにしておきます。このようにしておけばアドベントカレンダーを作れば、毎日あるいは事前にアドベントカレンダー用の記事を追加して行けば自動的にその日になると、該当する記事があれば日付にリンクが貼られるようになります。

アドベントカレンダーの固定ページを作る

固定ページはこんな風になります。

長い(^_^;ですね。しかしこのまま貼っても使えるようにしてあります。お使いのサイトがサブディレクトリとかでしたら href の /advent25/ にサブディレクトリを入れてください。このblogならば /blog/advent25/ とかになります。
 
あと子テーマの style.cssに、

このあたりを追加しておいていただけると、全く同じ形で表示できると思います。

ある記事が公開されていれば表示するショートコードをちょっと改造

「ある記事が公開されたら囲まれた部分を表示する」ショートコードを作りました

で作った、ryus_show_when_published というショートコードをちょっと改造しました。以前は「記事が公開されていなければブランクを返す」という仕様でしたがこれを「記事が公開されていなくてかつ代替文字が指定されてたら代替文字を返す、それ以外はブランクを返す」という仕様に変更しました。

ソースはこんな感じです。

お使いになる場合は上記をコピーしてお使いの子テーマの functions.php に追加してください。

毎日の記事を書く

あとは毎日記事を書いていくだけです(というところが難しいんですが(^_^;)。

記事はもう普通に書けば良くて、ひとつだけ上記にも書きましたが スラッグ に advent1 のように付けておくというお約束だけです。つまり1日~25日までの記事のスラッグを advent1~advent25というスラッグにします。

ショートコードの機能で、記事が下書き状態や非公開であればリンクは貼られませんし、WordPressの投稿機能で予約投稿にしておけばいくつでも記事を書いておくことができます。予約投稿の日時になれば記事は「公開」状態になるのでその時点でショートコードが記事へのリンクを貼ってくれるようになります。

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

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

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る