今回以降はスタイルシートのデザインに関しての記述は少なめにします。
できるだけphpの記述に特化して覚えやすいよう、ほかの記述は控えめに説明します。(デザイン酷い!とかなしでお願いします)
また、特に説明や前置きの無い場合は「index.php」の編集の記述になります。
記事タイトルの表示
wordpressは基本的にはブログシステムなので、時間軸に沿って新しい記事から順に表示するように編集していきましょう。
</div>
<!– コンテンツ部分 –>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php endwhile; ?>
<?php else: ?>
<h2>記事がありません</h2>
<?php endif; ?>
</body>
【上記記述の説明】
if = もしも記事があれば、以下の指示に従ってください。
while = 次の処理を、記事がある分だけ繰り返してください。
the_post = 次の記事にカウントアップ(+1)してください。(whileでループ作業しているので同じ記事を繰り返し表示しないよう、「次の記事へ」とする部分)
the_title = 記事タイトルを表示してください。
endwhile = 記事がもうない場合は、この下の記述に進んでください。(ある場合はwhileのある記述部分に繰り返し戻ります。)
else = if文が当てはまらない場合(そもそも記事が1件も無い場合)は以下の指示に従ってください。(h2タグで、記事がありません、と表示する)
endif = if文はここで終わります。この下の記述に進んでください。
※上記記述での注意点※
ifやwhile、elseなどの記述の後には「 : 」コロンをつけること。
そのほかの記述後には「 ; 」セミコロンをつけること。
ここまでの記述確認
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=”header”>
<h1>
<a href=”<?php bloginfo(‘url’); ?>”>
<?php bloginfo(‘name’); ?></a>
</h1>
<h2>
<?php bloginfo(‘description’); ?>
</h2>
</div>
<!– コンテンツ部分 –>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php endwhile; ?>
<?php else: ?>
<h2>記事がありません</h2>
<?php endif; ?>
</body>
</html>
style.css
/*
Theme Name: sample
Theme URI: http://www.hogehoge.com
Author: oreore
Author URI: http://www.hogehogeblog.com
Description: iketerudesyo
Version: 1.0
Tags: black, one-column, two-columns, custom-header, custom-menu
*/
/* ————— ヘッダー ————— */
div#header{
background-color: #66ccff;
padding-top; 40px;
padding-bottom: 100px;
}
div#header h1{
font-size: 2em;
margin: 0 20px;
}
div#header h1 a{
text-decoration: none;
}
div#header h2{
font-size: 1em;
margin: 10px 20px 0
}