# WordPress講義2回目
## 環境構築
先週作成したテーマを利用します。
先週の資料は[こちら](https://hackmd.io/@gY8gdngQSbmAZ9WDXUEF6g/B12bMWoT3)

**先週時の授業を受けれていない方は[ここから](https://drive.google.com/drive/folders/1QB82sB5seoEeswrWgMYH94aKQcl3cSjb?usp=sharing)先週作成したWPテーマをダウンロードして続きから作業をしてください。
Local Sites\sample\app\public\wp-content\themes
の階層にダウンロードしたmyblogというフォルダを配置してVsCodeで開いてください。**

## 基本のテンプレートファイルとテンプレート階層

| テンプレートファイル名 | 概要 |
| -------- | -------- |
| front-page.php | サイトのトップページ |
| single.php | 投稿の記事ページ |
| page.php | 固定ページを表示 |
| category.php | カテゴリーページを表示 |
| search.php | 検索結果ページを表示 |
| archive.php | 記事一覧を表示 |
| 404.php | 404エラーページを表示 |

テンプレートファイルはテンプレート階層の優先順位の順番で利用されます。
その表は先週の授業資料にあります。

## WordPressループの基本構造について
記事の一覧表示の為にはWordPressループを利用します。

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

    <?php while( have_posts() ):  the_post()?>
    ここに投稿された記事の情報がループ表示されます（一覧）
    <?php endwhile; ?>

<?php else:?>

    投稿がみつかりませんでした。

<?php endif;?>

### 1. ループの中で利用できる主要なテンプレートタグ

| テンプレートタグ | 情報 |
| -------- | -------- |
| the_title | 現在の投稿や固定ページのタイトルを表示 |
| the_content | 現在の投稿の本文を出力します。 |
| the_excerpt | 投稿記事の抜粋を出力します。 |
| the_date | 現在の投稿や固定ページの公開（作成）日を表示します。 |
| the_permalink | 現在ループの中で処理されている投稿のパーマリンクの URL（アドレス）を表示（出力）します。 |
| the_id | 現在の投稿の ID を表示します。ループ内で使用します。 |
| the_category | 現在の記事が属するカテゴリーへのリンク（一覧）を表示します。 |
| the_tags | 現在の記事に付けられたタグのアーカイブページへのリンクを表示します。 タグが付けられていない場合は何も表示しません。
|

より詳しいテンプレートタグ一覧
https://www.webdesignleaves.com/pr/wp/wp_func_loop.html

### 2. index.phpの19行目から72行目までを削除して以下のループに変更する

<?php if( have_posts()):?>
    <?php while( have_posts() ):  the_post()?>
        <!-- Post preview-->
        <div class="post-preview">
            <a href="<?php the_permalink(); ?>">
                <h2 class="post-title"><?php the_title(); ?></h2>
                <h3 class="post-subtitle"><?php the_excerpt(); ?></h3>
            </a>
            <p class="post-meta">
                Posted by
                <a href="#!">Start Bootstrap</a>
                <?php the_date();?>
            </p>
        </div>
        <!-- Divider-->
    <hr class="my-4" />
    <?php endwhile; ?>
<?php else:?>
投稿がみつかりませんでした。
<?php endif;?>

## 投稿の記事ページ（single.php）を作成
### 1. post.htmlファイルの名前をsingle.phpに変更
### 2. 37行目より上を削除してヘッダーを呼び出す

<?php get_header(); ?>
<!-- Page Header-->
<header class="masthead" style="background-image: url('assets/img/about-bg.jpg')">
以下省略

### 3. footerも同様でfooterタグ以下を削除してフッターを呼び出す

上記省略
</main>

<?php get_footer(); ?> 

### 4. 記事ページでのループを作成する（１件の投稿の情報）

<?php get_header(); ?>
    <?php while( have_posts() ):  the_post()?>
        <!-- Page Header-->
        以下省略
        上記省略
        </article>
    <?php endwhile; ?>
<?php get_footer(); ?>

### 5. 記事のループの中身を完成させる。（single.php完成系）

<?php get_header(); ?>
    <?php while( have_posts() ):  the_post()?>
    <!-- Page Header-->
    <header class="masthead" style="background-image: url('assets/img/post-bg.jpg')">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="post-heading">
                        <h1><?php the_title(); ?></h1>
                        <span class="meta">
                            Posted by
                            <?php the_author(); ?>
                            on <?php the_date(); ?>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Post Content-->
    <article class="mb-4">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <?php the_content(); ?>
                </div>
            </div>
        </div>
    </article>
    <?php endwhile; ?>
<?php get_footer(); ?>

## サムネイル機能の実装
### 1. functions.phpを作成して以下の内容を記述

<?php
add_action('init', function(){
    add_theme_support('post-thumbnails');
});

＊これはテーマ上にサムネイル機能を利用するという命令です

### 2. single.phpでサムネイルを取得する

<?php
    $id = get_post_thumbnail_id();
    $img = wp_get_attachment_image_src($id,'large');
    ?>
    <header class="masthead" style="background-image: url('<?php echo $img[0]; ?>')">