記事タイトルと本文

関数

[ループ]：記事ごとにループ内に記述した処理を実行

<?php if(have_posts()): while(have_posts()): the_post(); ?>〜<?php endwhile; endif; ?>

記事のタイトルを出力

<?php the_title(); ?>

記事の本文を出力

<?php the_content(); ?>

記事の個別ページのURLを出力

<?php the_permalink(); ?>

記事のタイトルを記述

h2を、最大10件の記事を繰り返し表示する：[ループ]

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; endif; ?>

記事の個別ページへのリンクを設定

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php endwhile; endif; ?>

記事の本文を記述

<?php if(have_posts()): while(have_posts()): the_post(); ?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>

<?php endwhile; endif; ?>

スタイルを適用するためのグループ化

<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>

<?php endwhile; endif; ?>

記事全体をグループ化

<div id="content">

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>

</div>

ヘッダーとコンテンツ全体をグループ化

<!-- ▼#container -->
<div id="container">

<!-- ▼#header -->
<div id="header">
<h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>
</div><!-- ▲#header -->

<!-- ▼#content -->
<div id="content">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>
</div><!-- ▲#content -->

</div>

記事のスタイルを記述

全体の横幅

コンテナ

/* #container */
#container {
  width: 760px;
  margin: auto;
}

記事の指定

各記事を枠で囲む

/* .post */
.post {
  margin: 0 0 20px 0;
  padding: 15px;
  border: solid 1px #0c8bcd;
}

記事のタイトルを指定

.post h2 {
  font-size: 0.875em;
  padding: 10px;
  background-color: #a3d2f2;
}
.post h2 a {
  color: #000;
  text-decoration: none;
}

記事の本文を指定

.post p {
  font-size: 0.875em;
  line-height: 1.6;
  margin: 10px 0 0 0;
}