【固定ページを作ろう】【WordPress】テーマの自作を目指して　その１１

HTML

2019.11.27

こんにちは朱夏です。

テーマの作成もそろそろ大詰めです。
あと1～2回くらいで完成を目指します。

今回やっていくのは次の2つの作成です。

固定ページ
404ページ

前回予定していたテーマの説明は、公開時にこのサイトの記事で作成しようと思います。

・固定ページの作成

まずは、固定ページの元ファイルpage.phpを作成します。
投稿ページと違い、投稿者のプロフィールページや、企業の会社概要などを作成するときに使うページになります。

というわけで、コードはこちらです。

<!-- ヘッダー -->
<?php get_header(); ?>
<!-- ヘッダー -->
         <div class="row justify-content-around bg-primary">
            <div class="col-md-8 my-3">
               <!-- 投稿記事確認 -->
               <?php if (have_posts()) :
                  while (have_posts()) : the_post(); ?>
                  <div class="row py-2 mb-3 bg-light">
                     <!-- ここから取得内容 -->
                     <div class="col">
                        <h1><?php the_title(); ?></h1>
                        <div>
                           <?php the_content(); ?>
                        </div>
                     </div>
                     <!-- 取得内容ここまで -->
                  </div>
               <?php endwhile;
                  endif; ?>
               <!-- 投稿記事確認ここまで -->
            </div>
<!-- サイドバー -->
<?php get_sidebar(); ?>
<!-- サイドバー -->
         </div>
         <div class="row">
<!-- フッター -->
<?php get_footer(); ?>
<!-- フッター -->

<?php get_header(); ?>

<?php if (have_posts()) :

while (have_posts()) : the_post(); ?>

<div>

<?php the_content(); ?>

</div>

</div>

<?php endwhile;

endif; ?>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

これで、WordPressメニューの固定ページから作成できるようになりました。
編集画面は投稿ページとほぼ変わりませんでした。

・404ページの作成

404ページ(ページが見つからなかった時に表示するページ)を作成します。
シンプルに404の表示と、検索バーのみにします。

<!-- ヘッダー -->
<?php get_header(); ?>
<!-- ヘッダー -->
         <div class="row justify-content-around bg-primary">
            <div class="col-md-12 p-2 my-3 bg-light">
               <h1>404 Not Found !!</h1>
               <p>サイト内検索</p>
               <?php get_search_form(); ?>
            </div>
         </div>
         <div class="row">
<!-- フッター -->
<?php get_footer(); ?>
<!-- フッター -->

<?php get_header(); ?>

<h1>404 Not Found !!</h1>

<p>サイト内検索</p>

<?php get_search_form(); ?>

</div>

<?php get_footer(); ?>

他のページと区別しやすいように、サイドバーは削除しました。

404ページはあまり見られることのないページですが、お洒落なものを用意しているサイトも結構あったりしますよね。

今回は、今まで学んできた内容だけで出来る事ばかりだったので、簡単に終わってしまった感じがします。
次回は、有名なテーマでは必ず付いてくるSNSボタンの設置を行いたいと思います。

それでは、今回はここまでです。