#WordPressの方で用意されたテーマをつかうのではなくテーマを最初から作る。

##オリジナルテーマを作成

###準備

####必要なフォルダを準備
xampp/htdocs/blog/wp-content/themes
の中にフォルダを作成「my_theme」

「my_theme」の中に
「index.php」と「style.css」のファイルを作成する。

WordPress側の「外観」→「テーマ」の中に
👇が作成される。

####「style.css」に情報を記述する
👇を記述すると管理画面からテーマを選べるようになる。

/*
Theme Name:JomaBLOG
Description:仮のブログです
Author:作者の名前
*/

セーブして
WordPress側の「外観」→「テーマ」を確認すると
👇「my_theme」→「JomaBLOG」に変更される。

テーマの詳細をクリックすると先ほどCSSで記載した内容が表示される。

自分で作成したテーマに画像を表示させたいときは
「my_theme」のフォルダの直下に
ファイル名を「screenshot.png」にして画像ファイルを入れる。

##トップページ index.php を作成する
###ブログのタイトルと説明を表示させる

<body>
<h1><?php bloginfo('title'); ?></h1>
<p><?php bloginfo('description'); ?></p>

</body>

出力すると

👆はデータベースに記載されている。
変更するにはWordPressの「設定」→「一般」の
「サイトタイトル」「キャッチフレーズ」をかきかえ変更して保存すれば変わる。
👇

##記事の一覧を表示させる
WordPressの投稿で３つほど仮の記事を作成する。

####データベースを確認してみる
Navicat Liteの「blog」をダブルクリックする。
「テーブル」→「wp_posts」をクリックすると
投稿された一覧が表示される。
これでデータベースに保存されていることが確認できる。

###データベースの中に入ったのを表示させる
####投稿のタイトルを表示させる

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

<?php endwhile; ?>

👆意味は「記事を一つ一つデータベースからとってきて回す」
タイトルだけを表示させる。
👇出力させると

👆先ほど投稿で作成した記事のタイトルが表示される。

####記事のコンテンツ部分を表示
記事の内容と画像を表示させる。
👇

<?php the_content(); ?>

####タイトルにリンクを張る

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

####スタイルシート「style.css」を適用させる

「テーマフォルダまでのパス」を出力する関数使用する
👇

<?php echo get_template_directory_uri(); ?>

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">

👆出力させるとCSSが適用される。

####画像を表示させる

xampp/htdocs/blog/wp-content/themes/my_theme/images
の中に表示させたい画像を入れる。

<img src="<?php echo get_template_directory_uri(); ?>/images/back.png" alt="画像です。">

single.php（個別ページ）を作成

single.phpを作成することで別ページが作成される。
個別ページのバックの色を変えてわかりやすくする。

single.php のbodyにidをいれて style.cssで色をつける。

更に、個別ページからトップページに戻れるようにリンクを張る。

####CSSでレイアウトを整える。

####サムネイル（アイキャッチ画像）機能を追加

新規にfunctions.phpを作成し👇のように記述する。

<?php
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(200,200,true); 
 ?>

WordPressに様々な機能が追加できる。👆の例はサムネールが
使えるようにしてサイズを200pxにし設定する。
設定すると、投稿一覧の編集で「アイキャッチ画像」が追加される。

####記事の概要を表示させる。

<?php the_excerpt(); ?>

👆は記事の概要を表示させることができる。

####サムネールを表示させる

<?php the_excerpt(); ?>

👆サムネールを表示させることができる。

※この段階ではサムネール（画像）は表示されない。

WordPress側で先ほどfunctions.phpで追加した機能を設定する。
投稿一覧の編集をクリックすると「アイキャッチ画像」が追加させれていることが確認できる。
アイキャッチ画像を設定する。

##ここまでのソースコード
👇index.php

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body>
  <div id="wrapper">
    <h1><?php bloginfo('title'); ?></h1>
    <p><?php bloginfo('description'); ?></p>

    <img src="<?php echo get_template_directory_uri(); ?>/images/back.png" alt="画像です。">

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

      <div class="section">
        <div class="image">
          <?php the_post_thumbnail(); ?>
        </div>
        <div class="desc">
          <h2>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>   
          </h2>
          <?php the_excerpt(); ?>
        </div>
      </div>
    <?php endwhile; ?>
  </div>
</body>
</html>

👇single.php（個別ページ）

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body id="single">
<h1>
  <a href="<?php echo home_url(); ?>"><?php bloginfo('title'); ?></a>
</h1>
<p><?php bloginfo('description'); ?></p>

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

  <?php the_content(); ?>


<?php endwhile; ?>

</body>
</html>

👇function.php（機能追加）

<?php
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(400,400,true); 
 ?>

👇style.css

body {
  background: url("images/background.gif");
}
body#single {
  background: #9999ff;
}
#wrapper {
  width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 20px;
}
.section {
  display: flex;
}
.image {
  flex: 4;
}
.desc {
  flex: 6;
}

##出力結果