概要・目次はこちら

ベースづくり

整理のために、ひとまず必要なページなどを書き出してみます。
いわゆるサイトマップ。

index.html
⇃（ボタンクリックで遷移）
result.php（ランダムでペンギンの画像表示）

サイトマップ作るほどでもないのでこれで

Javascriptとか組み合わせればページ遷移せずに（index.html内で）画像表示までできるんだろうけど、とりあえずシンプルにこの形で…

コーディング

サイトマップが出来たらページデザイン、
デザインが出来たらコーディングしていきます。
（複雑なものだとワイヤー作ったほうがいいと思います…）

ひとまずphp無しに作りますが、作りながらどこを動的に処理したいか考えつつコーディングします。

画像、画像のalt、画像のタイトル、説明文が変わっていくな～～とか思いながらコーディングします

phpを実装する

ベースが出来たら、phpで動きを実装していきます。

<body>
	<div class="wrap">
		<header class="header">Qiita</header>
		<article class="main">
			<h1 class="main-ttl">Random Penguin</h1>
			<p class="main-img"><img src="img/01.jpg" alt="タイトル01"></p>
			<p class="main-img-ttl">タイトル01</p>
			<p class="main-img-caption">説明文01</p>
		</article>
		<footer class="footer">&copy; 2019 Random Penguin</footer>
	</div>
</body>

main-img、main-img-ttl、main-img-captionの部分をまとめて変えたいので、配列でセットを作ります。

画像・タイトル・説明文を設定する

<?php
	$set = array(
		array( //[0]
			'title' => 'タイトル01', 
			'img' => '01', 
			'caption' => '説明文01'
		),
		array( //[1]
			'title' => 'タイトル02', 
			'img' => '02', 
			'caption' => '説明文02'
		),
		array( //[2]
			'title' => 'タイトル03', 
			'img' => '03', 
			'caption' => '説明文03'
		),
	);

	echo 'タイトル：'.$set[0]['title'].'<br>';
	echo '画像：'.$set[0]['img'].'<br>';
	echo '説明文：'.$set[0]['caption'];
?>

//実行結果
タイトル：タイトル01
画像：01
説明：キャプション01

$set[0]の数字を変えればその中にセットしたtitleなどが表示されます。

ランダムな数字を発生させる

rand関数を使います。

//0～2の数字からランダムな数字を$randomに入れる
$random = rand(0, count($set)-1);
//$set[0～2]を$resultに入れる
$result = $set[$random];

rand(0, 2)でもいいけど、$setの中身が増えても対応させていきたいので、$setの中身をcountで数えて-1します。
あとは$result['title']などで表示させるだけ。

htmlに組み込む

<?php
	$set = array(
		array( //[0]
			'title' => 'タイトル01', 
			'img' => '01', 
			'caption' => '説明文01'
		),
		array( //[1]
			'title' => 'タイトル02', 
			'img' => '02', 
			'caption' => '説明文02'
		),
		array( //[2]
			'title' => 'タイトル03', 
			'img' => '03', 
			'caption' => '説明文03'
		),
	);

	$random = rand(0, count($set)-1);
	$result = $set[$random];
?>
<body>
	<div class="wrap">
		<header class="header">Qiita</header>
		<article class="main">
			<h1 class="main-ttl">Random Penguin</h1>
			<p class="main-img"><?php echo '<img src="img/'.$result['img'].'.jpg" alt="'.$result['title'].'">' ;?></p>
			<p class="main-img-ttl"><?php echo $result['title']; ?></p>
			<p class="main-img-caption"><?php echo $result['caption']; ?></p>
		</article>
		<footer class="footer">&copy; 2019 Random Penguin</footer>
	</div>
</body>

結果ページで更新かけるとまたランダムに変わってしまったり、いろいろ改善すべき点はあるけども、
やりたいことはなんとなくできたのでオッケーとします。

テストページ