ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > WordPress > ブログサイトをWordPress化しよう 固定ページ編

ブログサイトをWordPress化しよう 固定ページ編

Web制作

2022/07/20

2023/06/08

ブログサイトをWordPress化しよう 固定ページ編

本記事は、「ブログサイトを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
お問い合わせページContactContact

コードにすると以下のようになります。

 

<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です。

固定ページの作り方はいくつかあるので、サイトの設計次第で作り方を変えていきましょう。

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから