求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

記事の一覧ページを作成 - カスタムテーマ

index.phpを編集する

f:id:web-0220:20190407004639j:plain

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

WordPressのテンプレートタグ

https://cdn-ak.f.st-hatena.com/images/fotolife/w/wordpress-cms/20111229/20111229093408.jpg

記事タイトルを表示
<?php the_title(); ?>

WordPressのif-else文

  • 書き方としては、以下の4通りがありますが、いずれでも処理は同じになります
<?php
  if(条件式) {
    条件式がTRUE(当てはまる)の場合に実行する処理(PHPのコードを書く)
  } else {
    条件式がFALSE(当てはまらない)の場合に実行する処理(PHPのコードを書く)
  }
?>
<?php if(条件式) { ?>
  条件式がTRUE(当てはまる)の場合に実行する処理(PHPまたはHTMLのコードを書く)
<?php } else { ?>
  条件式がFALSE(当てはまらない)の場合に実行する処理(PHPまたはHTMLのコードを書く)
<?php } ?>
  • if(条件式)やelseの後は「;」(セミコロン)ではなく「:」(コロン)で、endifの後は「;」(セミコロン)であることに、注意してください
<?php
  if(条件式) :
    条件式がTRUE(当てはまる)の場合に実行する処理(PHPのコードを書く)
  else :
    条件式がFALSE(当てはまらない)の場合に実行する処理(PHPのコードを書く)
  endif;
?>
<?php if(条件式) : ?>
  条件式がTRUE(当てはまる)の場合に実行する処理(PHPまたはHTMLのコードを書く)
<?php else : ?>
  条件式がFALSE(当てはまらない)の場合に実行する処理(PHPまたはHTMLのコードを書く)
<?php endif; ?>
if分のみの場合
<?php if(条件式): ?>
  処理
<?php endif; ?>
記事タイトルを表示してみる

投稿記事があったら、1つ目の記事タイトルのみ表示する

<?php if( have_posts() ): ?>

<?php the_title(); ?>

<?php endif; ?>

《プレビュー》

https://cdn-ak.f.st-hatena.com/images/fotolife/w/webmaster-web/20160707/20160707110048.png

WordPressのループ(繰り返し)
  • 記事があれば(条件)、タイトルと記事本文を表示(あるだけ繰り返し)
  • while → 処理を繰り返す構文
  • have_posts() → 次の記事があるか調べる
  • the_post() → 次の記事を取得する
<?php while(have_posts()): have_posts(); ?>

<?php the_title(); ?>

<?php endwhile; ?>
記事タイトルをマークアップする
<?php if(have_posts()): ?>
  <?php while(have_posts()): the_post(); ?>

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

  <?php endwhile; ?>
<?php endif; ?>


《プレビュー》

f:id:web-0220:20190407010740j:plain

  • 記述をまとめると
<?php if(have_posts()): while(have_posts()): the_post(); ?>

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

<?php endwhile; endif; ?>
記事本文を表示
<?php the_content(); ?>
  • これだけだと、どの記事を表示するかの指定がないため、表示されません。
記事内容を繰り返し表示する
<?php if(have_posts()): while(have_posts()): the_post(); ?>

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

<?php endwhile; endif; ?>

《プレビュー》

f:id:web-0220:20190407011344j:plain

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