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

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

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

記事の個別ページを作成

index.phpを編集する

  • 基本構造の入力
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
</body>
</html>

WordPressのテンプレートタグ

<?php tag( parameter ); ?>
記事タイトルを表示
<?php the_title(); ?>
記事本文を表示
<?php the_content(); ?>


これだけだと、どの記事を表示するかの指定がないため、表示されません。


ループ(繰り返し)

  • 記事があれば(条件)、タイトルと記事本文を表示(あるだけ繰り返し)
<?php if(have_posts()): while(have_posts()): the_post(); ?>

<?php the_title(); ?>
<?php the_content(); ?>

<?php endwhile; endif; ?>


記事タイトルをマークアップする

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

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

<?php endwhile; endif; ?>
ページを区別できるようにする
  • ページを区別するクラス名に加えて、閲覧者がログイン中かどうかを示すものや、プラグインが使用するクラス名などを出力します
<body <?php body_class(); ?>>
記事を区別できるようにする
<article <?php post_class(); ?>>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</article>

記事のデザインを指定する

  • 「style.css」を編集する
スタイルシートを適用する
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
CSSの記述
  • 本来は、resetから記述しますが、今回はテキストにそって記述します
@charset "UTF-8";

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

body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #333;
}

/* 記事 */
article h1 {
  margin: 0;
  font-size: 32px;
  font-weight: normal;
}