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

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

記事の個別ページを作成

WordPress基礎

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(); ?>

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; ?>

h1を表示してみる

  • 投稿記事があったら、h1を表示する(1回のみ)
<?php if( have_posts() ): ?>

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

<?php endif; ?>


《プレビュー》

f:id:webmaster-web:20160707110048p:plain

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

<?php the_title(); ?>

<?php endwhile; ?>
  • while → 処理を繰り返す構文
  • have_posts() → 次の記事があるか調べる
  • the_post() → 次の記事を取得する

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

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

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

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


《プレビュー》

f:id:webmaster-web:20160707114332p:plain


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

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

<?php endwhile; endif; ?>
記事本文を表示
<?php the_content(); ?>


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

記事内容を繰り返し表示する

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

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

<?php endwhile; endif; ?>


《プレビュー》

f:id:webmaster-web:20160707133120p:plain

ページを区別できるようにする
  • ページを区別するクラス名に加えて、閲覧者がログイン中かどうかを示すものや、プラグインが使用するクラス名などを出力します
<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(); ?>">

別のスタイルシートを適用する

  • get stylesheet directory uri()
  • この関数は、適切な形式のURIを返します
  • つまり、(http:// or https:// 等の完全な形の)ウェブアドレスです
  • リンクや、追加スタイルシートの参照、あるいは最も良く使うであろう画像の参照に使用するのに適しています
  • 子テーマを使用している場合、子テーマのディレクトリの URI を返します
  • 親テーマのディレクトリを取得するには get_template_directory_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;
}


《プレビュー》

f:id:webmaster-web:20160707165812p:plain