【WordPress ソースコード】入門編:プロフィールサイト/詳細ページを追加しよう

目次

テーマディレクトリ構成

※青色:新規ファイル、黄色:修正ファイル

    
profile
 ├─img
 │  ├─favicon.ico
 │  ├─logo.svg
 │  ├─about.jpg
 │  └─mainvisual.jpg
 │
 ├─footer.php
 ├─functions.php
 ├─header.php
 ├─index.php
 ├─single.php
 └─style.css
    
  

index.php

別タブで開く
index.php

<?php get_header(); ?>

<main>
  <div id="mainvisual">
    <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/mainvisual.jpg" alt="テキストテキストテキスト">
  </div>

  <section id="about" class="wrapper">
    <h2 class="section-title">About</h2>
    <div class="content">
      <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/about.jpg" alt="テキストテキストテキスト">
      <div class="text">
        <h3 class="content-title">KAKERU MIYAICHI</h3>
        <p>
          テキストテキストテキストテキストテキストテキストテキスト<br>
          テキストテキストテキストテキストテキストテキストテキスト<br>
          テキストテキストテキストテキストテキストテキストテキスト
        </p>
      </div>
    </div>
  </section>

  <section id="bicycle" class="wrapper">
    <h2 class="section-title">Bicycle</h2>
    <?php if (have_posts()): ?>
      <ul>
        <?php while (have_posts()):the_post(); ?>
          <li>
            <a href="<?php the_permalink(); ?>">
              <img src="<?php the_post_thumbnail_url('full'); ?>" alt="">
              <h3 class="content-title"><?php the_title(); ?></h3>
              <p><?php echo wp_trim_words(get_the_content(), 30, '…'); ?></p>
            </a>
          </li>
        <?php endwhile; ?>
      </ul>
    <?php endif; ?>
  </section>
</main>

<?php get_footer(); ?>

single.php

別タブで開く
single.php

<?php get_header(); ?>

<main>
  <article class="wrapper">
    <div class="mainvisual">
      <img src="<?php the_post_thumbnail_url('full'); ?>" alt="">
    </div>

    <h1 class="title"><?php the_title(); ?></h1>

    <div class="content">
      <?php the_content(); ?>
    </div>
  </article>
</main>

<?php get_footer(); ?>