つぶやき
-ブログ-

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

2022年5月10日
  giv_design

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ループの記述になります。

固定ページのコンテンツを作成する

固定ページのコンテンツはWordPress管理画面の「固定ページ」→「新規追加」で作成できます。

今回は前述に載せた「HTMLファイル(WordPress管理画面の「固定ページ」のコードエディターで記述する)」のコードをコードエディターの画面で記述しています。

ページのプレビュー画面は次のとおりになります。

スラッグ名にファイル名を記述する

固定ページの編集画面にある「URLスラッグ」の欄に今回作成したテンプレートの「page-contact.php」の「contact」を記述します。これで「~/contact」のURLで問い合わせのページを表示できます。

GIV株式会社は、埼玉県川越市にあるWEB(ホームページ)制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。


制作に関する
ご相談はこちら