WordPressオリジナルテーマ制作手順-④固定ページ-

2022-07-282022-07-29

前回の記事では、functions.phpファイルの役割や設定方法などを解説しました。
これまでに以下の作業を行いました。

WordPressオリジナルテーマ制作に必要なファイルの準備
トップページ制作
functions.phpファイルからのスタイルシートやjavascript読み込み

今回はWordpressオリジナルテーマの「固定ページ」の制作手順について解説します。

前回のオリジナルテーマ制作手順はこちら

固定ページの概要

固定ページとは独立したページで、ブログ記事や最新情報など投稿とは機能が異なります。

分かりやすいイメージとしてはニュースやブログなど、日々更新されていく部分の機能に当たる。
また、カテゴリー、タグといった機能を使って、記事を分けることができるのが特徴。

投稿機能は新しい記事を沢山作成できますし、トップページと連動していて新しい記事を投稿する度にトップページ表示されることが多いです。

そのため、固定ページはページではなく記事や投稿記事などと呼ばれることもあります。

固定ページはページ単体で完結するページです。
企業情報やアクセス、お問い合わせなどあまり情報に変化がないページに最適です。

固定ページと投稿記事の違いを以下にまとめたので、参考までにご覧ください。

ページ単位での階層構成ができて自分で変更できる
トップページ固定もできる
カテゴリやタグが設置されない
大半のテンプレートでコメント欄がない
RSSやPing送信を生成しない*

※RSSはニュースやブログなど各種Webサイトの更新情報をまとめて配信するための文書フォーマットの総称
※Ping送信はWebサイトやブログに新着記事投稿時に、更新情報が集められているインターネット上のサーバーに対して自動的に連絡や送信してくれる機能

固定ページと投稿記事には、さまざまな違いがあることがお分かりいただけたと思います。
トップページ固定や階層構成が自分ができるメリットや、カテゴリやタグ設置不可などのデメリットがあります。

これらの違いも把握した上で固定ページを制作すると安心です。

固定ページ制作は大きく分けて3つ

これからは固定ページの制作手順を解説していきます。
固定ページ制作は、大きく分けて以下の3つが挙げられます。

既存の固定ページデザインから新規追加
テキストエディタに直接記述(page.php)
ページごとにテンプレート制作

どの制作手順も特徴がありますので、順に沿って解説していきます。
特徴があるとお伝えしたのは、どの制作手順も人によって好みが分かれます。

今回の解説を参考にして、ご自身にマッチしそうなWordpressオリジナルテーマの固定ページを制作してください。
それでは、以下から順に解説を始めます。

①既存の固定ページデザインから新規追加

既存の固定ページデザインから新規追加する場合は、このような手順です。

固定ページから新規追加へ飛ぶ
編集画面でタイトルや文章を書く
公開ボタンで公開

まずは以下の画面と同じく「新規追加」をクリックして、新規ページを作成しましょう。
タイトルにはそのページ名を任意で付ければ問題ありません。

仮にお問い合わせページであれば「お問い合わせ」としましょう。

その後は編集画面でタイトルや文章を書いていきます。

使っているWordpressテーマによって異なりますが、「テンプレート」と呼ばれる場所で固定ページのデザインが選択できます。

タイトルや文章の記入が終わったら、パーマリンク(WebサイトのURL)も設定しておきましょう。パーマリンクは編集画面の右側にあります※テーマによって表示場所は異なります。

デフォルトではタイトルが入っていますが、この部分を英語表記(半角小文字)に変更しましょう。
具体的な記述はお問い合わせページなら「contact」会社概要ページなら「company」など。

今回はタイトルがサンプルなので「sample」と変更すれば問題ありません。

②テキストエディタに直接記述(page.php)

ここでは、テキストエディタに直接記述する制作手順を解説します。

固定ページ用テンプレート「page.phpファイル」の作成

この中の記述内容は以下です。

<?php get_header(); ?>
コンテンツ
<?php get_footer(); ?>

基本的な構成はトップページのfront-page.phpと同じです。
コンテンツですが、page.phpにはお問い合わせや会社概要ページのコードは直接記述しません。
記述方法は後ほど解説しますが、コンテンツはWordPress固定ページにそれぞれ記述していきます。

記述が完了したら、それぞれの固定ページに記述したコンテンツをpage.phpが読み込んで、page.phpファイルだけで複数の固定ページが表示されます。

そのため、page.phpのコンテンツにはWordPress固定ページが情報を取れるテンプレートタグが含まれた以下のコードを記述しましょう。

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

3行目の「<?php the_content(); ?>」が固定ページのテキストエディタを読み込むテンプレートタグ。
このコードでpage.phpファイルだけで複数の固定ページが表示できるようになりました。

万が一トップページに存在していなくて固定ページだけの共通パーツがある場合は、以下のコードを記述すれば問題ありません。

<?php get_header(); ?>
<h2>
  <?php the_title(); ?>
</h2>
<?php if (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endif; ?>
<?php get_footer(); ?>

HTMLではh2はお問い合わせや会社概要などのページタイトルを記述しましたが、その状態ではどのページでもお問い合わせや会社概要になってしまいます。

そのため、この段階では「<?php the_title(); ?>」の動的出力するテンプレートタグに置き換えます。
これで固定ページ用のテンプレートの作成は完了です。

WordPressの管理画面からそれぞれの固定ページを作成

WordPressの管理画面から事前に作成したcompany.htmlのヘッダーとフッター部分を除いた部分を貼り付けます。

ここでの注意点は、張り付ける場所は『テキスト』です。
※ビジュアルではありません。

テキストエリアに貼り付けないとコードが反映されないので注意しましょう。
※テーマによって表示内容が異なります(今回はLIghtningテーマを使用しています)

このままでは画像が表示されないので、functions.phpを使った以下のコードを記述します。

// 固定ページの画像呼び出しパスの簡略化
function imagepassshort($arg) {
  $content = str_replace(‘”img/’, ‘”‘ . get_bloginfo(‘template_directory’) . ‘/img/’, $arg);
  return $content;
}
add_action(‘the_content’, ‘imagepassshort’);

このコードをfunctions.phpに追記すると、「<img src=”img/top1.png” alt=””>」のままで画像が表示されます。

ページごとのテンプレート制作手順

ここではページごとのテンプレート制作手順を解説します。

固定ページの新規追加

WordPress管理画面の左側『固定ページ』⇒『新規追加』を選択します。

その後タイトルエリアにタイトルを記述します。
今回は「ホーム」とタイトルを付けて公開ボタンをクリックして公開させます。
※中は空のままで問題ありません。

固定ページのテンプレート作成

固定ページはページ数だけ作成が必要です。
固定ページがお問い合わせ・会社概要・採用情報の3ページある場合は以下のようになります。

page-contact.php
page-company.php
page-recruit.php

トップページ制作手順編でトップページのコードを以下のように記述しました。

<?php get_header(); ?>
<main>
  <h1>大見出し</h1>
  <section>
    <h2>コンセプト</h2>
    <div>
       <img src=”<?php echo get_theme_file_uri( ‘画像パス’ ); ?>” alt=”” />
    </div>
    <p>文章が入ります</p>
  </section>
</main>
<?php get_footer(); ?>

固定ページも同じようにHTMLを全て貼り付けた後、「header.php」「footer.php」は削除しヘッダーとフッターを読み込ませます。

ただしトップページ(front-page.php)とは異なる点があります。
固定ページ(会社概要・page-◯◯.php)は以下のコードです。

<?php
/*
Template Name: 会社概要
*/
get_header();
?>
<main>
  <h1>大見出し</h1>
  <section>
    <h2>コンセプト</h2>
    <div>
      <img src=”<?php echo get_theme_file_uri( ‘画像パス’ ); ?>” alt=”” />
    </div>
    <p>文章が入ります</p>
  </section>
</main>
<?php get_footer(); ?>

ヘッダーの読み込み部分に「Template Name」という部分があります。
Template Nameの部分はテンプレート名を設定する部分です。

ここでは会社概要ページのため「会社概要」と名付けました。
※これはpage-company.php

「お問い合わせ」「採用情報」も同じ手順で作成します。
これでページごとのテンプレートが完成しました。

ページごとにテンプレート制作がお勧め

ここまで固定ページの制作手順について解説してきましたが、結論としてページごとにテンプレート制作をお勧めします。
おさらいとして、解説内容を以下にまとめました。

①既存の固定ページデザインから新規追加

固定ページから新規追加へ飛ぶ
編集画面でタイトルや文章を書く
公開ボタンで公開

②テキストエディタに直接記述(page.php)

テンプレートには記述しない※固定ページ編集画面にはコードの呼び出しコードやヘッダーやフッターなどの共通部分読み込みコードは記述
固定ページの編集画面にコードを記述※HTMLを貼り付け

③ページごとにテンプレート制作

テンプレートにコードを記述
固定ページの編集画面には何も記述しない

テキストエディタに直接記述(page.php)は、固定ページ編集画面に表示されるテキストエディタにコードを貼り付けます。
しかしながら、貼り付けた後で編集すると非常に見えずらくなるのであまりお勧めできません。

ページごとのテンプレート制作は、コードを貼り付けた後でも修正がしやすいので、特に指定がない限りはページごとのテンプレート制作をお勧めします。

今回解説した3つの制作手順を一通り体験した上で決めてみてはいかがでしょうか。

まとめ

今回はWordpressオリジナルテーマの「固定ページ」の制作手順を解説しました。

固定ページの制作手順は3つの方法がありますが、この記事ではページごとのテンプレート制作をお勧めしています。
制作段階だけではなく、制作した後の修正が簡単な方法だと、カスタマイズも苦手意識を持つことなく進められるのです。

Webサイトは初期制作だけではなく、制作完了後も大事です。
今回の記事を参考にして固定ページの制作を進めてはいかがでしょうか？

次回はオリジナルテーマ制作に必要なテンプレートの階層をまとめます。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！