【WordPress】「krc-cast-manager」で作るキャスト詳細画面のスケジュール表をレスポンシブにしてみた

2021年3月23日2021年6月19日Wordpress,開発

おはようございます。

久々の krc-cast-manager プラグインネタ。

krc-cast-manager公式で紹介されているキャスト詳細画面に表示するスケジュール表が、

スマホ表示した際に狭まってレイアウト調整が難しかったので、スマホ表示に最適化してみました。

krc-cast-manager については次の記事を見てみてください。

【Wordpress】Lightningテーマで在籍キャスト管理プラグイン「krc-cast-manager」を使ってみる

1. 対応前後
2. プログラム
- 2.1. php
3. css
4. まとめ

対応前後

元々のサンプルは dl dd dt 要素で構成されたスケジュール表で、スマホ表示した際に次のような表示になってしまいます。

なんとか、５日分くらいなら表示ができますが、これ以上表示するとスケジュールも折り返してちょっと見にくくなってしまうため（上図もヘッダ―折り返してますが・・）、テーブルに変更してCSSで行列を入れ替えるという表示にしてみました。

プログラム

php

function.php

/**
 * 個人ページに表示するスケジュール
 *
 */
function singlecalendar_table($id)
{
	$week = array(
		"日",
		"月",
		"火",
		"水",
		"木",
		"金",
		"土"
	);
	$today = strtotime(date("Y-m-d", strtotime("+3 hour")));
	echo '<div class="krc_calendar clearfix">';
	$table = '<table class="sch-box">';
	$thead = '<thead><tr>';
	$tbody = '<tbody><tr>';
	for ($i = 0;$i <= 6;$i++)
	{
		$yy = date('w', strtotime('+' . $i . ' day'));
		$y = date('D', strtotime('+' . $i . ' day', $today));
		if (date('Y-m-d', strtotime('+' . $i . ' day', $today)) == $day) $y = 'target';
				
		$thead .= '<th>' . strtoupper(date('n/j(' . $week[$yy] . ')', strtotime('+' . $i . ' day', $today))) . '</th>';
		if ($casttime = today_schedule($id, date('Y-m-d', strtotime('+' . $i . ' day', $today))))
		{
			$tbody .= '<td>';
			if ($casttime['starttime'] !== '0' and $casttime['endtime'] !== '0')
			{
				if ($casttime['starttime'] !== '0') {
					$tbody .= esc_html($casttime['starttime']);
				}
				$tbody .= ' ～ ';
				if ($casttime['endtime'] !== '0') 
				{
					$tbody .= esc_html($casttime['endtime']);
				}
			}
			else 
			{
				$tbody .= 'お問合せ下さい';
			}
			$tbody .= '</td>';
		}
		else
		{
			$tbody .= '<td>-</td>';
		}
	}
	$thead .= '</tr></thead>';
	$tbody .= '</tr></tbody>';
	$table .= $thead . $tbody . '</table>';
	
	echo $table . '</div>';
}

/**

* 個人ページに表示するスケジュール

functionsinglecalendar_table($id)

{

$week=array(

"日",

"月",

"火",

"水",

"木",

"金",

"土"

);

$today=strtotime(date("Y-m-d",strtotime("+3 hour")));

echo'<div class="krc_calendar clearfix">';

$table='<table class="sch-box">';

$thead='<thead><tr>';

$tbody='<tbody><tr>';

for($i=0;$i<=6;$i++)

{

$yy=date('w',strtotime('+'.$i.' day'));

$y=date('D',strtotime('+'.$i.' day',$today));

if(date('Y-m-d',strtotime('+'.$i.' day',$today))==$day)$y='target';

$thead.='<th>'.strtoupper(date('n/j('.$week[$yy].')',strtotime('+'.$i.' day',$today))).'</th>';

if($casttime=today_schedule($id,date('Y-m-d',strtotime('+'.$i.' day',$today))))

{

$tbody.='<td>';

if($casttime['starttime']!=='0'and$casttime['endtime']!=='0')

{

if($casttime['starttime']!=='0'){

$tbody.=esc_html($casttime['starttime']);

}

$tbody.=' ～ ';

if($casttime['endtime']!=='0')

{

$tbody.=esc_html($casttime['endtime']);

}

else

{

$tbody.='お問合せ下さい';

}

$tbody.='</td>';

}

else

{

$tbody.='<td>-</td>';

}

$thead.='</tr></thead>';

$tbody.='</tr></tbody>';

$table.=$thead.$tbody.'</table>';

echo$table.'</div>';

}

スケジュール表を出力する関数をコピーし、テーブルを出力するように修正。

content-cast.php（抜粋）

	<div class="cast-schedule">
		<h2 class="sub-section">スケジュール</h2>
		<?php singlecalendar_table(get_the_ID());?>
		
		<div class="wp-block-button is-style-fill">
			<a href="/schedule" class="wp-block-button__link has-white-color has-text-color has-background">出勤情報はこちら</a>
		</div>
	</div>

<h2 class="sub-section">スケジュール</h2>

<?phpsinglecalendar_table(get_the_ID());?>

<ahref="/schedule"class="wp-block-button__link has-white-color has-text-color has-background">出勤情報はこちら</a>

</div>

スケジュール表呼び出しを追加した関数に変更。

css

テーブル用に新しくルールを追加

@media screen and (max-width:480px) {

	/**
	 * キャスト詳細のスケジュールテーブル
	 * 行列を入れ替える
	 */
	.sch-box {
		width: 100%;
	}
	.sch-box tr {
		display: block;
		float: left;
	}
	.sch-box tr td,
	.sch-box tr th {
		border-left: none;
		display: block;
		height: 50px;
	}
	.sch-box thead {
		display: block;
		float: left;
		width: 30%;
	}
	.sch-box thead tr {
		width: 100%;
	}
	.sch-box tbody {
		display: block;
		float: left;
		width: 70%;
	}
	.sch-box tbody tr {
		width: 100%;
	}
	.sch-box tr td + td {
		border-left: none;
	}
	.sch-box tbody td:last-child {
		border-bottom: solid 1px #ccc;
	}
}

@media screen and (max-width:480px) {

/**

* キャスト詳細のスケジュールテーブル

* 行列を入れ替える

.sch-box {

width:100%;

}

.sch-box tr {

display:block;

float:left;

}

.sch-box tr td,

.sch-box tr th {

border-left:none;

display:block;

height:50px;

}

.sch-box thead {

display:block;

float:left;

width:30%;

}

.sch-box thead tr {

width:100%;

}

.sch-box tbody {

display:block;

float:left;

width:70%;

}

.sch-box tbody tr {

width:100%;

}

.sch-box tr td + td {

border-left:none;

}

.sch-box tbody td:last-child {

border-bottom:solid1px#ccc;

}

スマホサイズの時に行列を入れ替えるようにする。

まとめ

他にもいい方法はあるかもしれませんが、ひとまずこれでPC、スマホのどちらでもいい感じに表示することができました。

何かのお役に立てれば。

ではでは。

サイトはこちら

2021年3月23日2021年6月19日Wordpress,開発WordPress,WordPressプラグイン

Posted by doradora

コロナ渦でDIYを始めた人におすすめのDIYデザインサイト「MAKING」

まだまだ若くても終活しておけば憂いなし！亡くなったことをフォロワーに知らせてくれる「desubot」

コメント一覧

西山宏紀より:
2022年1月5日 1:20 AM
サイト拝見して勉強させていただいております。
一つ質問させていただきたいのですが、キャストマネジャーのプラグイン導入してのサイト設営を
記載されていたものをコピーさせて頂き行ってみたのですが、
キャスト一覧と、そこからの個別ページ、スケジュールページの表示ができなくて
どうして良いのかわからず連絡させて頂きました。
エラーでFatal error: Uncaught Error: Call to undefined function lightning_get_page_for_posts() in /〜〜/archive-cast.php on line 69
となってしまい、関数の定義をどこで行えば良いのかわからず混乱しております。
年始早々で大変恐縮なのですが、ご教授いただけたら幸いです。
ぜひよろしくお願い致します。
返信
- doradoraより:
  2022年1月5日 9:20 AM
  西山様
  ブログを読んでいただきありがとうございます。
  ご質問の件、メールにてご回答差し上げましたのでご確認ください。
  返信