つぶやき
-ブログ-

固定ページの作成方法｜ WordPressテーマ作成

2022年5月10日

WordPressには投稿ページと固定ページの2つのページを作成できます。投稿ページは時系列に投稿されるページですが、固定ページは時系列で投稿されない常に固定されたコンテンツを表示させるためのページです。

ですので問い合わせや会社情報、サービス内容などの固定したい情報を載せる場合は固定ページを使いましょう。今回は固定ページの作成方法を解説します。

固定ページのテンプレートはpage.phpを使う

固定ページで使うWordPressのテンプレートは「page.php」「page-$id.php」「page-$slug.php」になります。

テンプレートの優先順位は次のとおりです。

・優先順位①(page-$slug.php)
・優先順位②(page-$id.php)
・優先順位③(page.php)

固定ページを複数使う際には、次のようにスラッグ名やid名で使い分けるとよいです。

・会社概要のページ→page-social_info.php
・問い合わせのページ→page-contact.php
・サービス内容のページ→page-survice.php

固定ページの作り方

では実際に固定ページの作り方を解説します。以下にて実際に作成したHTMLとCSSの記述を載せました。

■HTML

<?php get_header(); ?>
<h2 class="main-visual-contact-text"><?php the_title(); ?></h2>
<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <?php the_content(); ?>
    <?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>

■HTML(WordPress管理画面の「固定ページ」のコードエディターで記述する)

<div class="form">
<div class="form_row">
 
            <label class="form_label" for="fullname">お名前</label>
<div class="form_content">
               <input type="text" name="fullname" id="fullname"></div>
</div>
<div class="form_row">
 
            <label class="form_label" for="email">メールアドレス</label>
<div class="form_content">
               <input type="email" name="email" id="email"></div>
</div>
<div class="form_row">
 
            <label class="form_label" for="message">メッセージ</label>
<div class="form_content">
                <textarea name="message" id="message"></textarea></div>
</div>
<div class="form_row form_row-center">
           <input type="submit" name="send" value="確認画面へ" class="btn btn-send"></div>
</div>

■CSSファイル

.main-visual-contact-text {
    width      : 100%;
    text-align : center;
    padding-top: 40px;
}
 
.contact-form {
    width     : 900px;
    margin    : 0 auto;
    margin-top: 50px;
 
    .contact-form-head {
        margin-top: 40px;
    }
 
 
            .form {
                margin-top: 40px;
                width: 100%;
 
                .form_row {
                    margin-bottom: 10px;
 
                    p {
                        padding-bottom: 5px;
 
                        .form_label {
                            font-weight: bold;
                        }
                    }
 
                    .form_content {
                        input {
                            width  : 100%;
                            padding: 5px;
                        }
 
                        textarea {
                            width  : 100%;
                            padding: 5px;
                            height : 250px;
                        }
                    }
 
                    input {
                        padding    : 10px 20px;
                        font-weight: bold;
                        cursor     : pointer;
                    }
                }
            }
       
    }
 
 
.contact-cimplete {
    text-align : center;
    padding-top: 60px;
}
 
.home-return {
    text-align: center;
    margin-top: 50px;
 
    a {}
}

テンプレートファイルを作成する

まずはテンプレートファイルを作成しましょう。今回は問い合わせのページを作るので「page-contact.php」というファイルを作成しています。

ヘッダーとフッターを表示させる

<?php get_header(); ?>と<?php get_footer(); ?>と記述して、固定ページにもトップページと同じようにヘッダーとフッターを表示させましょう。

WordPressループを記述する

固定ページのコンテンツを表示するにもWordPressループが必要になります。

<?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <?php the_content(); ?>
        <?php endwhile; ?>
    <?php endif; ?>

<?php the_content(); ?>というタグがページのコンテンツを表示させるテンプレートタグで、そのほかの記述がWordPressループの記述になります。