WordPress で Advent Calendar を作ってみた
お母ちゃん
2019.12.1
Home > Advent Calendar >
1
0
「ホームメイドガービッジもアドベントカレンダーをやりたい」というお父ちゃんの希望により、、
折角なので WordPress にプラグイン無しで、
ショートコードでアドベントカレンダーを表示出来る形で、実装してみました。
日にちを固定で出しているため結構無理くり感ありますが・・(^_^;)
このような表示になります↓
目次
WordPress側
function.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
/* Advent Calendar * ========================================================================*/ function advent_calendarFunc ($atts, $content = null) { $args = array( 'category' => '1466', 'post_status' => 'any', 'date_query' => array( 'after' => array( 'year' => $atts['year'], 'month' => 12, 'day' => 1, ), 'before' => array( 'year' => $atts['year'], 'month' => 12, 'day' => 25, ), 'inclusive' => true, ), 'posts_per_page' => 99, ); $myposts = get_posts($args); global $post; $oldpost = $post; if($myposts) { foreach($myposts as $post) : setup_postdata( $post ); $data = array( 'url' => get_permalink(), 'title' => the_title("","",false), 'status' => get_post_status(), 'author_name' => get_the_author(), 'author_img' => get_avatar( get_the_author_meta('ID'), 35 ) ); $calendar_data[get_post_time('j')] = $data; endforeach; } $post = $oldpost; $w = ['日','月','火','水','木','金','土']; foreach($w as $value){ $html .= '<span class="advent-calendar-week">'.$value.'</span>'; } $datetime = new DateTime("$atts[year]-12-1"); $start = $datetime->format('w') * -1 + 1; $end = 25 + ( 7 - (25 + $datetime->format('w')) % 7 ); $template = <<<EOF <article class="{{status}} {{period}}"> <div class="advent-calendar-day">{{day}}</div> <div class="advent-calendar-content"> <span class="advent-calendar-title"> <a href="{{url}}">{{title}}</a> </span> <span class="advent-calendar-author">{{author_img}} {{author_name}}</span> </div> </article> EOF; for($i = $start; $i <= $end; $i++) { $data = str_replace( '{{day}}' , $i < 1 ? 30 + $i : ($i > 31 ? $i - 31 : $i ) , $template); $data = str_replace( '{{period}}' , ($i < 1 || $i > 25 )? 'outside' : '' , $data); if ($calendar_data[$i]) { extract($calendar_data[$i]); $data = str_replace( '{{status}}' , $status , $data); $data = str_replace( '{{url}}' , $url , $data); $data = str_replace( '{{title}}' , $title , $data); $data = str_replace( '{{author_img}}' , $author_img , $data); $data = str_replace( '{{author_name}}' , $author_name , $data); } else { } $html .= preg_replace('/{{.*?}}/','',$data); }; return '<div class="advent-calendar">'.$html.'</div>'; } add_shortcode('advent_calendar', 'advent_calendarFunc'); |
「Advent Calendar」カテゴリに登録されている、期間内の記事をカレンダーにして出力するようにしています。
固定ページ
|
1 |
[advent_calendar year=2019] |
ショートコードで年を指定できます。
表示側
出力されるHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<div class='advent-calendar'><span class='advent-calendar-week'>日</span><span class='advent-calendar-week'>月</span><span class='advent-calendar-week'>火</span><span class='advent-calendar-week'>水</span><span class='advent-calendar-week'>木</span><span class='advent-calendar-week'>金</span><span class='advent-calendar-week'>土</span> <article class="publish "> <div class="advent-calendar-day">1</div> <div class="advent-calendar-content"> <span class="advent-calendar-title"> <a href="">Advent Calendar を作ってみた</a> </span> <span class="advent-calendar-author"><img alt='お母ちゃん' src='https://homemadegarbage.com/wp/wp-content/uploads/icon-mama-e1469143904551.png' class='avatar avatar-35 photo' height='35' width='35' /> お母ちゃん</span> </div> </article> <article class="future "> <div class="advent-calendar-day">2</div> <div class="advent-calendar-content"> <span class="advent-calendar-title"> <a href="">2019年 Arduino IDEを用いて製作したもの</a> </span> <span class="advent-calendar-author"><img alt='お父ちゃん' src='https://homemadegarbage.com/wp/wp-content/uploads/icon-papa-e1469143867390.png' class='avatar avatar-35 photo' height='35' width='35' /> お父ちゃん</span> </div> </article> <article class="future "> <div class="advent-calendar-day">3</div> <div class="advent-calendar-content"> <span class="advent-calendar-title"> <a href="">ハエトリソウ捕食監視システム</a> </span> <span class="advent-calendar-author"><img alt='お父ちゃん' src='https://homemadegarbage.com/wp/wp-content/uploads/icon-papa-e1469143867390.png' class='avatar avatar-35 photo' height='35' width='35' /> お父ちゃん</span> </div> </article> （...中略...） <article class=" "> <div class="advent-calendar-day">25</div> <div class="advent-calendar-content"> <span class="advent-calendar-title"> <a href=""></a> </span> <span class="advent-calendar-author"> </span> </div> </article> <article class=" outside"> <div class="advent-calendar-day">26</div> <div class="advent-calendar-content"> <span class="advent-calendar-title"> <a href=""></a> </span> <span class="advent-calendar-author"> </span> </div> </article> <article class=" outside"> <div class="advent-calendar-day">27</div> <div class="advent-calendar-content"> <span class="advent-calendar-title"> <a href=""></a> </span> <span class="advent-calendar-author"> </span> </div> </article> <article class=" outside"> <div class="advent-calendar-day">28</div> <div class="advent-calendar-content"> <span class="advent-calendar-title"> <a href=""></a> </span> <span class="advent-calendar-author"> </span> </div> </article></div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
/* Advent Calendar ============================================================================= */ .advent-calendar { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(33, 182, 168, .2); border-left: 1px solid rgba(33, 182, 168, .2); } .advent-calendar > * { width: 14.28%; border-right: 1px solid rgba(33, 182, 168, .2); border-bottom: 1px solid rgba(33, 182, 168, .2); position: relative; } .advent-calendar .outside { background: rgba(33, 182, 168, .2); } .advent-calendar span { display: block; } .advent-calendar .advent-calendar-week { background: #009688; color: white; text-align: center; } .advent-calendar .advent-calendar-day { background: rgba(33, 182, 168, .2); text-align: center; } .advent-calendar .outside .advent-calendar-day { background: none; color: #888; } .advent-calendar .advent-calendar-content { min-height: 6rem; padding: .5rem; } .advent-calendar .advent-calendar-title { font-size: .8rem; line-height: 1.2; font-weight: bold; margin-bottom: 2rem; } .advent-calendar .future .advent-calendar-title a { pointer-events: none; color: inherit; } .advent-calendar .advent-calendar-author { font-size: .75rem; position: absolute; bottom: .5rem; line-height: 1; } .advent-calendar .advent-calendar-author img { width: 20px; } @media screen and (max-width: 749px) { .advent-calendar { display: block; } .advent-calendar .advent-calendar-week { display: none; } .advent-calendar > * { width: 100%; } .advent-calendar article { display: flex; } .advent-calendar .advent-calendar-day { padding: .5rem 0; width: 55px; font-size: .8rem; border-bottom: 1px solid white; } .advent-calendar .advent-calendar-day::before { content: '12/'; } .advent-calendar .advent-calendar-content { min-height: 0; } .advent-calendar .advent-calendar-title { margin-bottom: 1.5rem; } } |
※ 主にChromeでの対応
このような表示になります↓
