本記事は、「ブログサイトをWordPress化しよう メインループ編」の続編の記事になります。
「ブログサイトをWordPress化しよう メインループ編」では、ブログサイトのトップページの投稿記事部分をメインループ処理を加えたり、個別投稿ページも追加して動的にしました。
本記事では、お問い合わせページとしてWordPressの固定ページ作成を行います。
- WordPress化したサイトに固定ページを作成する方法
案件が取れなくて悩んでいるあなたへ
プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。
営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか？
- またゼロからやり直さないといけないの？
- 本当にフリーランスになれるの？
といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK！
＼お申し込みは30秒で終わります。／
新しい一歩を、今踏み出してみませんか？
WordPress化するデザイン
準備から進めていきましょう。
準備
「ブログサイトをWordPress化しよう メインループ編」同様、準備から行いましょう。
教材のダウンロード
「ブログサイトをWordPress化しよう メインループ編」の続編になるため、前回のファイルのまま使用しても構いません。
ない方は、以下よりダウンロードを行ってください。
圧縮ファイルとしてダウンロードされるので、「解凍（展開）」してファイルの中身を確認しましょう。
ダウンロードしたものを使用する方はthemes直下に入れよう
上記のダウンロードリンクよりダウンロードしたファイルを使用する方は、Localのthemes直下に配置しましょう。
ローカル環境の起動
Localの起動
「ブログサイトをWordPress化しよう 基盤編」で作成したLocalの「ZPM-WP」プロジェクトを「Start site」で起動しましょう。
管理画面を表示
画像の「WP Admin」というボタンからWordPressの管理画面を表示しましょう。
WordPress化する
ここからは、エディタを開きzpm-wpを以下の項目でWordPress化していきます。
やることの確認
- 固定ページを作成する
エディタでテーマを開く
Localで起動しているthemes直下のzpm-wpをVS Codeで開きましょう。
固定ページを作成する
今回、お問い合わせページ（contact.html）を固定ページを使って表示させていきます。
固定ページの概要や作り方については、「固定ページを作成しよう」で解説していますのでチェックしましょう。
固定ページテンプレートファイルの作成（page-contact.php）
今回のブログサイトでお問い合わせページを作成するにあたって、page-contact.phpを作成し使用します。
contact.htmlの内容をコピペする
contact.htmlの内容がベースになるので、中のコードをすべてコピペします。
テンプレートパーツファイルを呼び出す
<?php get_header(); ?>
<main class="contact">
<form action="" class="contact-form">
<!-- コードが長いため、割愛しています -->
</form>
</main>
<?php get_footer(); ?>ヘッダー、フッターを使用するので、それぞれをget_header(),get_footer()で呼び出します。
管理画面から固定ページを作成する
管理画面を開き、左のサイドバーの「固定ページ」を開きましょう。
遷移すると、現在作成されている固定ページが一覧として表示されます。
新しくお問い合わせの固定ページを作成したいので、「新規追加」をクリックします。
タイトルを設定
タイトルは、今回についてはお問い合わせページであることが分かる適当なタイトルで問題ありません。
コードをカスタムHTMLに貼り付ける
本文欄に、/htmlと記述して「カスタムHTML」とでてくるので、クリックしてHTMLを作成しましょう。
このHTMLには、お問い合わせページのコードを移します。
（page-contact.phpからコードを持ってきます）
スラッグの設定
パーマリンクの設定（スラッグ）をcontactにしましょう。
この固定ページのスラッグとファイル名のpage-$slug.phpの$slugの部分が一致していたら、page-$slug.phpが表示される仕組みになっています。
固定ページを公開
公開をクリックして固定ページの作成が完了します。
メインループの追加（page-contact.php）
<?php
get_header();
if (have_posts()):
while (have_posts()):
the_post();
// 本文の内容を表示
the_content();
endwhile;
endif;
get_footer();
?>管理画面で作成した固定ページの内容を表示するには、page-contact.phpにメインループを追加する必要があります。
そして本文の内容を表示するには、the_content()を使うことで表示することができます。
表示の確認
公開ボタンをクリックした際に表示される「固定ページを表示」をクリックします。
この部分からでも固定ページを表示することができます。
開くとこのような表示になりました。
ヘッダー部の表示分岐（header.php）
固定ページを作成し、フォームの表示は問題なくできましたが、ヘッダー部の文言（画像の赤枠部分）がデザインと異なっているので、header.phpにて条件分岐を行います。
トップページ・個別投稿ページとお問い合わせページで分岐したいこととしては、以下になります。
| ページ名 / 項目 | キャッチコピー部分 | h1タグで囲う文言 |
|---|---|---|
| トップページ・ | ||
| 個別投稿ページ | 日々の学習を記録するブログ | ZeroPlus Blog |
| お問い合わせページ | Contact | Contact |
コードにすると以下のようになります。
<header class="header">
<div class="header-inner">
<?php if (is_page('contact')): ?>
<p class="logo">
<a href="<?php echo esc_url( home_url() ); ?>" class="logo-link">ZeroPlus Blog</a>
</p>
<h1 class="header-heading">Contact</h1>
<?php else: ?>
<h1 class="logo">
<a href="<?php echo esc_url( home_url() ); ?>" class="logo-link">ZeroPlus Blog</a>
</h1>
<p class="header-heading">日々の学習を記録するブログ</p>
<?php endif; ?>
</div>
</header>is_page(’contact’)を使って分岐しています。
もしスラッグがcontactだったら、
<p class="logo">
<a href="<?php echo esc_url( home_url() ); ?>" class="logo-link">ZeroPlus Blog</a>
</p>
<h1 class="header-heading">Contact</h1>を出力し、そうでなければ、
<h1 class="logo">
<a href="<?php echo esc_url( home_url() ); ?>" class="logo-link">ZeroPlus Blog</a>
</h1>
<p class="header-heading">日々の学習を記録するブログ</p>
を出力するようにしています。
is_page()の使い方については、「WordPressの条件分岐でページを判別しよう」で解説していますのでチェックしましょう。
表示の確認
トップページ
お問い合わせページ
これでちゃんと分岐されて表示させることができました。
お問い合わせページへのリンクを変更する（sidebar.php）
<aside class="aside">
<div class="recommend">
<h2 class="recommend-title">おすすめ記事</h2>
<ul class="recommend-list">
<li class="recommend-item">
<a href="" class="recommend-item-link">・web制作</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-item-link">・プログラミング</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-item-link">・webデザイン</a>
</li>
<li class="recommend-item">
<a href="" class="recommend-item-link">・マーケティング</a>
</li>
</ul>
</div>
<div class="aside-bnrs">
<a href="" class="bnr-item">
<img
src="<?php echo esc_url( get_template_directory_uri() . '/img/bnr_advertising.jpg' ); ?>"
alt=""
width="686"
height="272"
class="bnr-img"
/>
</a>
<a href="" class="bnr-item">
<img
src="<?php echo esc_url( get_template_directory_uri() . '/img/bnr_advertising02.jpg' ); ?>"
alt=""
width="686"
height="272"
class="bnr-img"
/>
</a>
<!-- contact.htmlのリンクをhome_url()に変更する -->
<a href="<?php echo esc_url( home_url( '/contact' ) ); ?>" class="bnr-item">
<img
src="<?php echo esc_url( get_template_directory_uri() . '/img/img_contact-form.jpg' ); ?>"
alt=""
width="686"
height="272"
class="bnr-img"
/>
</a>
</div>
</aside>sidebar.phpの後半あたりにあるお問い合わせページへのリンク（contact.html）を<?php echo esc_url( home_url( '/contact' ) ); ?>に変更しましょう。
これでトップページからお問い合わせのリンクをクリックして、お問い合わせページが開くことができたらOKです。
まとめ
本記事で実際に固定ページ機能をお問い合わせページに対して実装しました。ここでは、作る流れ理解していればOKです。
固定ページの作り方はいくつかあるので、サイトの設計次第で作り方を変えていきましょう。
