php20 各パーツのグループ化

今後スタイルシートでデザインしやすいよう、各パーツをdivタグでまとめていきましょう。

ただし、ここではスタイルシートのデザイン自体の記述は省略します。

 

記事全体をまとめる

<div id=”content”>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
~中略~
<?php endif; ?>
</div>

数記事をまとめて「記事全体」としてdivタグで囲みます。

また、idを「content(コンテンツ)」としておきましょう。

 

body内をまとめる

今度は、body内を大きく囲んでまとめましょう。

<body>
<!– コンテナ –>
<div id=”container”>
<!– ヘッダー部分 –>
~中略~
<?php endif; ?>
</div>
</div>
</body>

bodyタグ内を大きく「container(コンテナ)」としてdivタグで囲みます。

 

ここまでの記述確認

index.php

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”<?php bloginfo(‘charset’); ?>”>
<title>
<?php bloginfo(‘name’); ?>
</title>
<!– スタイルシート呼び出し –>
<link href=”<?php echo get_stylesheet_uri(); ?>” rel=”stylesheet” type=”text/css”>
</head>
<body>
<!– コンテナ –>
<div id=”container”>
<!– ヘッダー部分 –>
<div id=”header”>
<h1>
<a href=”<?php bloginfo(‘url’); ?>”>
<?php bloginfo(‘name’); ?></a>
</h1>
<h2>
<?php bloginfo(‘description’); ?>
</h2>
</div>
<!– コンテンツ部分 –>
<div id=”content”>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<div class=”post”>
<h3>
<a href=”<?php the_permalink(); ?>”>
<?php the_title(); ?>
</a>
</h3>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else: ?>
<h2>記事がありません</h2>
<?php endif; ?>
</div>
</div>
</body>
</html>