jQueryのライブラリーの「FullCalendar」でカレンダー上に情報を表示できます。WordPressにはプラグインで実装可能ですが、今回も直接インストールして見ました。
表示する内容は、本ブログの投稿を投稿日ごとにカレンダー表示します。
取得内容は タイトル、カテゴリー、パーマリンク、アイキャッチ画像、投稿日とします。
取得した内容はAjax を通じてカレンダー上に表示します。
カレンダー表示だけなら、ショートコードで表示すればいいのですが、今後データ登録や修正、編集として応用も考えるとして ajax通信での実現としました。
サーバー側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 |
# ajax サーバー側のPhpのソース # ワードプレスで投稿された記事を範囲選択する $args = array( "posts_per_page" => -1, # 抽出条件を全てとする 'date_query' => array( array( 'compare'=>'BETWEEN', 'inclusive'=>true, 'before'=> date("Y/m/d"), 'after'=>'2018/01/01', ), ), ); $the_query = new WP_Query( $args ); # 投稿を抽出 if ( $the_query->have_posts() ) { # 投稿がある場合のみ実行する while ( $the_query->have_posts() ) { $the_query->the_post(); $ID = get_the_ID(); if ( get_post_status ( $ID ) == 'publish' ) { # 公開済みの投稿のみ if( has_post_thumbnail() ){ $eyecatch = get_the_post_thumbnail($ID, 'medium'); # パーマリンク画像アドレス取得 $img = get_the_post_thumbnail($ID, 'thumbnail'); # カレンダー画像用アドレス取得 } else { $eyecatch = ''; } $category = get_the_category(); $cdContents[] = array( # 投稿ごとの要素を配列化 "pamalink" => get_permalink(), "title" =>htmlspecialchars_decode(get_the_title()), "start" => get_the_date("Y/m/d"), "allDay" => true, "color" => 'blue', "textColor" => 'white', "eyecatch" => $eyecatch, "img" => $img, "cat_name" => $category[0]->cat_name ); } } $contents_json = json_encode( $cdContents ); # FullCalendar のデータは json形式のデータで渡す echo $contents_json; } |
jQuery
|
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 |
jQuery(function($) { $(document).ready(function() { $.ajax({ type: 'POST', url: ajaxurl, dataType: 'json', data: { 'action' : 'view_sitename', 'prg' : "fullcalendar", }, success: function( response ){ $("#fullcalenderInfomation").html( response ); var dt = { header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultDate: new Date(), lang: "ja", # 日本語に変更 height: 800, contentHeight: 800, eventRender: function(events, element) { $(element.context) .css("border-color", "transparent") .css("background-color", "transparent") .html("<img style=\"width: 80px;padding-left: 5px; margin-bottom: -10px\" src=\"" + events.img +"\">"); }, events: response, eventMouseover: function(calEvent, jsEvent) { $(this).css("cursor","pointer"); # マウスオーバーによりカーソルをポインター表示 }, eventClick: function(calEvent, jsEvent) { if ($('#sample-dialog').css('display') != 'block') { $("#mesTitle").html("<a href=\"" + calEvent.pamalink + "\">" + calEvent.title + "</a>\n"); # タイトルクリックによりパーマリンクに遷移 $(".dialog-title").html(calEvent.cat_name); $("#eyecatchialog").html("<a href=\"" + calEvent.pamalink + "\">" + calEvent.eyecatch + "</a>\n"); # 画像クリックによりパーマリンクに遷移 var leftPosition = (($(window).width() - $("#sample-dialog").outerWidth(true)) / 5); # ダイアログの表示位置調整 #CSSを変更 $("#sample-dialog").css({"left": leftPosition + "px"}); #ダイアログを表示する $("#sample-dialog").show(200); } }, }; $('#calendar').fullCalendar(dt); }, #Ajaxリクエストが失敗した時発動 error: function(XMLHttpRequest, textStatus, errorThrown) { $("#fullcalendarstatus").html("error" ); }, }); }); #閉じるボタンで非表示 $(".dialog-close").on("click", function(){ $(this).parents(".dialog").hide(200); }); }); |
HTMLソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
# ポップアップダイアログ本体 <div class="dialog" id="sample-dialog"> <div class="dialog-header"> <span class="dialog-title"></span> <button type="button" class="dialog-close"> 閉じる☓ </button> </div> <div class="dialog-content"> <p id="mesTitle"></p> <div id="eyecatchialog"></div> </div> </div> # FullCalendar本体 <div id='calendar'></div> |
参考サイト：
FullCalendar公式サイト
ワードプレス関数リファレンス
[FullCalendar]カレンダーに画像を表示する