【HTMLサイトをWordPress化しよう】⑦トップページ編

目次

• index.phpにコピー
• コードの修正
• アイキャッチの有効化
• カテゴリーの登録
• 記事の投稿
• 表示確認

index.phpにコピー

「index.html」の中からヘッダーとフッター以外のコードをindex.phpにコピーします。

    index.php
    
<main>
  <div id="top" class="wrapper">
    <ul class="product-list">
      <li>
        <a href="item1.html">
          <img src="img/item1.jpg" alt="">
          <p>プロダクトタイトルプロダクトタイトル</p>
          <p>&yen;99,999 +tax</p>
        </a>
      </li>
      <li>
        <a href="item2.html">
          <img src="img/item2.jpg" alt="">
          <p>プロダクトタイトルプロダクトタイトル</p>
          <p>&yen;99,999 +tax</p>
        </a>
      </li>
      <li>
        <a href="item3.html">
          <img src="img/item3.jpg" alt="">
          <p>プロダクトタイトルプロダクトタイトル</p>
          <p>&yen;99,999 +tax</p>
        </a>
      </li>
      <li>
        <a href="item4.html">
          <img src="img/item4.jpg" alt="">
          <p>プロダクトタイトルプロダクトタイトル</p>
          <p>&yen;99,999 +tax</p>
        </a>
      </li>
      <li>
        <a href="item5.html">
          <img src="img/item5.jpg" alt="">
          <p>プロダクトタイトルプロダクトタイトル</p>
          <p>&yen;99,999 +tax</p>
        </a>
      </li>
      <li>
        <a href="item6.html">
          <img src="img/item6.jpg" alt="">
          <p>プロダクトタイトルプロダクトタイトル</p>
          <p>&yen;99,999 +tax</p>
        </a>
      </li>
      <li>
        <a href="item7.html">
          <img src="img/item7.jpg" alt="">
          <p>プロダクトタイトルプロダクトタイトル</p>
          <p>&yen;99,999 +tax</p>
        </a>
      </li>
      <li>
        <a href="item8.html">
          <img src="img/item8.jpg" alt="">
          <p>プロダクトタイトルプロダクトタイトル</p>
          <p>&yen;99,999 +tax</p>
        </a>
      </li>
    </ul>
    <a class="link-text" href="products.html">View More</a>
  </div>
</main>
    
  

コードの修正

はりつけたコードを、WordPressの記述に修正していきます。

修正する箇所は下記の通りです。

get_header()

header.phpの読み込みを一番最初に追加

get_footer()

footer.phpの読み込みを一番最後に追加

製品一覧

投稿記事から取得

サイトURL

home_url()で取得

修正後のコードは下記の通りです。

    index.php
    
<?php get_header(); ?>

<main>
  <div id="top" class="wrapper">
    <ul class="product-list">
      <?php
        $args = array(
          'posts_per_page' => 8
        );
      ?>
      <?php $posts = get_posts($args); ?>
      <?php foreach($posts as $post): ?>
        <?php setup_postdata($post); ?>
        <li>
          <a href="<?php the_permalink(); ?>">
            <img src="<?php the_post_thumbnail_url('full'); ?>" alt="">
            <p><?php the_title(); ?></p>
            <p>&yen;<?php echo esc_html(get_post_meta($post->ID, 'price', true)); ?> +tax</p>
          </a>
        </li>
      <?php endforeach; ?>
      <?php wp_reset_postdata(); ?>
    </ul>
    <a class="link-text" href="<?php echo esc_url(home_url('/category/products/')); ?>">View More</a>
  </div>
</main>

<?php get_footer(); ?>
    
  

記事を取得するループ処理の解説です。

      
  $args = array(
    'posts_per_page' => 8
  );
      
    

      
$posts = get_posts($args);
      
    

      
foreach ($posts as $post):
      
    

      
setup_postdata($post);
      
    

      
wp_reset_postdata();
      
    

以上でindex.phpのコーディングは完了です。

コーディング完了したらトップページの表示確認を行うために記事を投稿します。

まずは、記事の投稿に必要なアイキャッチの有効化とカテゴリー登録から行っていきます。

アイキャッチの有効化

投稿画面でアイキャッチを設定するため、アイキャッチの有効化を行います。
アイキャッチの有効化については、下記の記事内の「アイキャッチの有効化」を参考にしてください。

カテゴリーの登録

投稿画面で設定するためのカテゴリーを登録します。
カテゴリーの登録については、下記の記事内の「カテゴリーの登録」を参考にしてください。

今回登録するカテゴリーは下記の通りです。

記事の投稿

記事の投稿を行います
記事の投稿については、下記の記事内の「記事の投稿」を参考にしてください。

今回投稿するデータは下記の通りです。

※カスタムフィールドの設定方法につては下記の記事を参考にしてください。
カスタムフィールドの使用方法

表示確認

記事の投稿が完了したらトップページを表示してみましょう。

投稿した記事が新しい順に表示されていればOKです。