【404, searchなどのファイルを作成】自作ワードプレステーマの最低限を作る③

前回まで

2019.05.20【index.phpを分割する】自作ワードプレステーマの最低限を作る②

ワードプレステーマに必要なファイルやフォルダを作る

前回までに作ったものはブログのトップページとなる部分です。

今回は他にこれから必要となってくるファイルをまとめて作ってしまいます。

テーマを作成する段階で違うページに飛んでしまった時、そこがどのページなのかを判別しやすいようにしましょう。

今回新しく作るファイル

single.php
page.php
404.php
search.php
loop-main.php

今回新しく作るフォルダ

assets/
├ js/
├ css/
└ img/

single.php

個別投稿ページの表示に使います。

<?php get_header(); ?>
<div class="content">
  <div class="main">
    <div class="main-content">
      <h2>個別投稿ページ</h2>
    </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>

<h2>個別投稿ページ</h2>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

page.php

固定投稿ページの表示に使います。

<?php get_header(); ?>
<div class="content">
  <div class="main">
    <div class="main-content">
      <h2>固定投稿ページ</h2>
    </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>

<h2>固定投稿ページ</h2>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

404.php

エラーページの表示に使います。

<?php get_header(); ?>
<div class="content">
  <div class="main">
    <div class="main-content">
      <h2>404 Not Found</h2>
      <section style="padding:50px 0 100px;">
        <p>お探しのページは見つかりませんでした</p>
      </section>
    </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>

<h2>404 Not Found</h2>

<p>お探しのページは見つかりませんでした</p>

</section>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

search.php

検索結果のページに使います。

<?php get_header(); ?>
<div class="content">
  <div class="main">
    <div class="main-content">
      <h2>検索結果ページ</h2>
    </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

<?php get_header(); ?>

<h2>検索結果ページ</h2>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

loop-main.php

index.phpやsingle.phpなど複数回使うループ処理をテンプレートとしてまとめます。

今回は空ファイルだけを作ります。

assets

画像やjs,cssなどの素材をまとめるフォルダです。

assets/img

assets/js

assets/css

以上3つの空フォルダを作成します。

この時点でのファイル構造

bone/
├ index.php/
├ style.css/
├ functions.php/
├ header.php/
├ sidebar.php/
├ footer.php/
├ single.php/
├ page.php/
├ 404.php/
├ search.php/
├ loop-main.php/
└ assets/
├ js/
├ css/
└ img/