初心者が月10万稼ぐ為の記録７WordPressでブログサイト作成（仮）

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

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

###準備

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

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

WordPress側の「外観」→「テーマ」の中に
👇が作成される。
![wp_blog_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/5a460b2b-ba51-4d4f-337f-1f70a3098020.png)

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

```css
/*
Theme Name:JomaBLOG
Description:仮のブログです
Author:作者の名前
*/
```
セーブして
WordPress側の「外観」→「テーマ」を確認すると
👇「my_theme」→「JomaBLOG」に変更される。
![wp_blog_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/b1fc9fd2-cedc-701f-4bd7-b86d191b39c5.png)

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

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

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

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

</body>
```
出力すると
![wp_blog_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/70f0847c-2281-1dfa-4b21-9cdd10771c3b.png)

👆はデータベースに記載されている。
変更するにはWordPressの「設定」→「一般」の
「サイトタイトル」「キャッチフレーズ」をかきかえ変更して保存すれば変わる。
👇
![wp_blog_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/3a38906f-1c7e-dc08-a6f9-ade0c225e99b.png)

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

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

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

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

<?php endwhile; ?>
```
👆意味は「記事を一つ一つデータベースからとってきて回す」
タイトルだけを表示させる。
👇出力させると
![wp_blog_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/01359c8c-c376-522f-9ff8-05fa64771e2e.png)
👆先ほど投稿で作成した記事のタイトルが表示される。

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

```php
<?php the_content(); ?>
```
####タイトルにリンクを張る

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

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

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

```php
<?php echo get_template_directory_uri(); ?>
```

```php
<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
の中に表示させたい画像を入れる。

```php
<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
<?php
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(200,200,true); 
 ?>
```

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

####記事の概要を表示させる。
```php
<?php the_excerpt(); ?>
```
👆は記事の概要を表示させることができる。

####サムネールを表示させる
```php
<?php the_excerpt(); ?>
```
👆サムネールを表示させることができる。

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

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

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

```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（個別ページ）

```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
<?php
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(400,400,true); 
 ?>
```

👇style.css

```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;
}
```

##出力結果
![wp_blog_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631322/7e8dbca6-7d68-de08-d019-bc16abbc81ac.png)