読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

記事の個別ページを作成

記事の個別ページを作成

  • single.phpテンプレートを編集し、記事の個別ページを作成します
ページの構成要素
  • ページの構成要素を用意します
  • HTML5では、ISO8601形式のデータも必要になりますので、パラメータを「c」と指定したものも用意します


《single.php

<?php post_class(); ?>

<?php the_title(); ?>

<?php echo get_the_date( 'c' ); ?>
<?php echo get_the_date(); ?>

<?php the_content(); ?>
ループ処理の記述
  • WordPressは、URLの指示に従ってデータベースからデータを読み出します
  • この処理は「メインクエリ」と呼ばれ、WordPressがページを生成するときの根幹になります
  • 個別ページを表示しようとした場合、指示された1つの記事に関するデータが読み込まれ、「$wp_query」と「$post」にセットされます
  • このとき「$wp_query」には、記事の総数などの付加情報もセットされます
  • ループ処理では、「$wp_query」に記事データがあるかどうかチェックし、ある場合は取り出して「$post」にセットします
  • 同時に「$pages」といった変数もセットされます
  • テンプレートタグや関数は、こうした「$post」「$pages」などの値を参照し、必要なデータを抜き出して出力をおこないます
<?php if( have_posts() ): while( have_posts() ): the_post(); ?>


<?php post_class(); ?>

<?php the_title(); ?>

<?php echo get_the_date( 'c' ); ?>
<?php echo get_the_date(); ?>

<?php the_content(); ?>


<?php endwhile; endif; ?>
HTMLでマークアップします
  • テンプレートタグや関数で出力する内容にあわせてマークアップします
  • 投稿日を time要素でマークアップ
  • datetime属性では、ISO8601形式の投稿日の値を指定します
  • 「get_the_date(); 」が出力する投稿日の形式は、「設定→一般」の「日付のフォーマット」で指定します
<?php if( have_posts() ): while( have_posts() ): the_post(); ?>

<article <?php post_class(); ?>>

<h1><?php the_title(); ?></h1>

<div class="postinfo">
<time datetime="<?php echo get_the_date( 'c' ); ?>">
<?php echo get_the_date(); ?>
</time>
</div>

<?php the_content(); ?>

</article>

<?php endwhile; endif; ?>
HTMLの基本的な設定を追加します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title>ページタイトル</title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>
記事のデザインを指定
@charset "UTF-8";

/*
Theme Name: MY THEME
Author: Web Studio
Description: This is my original theme.
Version: 1.0
*/

/* reset
---------------------------------------*/
html,body,h1,h2,h3,h4,p,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }
a { text-decoration: none; }
img {
  border: none;
  vertical-align: bottom;
}

/* body
---------------------------------------*/
body {
  font-size: 16px;
  background-color: #edede3;
}

/* link
---------------------------------------*/
a { color: #b77d3c; }
a:hover { color: #f80; }

/* font
---------------------------------------*/
h1 { font-size: 30px; }
p { line-height: 1.5; }

/* article
---------------------------------------*/
article {
  width: 900px;
  margin: 10px auto 15px auto;
  padding: 30px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px #aaa;
  border: solid 1px #aaa;
  border-radius: 10px;
  overflow: hidden;
}

/* Additional information
---------------------------------------*/
.postinfo {
  margin: 20px 0 30px 0;
  padding: 12px 0 14px 0;
  border-top: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}
.postinfo time {
  font-size: 14px;
  color: #fff;
  background-color: #bdbc8f;
  border-radius: 6px;
  padding: 6px 20px;
}



画像の配置とキャプション

/* images
---------------------------------------*/
.aligncenter {
  display: block;
  margin: 0 auto 16px auto;
  text-align: center;
}
.alignleft {
  float: left;
  margin: 0 20px 16px 0;
}
.alignright {
  float: right;
  margin: 0 0 16px 20px;
}
.wp-caption-text {
  text-align: center;
  margin: 8px;
  color: #666;
}
article img, .wp-caption {
  max-width: 100%;
  height: auto;
}