1. ホーム > 
  2. Webサイト制作 > 
  3. WordPressの使い方 > 
  4. WordPressの固定ページの基礎から応用まで徹底解説

WordPressの固定ページの基礎から応用まで徹底解説

WordPressの固定ページを作成する方法や、テンプレートを追加してデザインを変更する方法、カテゴリページへのリンクを設置する方法など応用も解説。

  • 2017/1/9
  • 2017/1/8

固定ページは一般的に「会社案内」「お問い合わせ」「サイトマップ」など、時系列に並ぶ必要のない単体のページを作るときに使います。

当サイトではカテゴリのTOPページも固定ページで作っていて、ページ送りをしなくても全ての記事へのリンクを表示できるランディングページとしても機能しており、固定ページは使い方次第で活用範囲は大きく広がります。

そこで、固定ページの作成方法の基礎から応用まで、WordPressの固定ページを使いこなす方法を解説します。

固定ページの特徴

WordPressの固定ページには、下のような特徴があります。

  • 固定ページ同士で階層を作る事ができます。
  • 固定ページごとに適用するデザインテンプレートを切り替える事ができます。
  • カスタムメニューを使って固定ページへのリンクを表示させる事ができます。

固定ページではできない事

  • 投稿記事のように、ページにカテゴリやタグの設定をする事ができません。
  • 固定ページのコンテンツ内にPHPのコードを書いても動きません。
    (コンテンツ内のPHPコードを動かすには、ショートコードを使うか、Exec-PHPなどのプラグインを使う必要があります)
投稿と固定ページの違いとは?
投稿と固定ページ。WordPressの新しいページを作成する2つの機能の違いを解説します。それぞれの特徴をつかんで適材適所で使うことで、使いやすいだけでなくSEO効果も高い構造を作ることができます。

固定ページの作り方

まずは固定ページの作り方を覚えましょう。
編集画面の使い方は、ビジュアルエディタの使い方テキストエディタの使い方をご覧ください。

  1. WordPressの管理画面にログインしたら、「固定ページ → 新規作成」をクリックして、固定ページの編集画面を開きます。
  2. 固定ページのタイトルを入力します。「会社案内」や「サイトマップ」など、作りたいページのタイトルを入力してください。
  3. 「編集」ボタンをクリックして、パーマリンク(URL)を設定します。設定前はタイトルに入力した文字がそのままパーマリンクとして設定されていますので、英数字などに修正をしましょう。
    (日本語のままでもGoogleはインデックスしてくれますので、大きな問題はありません)
  4. 本文を入力していきます。「メディアを追加」から画像ファイルなどを挿入したり、ツールバーで文字の装飾をしたりしながら入力していきます。
  5. 「プレビュー」をクリックして、実際にページがどのように表示されているか確認しておきましょう。
    「公開」をクリックすれば、作成した固定ページが公開されます。

固定ページのテンプレートを変更する方法

固定ページと投稿記事の最大の違いは、固定ページはページごとにデザインテンプレートを変更できる点です。

まず、テンプレートを変更できるとどんな事ができるのかご説明します。

固定ページのテンプレートを変更すると何ができるのか

当サイトでは、page.phpを使ったデフォルトテンプレートの他に、アイキャッチ画像や広告などを一切排除した「お問い合わせスタイル」、カテゴリページのような「記事一覧スタイル」など、複数のテンプレートを使い分けています。


  • お問い合わせスタイル
    本文以外の要素を排除したテンプレート

  • 記事一覧スタイル
    カテゴリページのように記事を一覧で表示するテンプレート

このように、固定ページのテンプレートを複数用意することで、そのページに最適なデザインにする事ができます

WordPressのテーマを構成するテンプレートの種類については、以下の記事をご覧ください。

WordPressのテンプレート階層を初心者でも分かるように解説
WordPressのテンプレートの種類と階層、組み合わせ方などを初心者でも分かるように解説。シンプルなテーマを作成できるソースコードも掲載。

固定ページ用のカスタムページテンプレートの作り方

まずは固定ページ用のカスタムページテンプレートファイルを作ります。

固定ページのデフォルトテンプレートは「page.php」ですので、このテンプレートをコピーして作成するといいでしょう。

ファイル名に制約はありませんが、固定ページ用のテンプレートだと分かりやすいように、「page-temlate-○○.php」というファイル名にすると良いです。

こうすると、テーマの編集画面でもテンプレートが揃って並ぶので分かりやすくなります。

新しく作ったテンプレートの先頭に、以下のコードと一緒にテンプレート名を記入します。

/*

Template Name: テンプレートの名前

*/

「Template Name」と「:」の間に半角スペースなどが入っているとテンプレートだと認識されません。もし作ったテンプレートが使えない場合には、記述を確認してください。

ここで設定したテンプレート名が、固定ページの編集画面でテンプレートを切り替えるメニューに表示されますので、分かりやすい名前にしておきましょう。

あとは、WordPressのテーマフォルダに作成したテンプレートをアップロードすれば準備完了です。

作成した固定ページテンプレートを使う方法

作成した固定ページテンプレートは、固定ページの編集画面で設定します。

  1. 固定ページの新規作成画面か、作成したテンプレートを使いたい固定ページの編集画面を表示します。
  2. 「固定ページの属性」にテンプレートを選ぶメニューが表示されているはずです。表示されていない場合には、テンプレートファイルの記述が間違っている可能性があります。
  3. 「デフォルトテンプレート」から作成したテンプレート(ここではテンプレート1)に変更して、「更新」ボタンをクリックします。

これで、編集した固定ページで利用されるテンプレートが変更されました。


もし「固定ページの属性」が表示されていない場合、編集画面最上部にある「表示オプション」で「固定ページの属性」にチェックが入っていない可能性がありますので確認してみましょう。

固定ページの応用

当サイトでは、お問い合わせやAboutページだけでなく、カテゴリTOPのランディングページとしても固定ページを利用しています。

ブログのカテゴリTOPは「category.php」で作られる「記事一覧」になるのですが、ここに固定ページを利用することで、カテゴリインデックスページとして利用することもできます。

固定ページ応用編として、固定ページにカテゴリリンクを自動で表示させる方法など、いくつかのTipsをご紹介します。

固定ページにカテゴリ一覧を表示させる方法

テンプレートタグ「wp_list_categories()」を使って実現させますが、固定ページごとに表示させるカテゴリを変更したい場合にはうまく使えません。

テンプレートに直接カテゴリを指定してしまうと、テンプレートを複数用意する必要があるなどの問題が起きてしまうのです。

そこで、固定ページのカスタムフィールドに表示させたいカテゴリーのIDを設定して、その値を固定ページ側で読み込んで表示するようにします。

固定ページのカスタムフィールドにpost_category_idという名前で、表示させたいカテゴリーIDを設定します。(固定ページごとに設定します)

以下のコードを作成した固定ページテンプレートに記述します。

<?php
//カスタムフィールド(post_category_id)から固定ページに設定したカテゴリIDを取得
$post_category_id = get_post_meta( $post->ID , post_category_id );
$post_category_id = $post_category_id[0];

//カスタムフィールドの$post_category_idを使ってカテゴリ一覧を表示
wp_list_categories( "orderby=name&include=' . $post_category_id . '" );
?>

wp_list_categories()のパラメータの説明は、WordPress Codexをご覧ください。

固定ページで「抜粋」を利用する方法

投稿記事には、その記事の概要を入力する「抜粋」という機能があります。一般的に「抜粋」はトップページやカテゴリーページなどの、記事の一覧に表示されます。

抜粋は投稿記事の編集画面にしか表示されないので、固定ページでは使えない機能だと思われている方も多いと思いますが、実は固定ページでも利用することができます。

固定ページの編集画面に「抜粋」を追加して利用するには、functions.phpに以下のコードを追加します。

<?php
add_post_type_support('page', ‘excerpt');
?>

functions.phpで記述する位置はどこでも構いませんが、一番最後の?>の手前に記述すればいいでしょう。

抜粋に入力した文章を表示させたいときには、テンプレートタグ「the_excerpt」を使います。

the_excerpt();
?>

固定ページテンプレートにテンプレートタグを記述するだけで、抜粋を表示させることができます。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします