株式会社サン・スパッド｜サイボウズLive難民向け「グループ週間予定用WPテンプレート」

TOP
WEB・ホームページの実績紹介
WordPressをつかってグループで使える週間予定表を作る

サイボウズLive難民向け
「WordPressをつかってグループで使える週間予定表を作る」

無料グループウェア「サイボウズLive」が2019年4月15日にサービスを終了すると発表しました。

弊社でもサイボウズLiveを全体予定の確認用として毎朝「グループ」の「イベント」を読み上げて使用していました。

無料でここまでのサービスを展開してくれていたサイボウズLive。移行期間もしっかりと用意していてくれて感謝が尽きません。

しかし移行について、有料のサイボウズOfficeへの移行や他社グループウェアも検討してみたのですが、社内連絡やファイル共有は間に合っていたので有料プランはオーバーだな…という印象を捨てきれず、意外と週間予定表にグループで書き込めてかつ無料と言うものがなく、今更紙の予定表に戻る気もおきずに困っていました。

ふと見かけたWordPressの予約投稿を表示する機能

そんな機会がなかったので調べていなかったのですが、functions.phpに設定することでWordPressの「予約投稿」された記事を全て表示するという方法が目に止まりました。

そこで「予約投稿を表示できれば、カテゴリをユーザーと見立てて、カテゴリと日付を指定して投稿を表示できれば予定表が作れるのでは？」と考えたのです。

今回の記事ではより簡便化するためにプラグインを使用しますが、functions.phpでもできます。「予約投稿表示」等でググっていただければすぐに出てきますので、プラグインを使用したくない方はそちらから。

前置きと準備

あくまでコーディングがあまり得意ではない方を想定して作っています。

また、コードに問題等があればご連絡いただけると助かります。

使う際にはまず、何も投稿していないインストールしたてのWordPressをご用意ください。

まずは試したいという方は下記より。

デモサイト
ログインユーザー demo
パスワード demo
※投稿者権限なのでカテゴリは増やせません

header.phpとfooter.phpを用意する。

WordPressで使用できる状態であれば大した内容じゃなくていいです。

このままコピーしましょう。

header.php

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
	<meta charset="utf-8">
	<title><?php bloginfo('name'); ?></title>
	<?php wp_head();?>
	<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> 
	<?php wp_deregister_script('jquery'); ?>
</head>
<body>

footer.php

<footer>
	<small id="copyright" class="f_left">予定表フォーマット Powered by WordPress version <?php bloginfo('version'); ?></small>
<?php wp_footer(); ?>

週間カレンダーを表示する

index.phpを作成し、WordPressのheaderを取得しておき、PHPで週間カレンダーを作ります。

イチから作るのも大変なので【PHPサンプル実験室】様週間カレンダーを使用させていただきます。公開許可もいただきありがとうございます。

index.php

<?php get_header(); ?>
<article>
<?php
//本日取得
function getToday($date = 'Y-m-d') {
	$today = new DateTime();
	return $today->format($date);
}
//本日かどうかチェック
function isToday($year, $month, $day) {
	$today = getToday('Y-n-j');
	if ($today == $year."-".$month."-".$day) {
		return true;
	}
	return false;
}
//今週の日曜日の日付を返す
function getSunday() {
	$today = new DateTime();
	$w = $today->format('w');
	$ymd = $today->format('Y-m-d');
	$next_prev = new DateTime($ymd);
	$next_prev->modify("-{$w} day");
	return $next_prev->format('Ymd');
}

//今週月曜日の日付を返す
function getMonday() {
	$today = new DateTime();
	$w = $today->format('w');
	$ymd = $today->format('Y-m-d');
	if ($w == 0) {
		$d = 6;
	}
	else {
		$d = $w - 1 ;
	}
	$next_prev = new DateTime($ymd);
	$next_prev->modify("-{$d} day");
	return $next_prev->format('Ymd');
}
//N日（週）+か-する関数
function getNthDay($year, $month, $day, $n) {
	$next_prev = new DateTime($year.'-'.$month.'-'.$day);
	$next_prev->modify($n);
	return $next_prev->format('Ymd');
}

//週間カレンダー表示
if (isset($_GET['date'])) {
	//年月日取得
	$year_month_day = $_GET['date'];
} 
else {
	//今週日曜日取得
	$year_month_day = getSunday();
}

//年月日に変数で取得
$year  = substr($year_month_day, 0, 4); 
$month = substr($year_month_day, 4, 2); 
$day   = substr($year_month_day, 6, 2); 
$month = sprintf("%01d", $month);
$day   = sprintf("%01d", $day);
$next_week = getNthDay($year, $month, $day, '+1 week');
$pre_week  = getNthDay($year, $month, $day, '-1 week');
$table = NULL;
//週間の日付出力
for ($i = 0; $i < 7; $i++) { 
		$ymd = getNthDay($year, $month, $day, '+'.$i.' day');
		$y = substr($ymd, 0, 4); 
		$m = substr($ymd, 4, 2); 
		$d = substr($ymd, 6, 2); 
		$n = sprintf("%01d", $m);
		$j = sprintf("%01d", $d);
		$t = $j.'日';
	if (isToday($y, $n, $j)){
		$table .= '<li class="today">'.$t.'</li>'.PHP_EOL;
	}
	else {
		$table .= '<li>'.$t.'</li>'.PHP_EOL;
	}
}
?>

週間カレンダーを表示するHTML部分は下記の通りです。

週表示を変更するためのリンクの親には「button」というIDを、週の表示には「week」というIDを、日付の表示には「day」のIDを、
週とは関係ない名前の箇所には「label」というクラスを予め付けておきます。

また、元のコードではtableタグを使用しておりましたが、スマホでも更新ができるようにflex boxを使いたかったので、ulタグに変更しています。

index.php

<ul id="button">
	<li><a class="button" href="<?php $_SERVER['SCRIPT_NAME'];?>?date=<?php echo $pre_week;?>">« 前週</a></td></li>
	<li><a class="button" id="toweek" href="<?php $_SERVER['SCRIPT_NAME'];?>?date=<?php echo $last_monday = date('Ymd', strtotime('last Sunday')) . '\n'; ?>">今週</a></li>
	<li><a class="button" href="<?php $_SERVER['SCRIPT_NAME'];?>?date=<?php echo $next_week;?>">次週 »</a></td></li>
</ul>
<ul id="week">
	<li class="label">曜日</li>
	<li>日</li>
	<li>月</li>
	<li>火</li>
	<li>水</li>
	<li>木</li>
	<li>金</li>
	<li>土</li>
</ul>
<ul id="day">
	<li class="label">日</li>
	<?php echo $table;?>
</ul>

WordPressの投稿を表示する

ここまではWordPressから何も取り出していない状態なので、週間カレンダーのみが表示されます。

次に、WordPressからデータを抽出しましょう。

まずは週間カレンダーで使用した変数を元に、必要なデータを集めます。

index.php

<?php
	$wd = array(); // 空の配列を用意し、下のループで配列の中身を決めます。
	for($w = 0; $w <= 6; $w++){ // 0〜6までループさせることで日曜日から土曜日までの日付を配列の中に代入します。
		$wd[] = getNthDay($year, $month, $day, "+$w day"); 
	}
    $cat_all = get_terms( "category", "fields=all&get=all" ); // カテゴリを全て抽出します。
    foreach($cat_all as $catv): // 上で抽出したカテゴリ分だけループさせます。
?>

次にループの内容を書いていきます。

index.php

<?php $uname = $catv->slug; // カテゴリ名をローマ字で記入したスラッグをunameと名付けて変数化 ?>
<ul class="user">
	<li class="label"><?php echo $catv->name;// これでカテゴリ名がechoされます。　?></li>
	<?php foreach($wd as $value): //事前に配列しておいた1週間の日付分だけループさせる。 ?>
			<li class="day<?php echo $value // クラスに日付をひとつずつ入れていきます。後ほど使います。 ?>">
			<small><?php echo $catv->name; // 縦に読んでも読みやすいようにそれぞれに小さく名前を入れておきますホントはifで分けても良いのですが、という話も後ほど。 ?></small>
			<ul>
				<?php
				$posts = get_posts(array(
				'posts_per_page' => -1, // 表示件数の処理は-1にすることで全て表示される。
				'category_name' => $uname,  // カテゴリスラッグごとに抽出。
				'orderby' => 'name', // 投稿が投稿名順に予定が表示される。
				'date_query'=>array( array( 'year'=> substr($value, 0, 4), 'monthnum'=> substr($value, 4, 2), 'day'=>substr($value, 6, 2) ) ) //ループで変動しているvalueを元に抽出する日付を変更。
				));
				?>
				<?php if($posts): foreach($posts as $post): setup_postdata($post); //以下wordpressの投稿出力タグ。titleとpermalinkを出力します。 ?>
					<li><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
				<?php endforeach; endif; ?> <!--WordPressの投稿を出力させるループを終了-->
			</ul>
		</li>
	<?php endforeach; ?> <!--日付ごとのループ終了-->
</ul>
<?php endforeach; ?> <!--カテゴリごとのループ終了-->

最後に、更新用のログインリンクを貼り、WordPressのfooterを取得します。

index.php

<p id="edit"><a href="<?php echo admin_url('edit.php'); ?>" >予定を変更する</a></p>
<?php get_footer(); ?>
</article>
</body>
</html>

admin_url()で管理ページのURLを取得してくれます。括弧内に'edit.php'等を書くと指定した内容をURLの最後に付け足してくれるので、これで投稿管理画面にワンクリックでリンクされるようになります。

CSSで装飾する

このままだと縦並びのリストになってしまうので、CSSで形を整えていきます。

style.cssを作成し下記の通りに書いていきます。

style.css

/*ベース*/
*{
	margin:0;
	padding:0;
}
article, footer, header {
	display:block;
}
body{
	font-family :
	YuGothic,    /* Mac用 */
	'Yu Gothic', /* Windows用 */
	sans-serif;
}
/*ベースここまで*/
/*中身を組み立てる*/
article > ul{
	display: flex;
	width: 100%;
	max-width: 1280px; /*必要サイズに合わせて変えてください。*/
	margin: auto;
	flex-wrap: nowrap;
	list-style: none;
}
article > ul:not(#button) > li.label{
	width:9%;
}
article > ul:not(#button) > li:not(.label){
	width: 13%;
}
article > ul:not(#button) > li{
	text-align: left;
	border-right: 1px solid #ccc;
	box-sizing: border-box;
	list-style-position: inside;
	padding: 0.5em;
}
article > ul:not(#button){
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
article > ul#button{ /*週を移動するボタンを均等に配置*/
	margin: 1em auto;
	justify-content: space-between;
}
article > ul#week{ /*表の上部を線で閉じる*/
	border-top: 1px solid #ccc;
}
.today { /*今日に色を付ける*/
	background: #FFBE55
}
article > ul:nth-child(2n){ /*増えても見やすいように交互に色を付ける*/
	background: #EEFBFF;
}
article > ul#week li{ /*見やすいように曜日だけ色分け*/
	text-align: center;
	background: #000;
	color:#fff;
}
article > ul#week li:nth-child(2){/*日曜日は赤く*/
	background: #A40002;	
}
article > ul#week li:nth-child(8){/*土曜日は青く*/
	background: #1424A1;	
}
article > ul.user:hover,article > ul.user:active{ /*マウスオーバー（タブレットだとタップ）したカテゴリを光らせる*/
	background: rgba(255,190,85,0.40);
}
#edit {
	margin-top:2em;
	text-align:center;
}
/*一応footer*/
footer{
	display: block;
	text-align: center;
}

idとclassを付けるのが面倒で、擬似要素を多用してできるだけ付けずにまとめてみました。
既存ページの中に固定ページとして新たにテンプレートを作りたいという場合には当然他の要素に影響するのでPHPの段階でidとclassを振ってあげる必要があります。（そもそも固定ページでこれをやるなら親子カテゴリを作って、親カテゴリに含まれる子カテゴリの中身を配列させなきゃいけないので一部作り直さなきゃいけないのですが…）

ここまでやって、header.php、footer.php、index.php、style.phpをテンプレートフォルダにアップします。

こんな感じになります。毎日カテゴリ名がいて、ちょっとうるさいですよね

当日だけ残して消してしまいましょう。

ついでに今日の内容をより見やすくします。

index.phpに下記のコードを追加します。

index.php

<style>
	.user small {
		display: none;
	}
	.day<?php echo date('Y'.'m'.'d');?> small {
		display: block;
		color: #999;
	}
	.day<?php echo date('Y'.'m'.'d');?>{
		background: rgba(255,190,85,0.40);
	}
</style>

スッキリしました。

ホントはifで今日の日付か判別してtrueのときだけsmallの内容を表示すればいいのですが、SEOがどうのこうの考えなくてもページであると思うので、index.phpの中にCSSを埋め込みました。

「ifってめんどくさいなぁ…」ということでなければ

index.php

<?php foreach($wd as $value): ?>
		<li class="day<?php echo $value ?>">
		<small><?php echo $catv->name; ?></small>

の箇所を下記のように変更して、

index.php

<?php foreach($wd as $value):?>
		<?php if($value == date('Ymd')): ?>
			<li class="today">
			<small><?php echo $catv->name;?></small>
		<?php else: ?>
			<li>
		<?php endif; ?>

style.cssに下記を追記します。

stlye.css

.user .today{
	background: rgba(255,190,85,0.40);
}
.user .today small{
	display: block;
	color: #999;
}

こちらの方が無駄なHTMLが書き出されずオススメです。

シングルページを作る。

ここまでではせっかく書き出したリンクが、クリックしても何も表示できない状態になっています。

メモ的な内容をシングルページとして投稿内容に記載できるようにしましょう。

single.phpを作り、下記の内容にします。

single.php

<?php get_header(); ?>
<article>
	<section>
		<div>
			<h1><small><?php the_time( 'Y/m/d' ); ?> <?php $cat = get_the_category(); $cat = $cat[0]; {echo "$cat->cat_name " ;} ?>の予定</small>-<?php the_title(''); ?>の詳細</h1><!--2018/03/26 【カテゴリ名】 の予定-【タイトル】のように出力します。-->
		</div>
		<div>
		<?php if(have_posts()): while(have_posts()): the_post(); ?>
			<?php the_content(); ?>
		<?php endwhile; endif; ?>
		</div>
		<?php edit_post_link('この詳細を編集', '<p id="edit">', '</p>'); //edit_post_link()で現在表示しているシングルページの内容を編集するページにリンクできます。括弧内に記入することで書き出し形式を選択できます。 ?>
		<a class="center button back" href="<?php echo home_url(); ?>">予定表に戻る</a>
	</section>	
</article>
<?php get_footer(); ?>
</body>
</html>

シングルページもstyle.cssに追加すれば整える事ができます。

お好みで変えてみてください。