オリジナルテーマ WordPress

WordPressオリジナルテーマの作り方④(固定ページ編)

WordPressオリジナルテーマの作り方④(固定ページ編)

今回はWordPressオリジナルテーマの作り方【第4回】固定ページ編となります。

前回までに以下の事をやってきました。

今回は固定ページの作り方について解説していきます。

効率よくWordPress制作したい人はこちら

WordPressオリジナルテーマ:固定ページの作り方は2つ

固定ページの作り方は2つあります。

  1. テンプレートをページごとに作成(page-〇〇.php)
  2. 固定ページの編集画面でテキストエディタに直書き(page.php)

このどちらかになります。

管理画面の固定ページから各ページを新規追加するのは共通です。

 

テンプレートをページごとに作成

この場合は固定ページの数だけpage-〇〇.phpというテンプレートを作る必要があります。

例えば会社概要、お問い合わせ、採用情報の3ページであれば、

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

という感じになります。

コンテンツに関しては各テンプレートに書きます。

固定ページ → 新規追加で作成したページには何も書きません。

 

固定ページの編集画面でテキストエディタに直書き

この場合テンプレートはpage.phpの1つだけで大丈夫です。

こちらは固定ページ → 新規追加で作成したページに、それぞれのコンテンツを書きます。

HTMLのコードをそのままコピペに近いです。

 

どちらの方法で作るか?

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

・テンプレートにコードを書く
・固定ページの編集画面には何も書かない

固定ページの編集画面に直書き

・テンプレートには書かない(※)
・固定ページの編集画面にコードを書く(HTMLをコピペ)

※ テンプレートには書かないと書きましたが、固定ページの編集画面に書いたコードを呼び出すコードやヘッダー、フッターなどの共通部分を読み込むコードは書きます(コンテンツは書かないという意味です)

どちらの方法で作るかは人によって違うと思いますが、前者のページごとにテンプレートを作成した方が修正がしやすいので、私は特に指定がない限りこの方法で作成しています(後者で指定されたことはありませんが)

後者の場合、固定ページ編集画面のテキストエディタにコードをコピペするのですが、後から編集しようとすると非常に見難くいです(やってみると分かると思います)

という事で、ページごとにテンプレートを作成する方法を中心に解説していきます。

 

固定ページの作り方①:ページごとにテンプレートを作成

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

すると次のような画面になるので、名前は何でも構いませんが今回はHOMEとタイトルを付けて右の方にある公開ボタンをクリックします(プラグインのClassic Editorを適用しています)

中身は空で大丈夫です。これがトップページになります。

ついでに記事一覧ページ用にBLOGという固定ページも同様に作っておきます。

これでこの状態になります。

そしてトップページをHOME、記事一覧ページをBLOGとするために、管理画面左側の設定 → 表示設定を開きます。

するとこのような画面が表示されるので、ホームページの表示を固定ページにして、ホームページHOME、投稿ページBLOGとします。

ちなみに今回トップページであるHOMEはfront-page.phpで、記事一覧ページであるBLOGはhome.phpとなります(home.phpがない場合はindex.phpが記事一覧となります)

あとは1ページに表示したい最大投稿数も設定しておきます。

最大投稿数はテンプレート側で設定することも可能で、その場合はページネーションの関係で1にしておいた方がいいです(ちょっと難しい話なので一旦後回しでOKです)

また、ローカル環境では検索エンジンは関係ありませんが、テストサーバーにアップした時は「検索エンジンがサイトをインデックスしないようにする」にチェックを入れた方がいいので、ここでチェックを入れてしまってもOKです(本番サーバーに移行して公開する時にはチェックを外すのを忘れないようにしましょう)

注意ポイント

検索エンジンでの表示にチェックを入れないと、サーバーにアップした時点でサイトが公開されてしまいます。

 

ここまで設定が出来たら下の変更を保存をクリックします。

そしてもう一度固定ページ一覧を見ると、HOMEがフロントページ、BLOGが投稿ページに設定されたのが分かります。

 

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

次は固定ページのテンプレートを作成します。

これはページの数だけ必要になります。

最初の方でも書きましたが、例えば会社概要、お問い合わせ、採用情報の3ページあれば

  • page-company.php
  • page-contact.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」があります。

これはそのままですがテンプレートの名前を設定する所で、上記は会社概要ページなので「会社概要」と名付けました(これはpage-company.phpです)

これで管理画面の固定ページ編集画面から会社概要というテンプレートを選択出来る様になりました。

同様に「お問い合わせ」「採用情報」を作ります。

また記事一覧はhome.phpで作りましたが、これは「Template Name」は書かなくてOKです(page-◯◯.phpではないので)

詳しくは以下の記事を参照下さい。

WordPressオリジナルテーマの作り方⑥(記事一覧ページ編)

ヘッダーの読み込みは?

Template Nameの下にget_headerがあるので、トップページのfront-page.phpで書いた<?php get_header(); ?>不要です。

 

固定ページを新規追加する

次に先ほど作成したトップページ(HOME)や投稿ページ(BLOG)と同様に、他のページも新規追加します。

すると一覧はこのようになります

そしてこの新規追加したページとテンプレートを紐付ける作業をします。

例として会社概要の編集画面を開きます(タイトルか編集をクリック)

そして右のページ属性にあるテンプレートのメニューを開くと、これまで作成した固定ページのテンプレート名が表示されます。

これは先ほど「Template Name」で名付けたテンプレート名になります(テンプレート名は任意です)

ここで紐付けたいテンプレート名を選択すればいいので、ここでは会社概要を選択して右上の更新をクリックすれば完了です。

 

パーマリンク

また左上のパーマリンクが「会社概要」になっています。

これはページタイトルがそのまま反映されているだけですが、ここは日本語にするのはあまりよろしくありません。

例えば、パーマリンクが「会社概要」のままアドレスバーや外部サービスにコピペした場合、このようにURLが長くなります。

WordPress編集画面上
→ http://test.local/会社概要/

アドレスバーなどにコピペ
→ http://test.local/%e4%bc%9a%e7%a4%be%e6%a6%82%e8%a6%81/

ぱっと見で何のページか分からないし、他にも色々とデメリットがあるのでここは英語にしましょう。

編集をクリックすれば変更可能です。

これで「会社概要」から「company」に変更出来ました。

 

固定ページの中身

中身については先ほどHTMLをまるっとコピペと書きましたが、そのままではダメな所があります。

それは案件によって様々なのですが、ここでは良くある2つについて解説します。

 

imgタグ

これは前回の記事で書いたのと同じやり方なので、前回の記事を参照下さい。

 

サイト内リンク

これはサイト内の別のページに飛ぶためのリンクですね。

例えば静的サイトの場合、会社概要(company.html)に飛びたい場合はこのようになります。

<a href="company.html">会社概要</a>

これをWordPressではこのようにします。

<a href="<?php echo esc_url( home_url( '/' ) ); ?>company">会社概要</a>

この「company」の部分ですが、これは先ほど固定ページの編集で設定したパーマリンクになります。

先ほど「会社概要」から「company」にパーマリンクを変更したところです。

 

これでページごとにテンプレートを作成する固定ページの作り方は以上になります。

以降はもう1つの方法「固定ページの編集画面でテキストエディタに直書き(page.php)」についてご紹介します(こちらは必要になったら思い出せばいいので、見なくてもOKです)

 

固定ページの作り方②:編集画面のテキストエディタに書く方法

おさらいになりますが、固定ページを作る方法は以下の2つになります。

  1. テンプレートをページごとに作成(page-〇〇.php)
  2. 固定ページの編集画面でテキストエディタに直書き(page.php)

先ほどは①でしたが、ここからは②の方法になります。

(①の方法で作るなら②の方法は覚えなくてもOKです🙆‍♂️)

 

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

まず固定ページ用のテンプレートであるpage.phpというファイルを作成します。

この中身に何を書いていくかというと、基本的な構成はトップページであるfront-page.phpと同じで、

  • header.phpからヘッダーを読み込む<?php get_header(); ?>
  • コンテンツ
  • footer.phpからフッターを読み込む<?php get_footer(); ?>
<?php get_header(); ?>
コンテンツ
<?php get_footer(); ?>

となります。

非常にシンプルですね。

 

そしてコンテンツを書くのですが、page.phpには会社概要やお問い合わせページのコードは直接書きません。

コンテンツはWordPressの固定ページにそれぞれ書いていきます(書き方はあとで解説します)

そしてそれぞれの固定ページに書いてあるコンテンツをpage.phpが読み込みに行き、page.phpファイル1つだけで複数の固定ページを表示出来るようになります。

なので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ファイル1つで複数の固定ページを表示することが可能になりました。

ここでもしトップページにはないけど固定ページだけに共通するパーツがある場合は、以下のように書けば大丈夫です。

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

このh2の部分ですね。

htmlではh2の中身は会社概要などページタイトルを書いていましたが、それではどのページでも会社概要になってしまうので、ここは<?php the_title(); ?>という動的に出力するテンプレートタグに置き換えておきます。

これで固定ページごとに設定したタイトルが表示されます。

これで固定ページ用のテンプレートの作成は完了です。

 

固定ページにhtmlファイルのコードをコピペ

次はWordPressの管理画面からそれぞれの固定ページを作成していきます。

まずWordPressの管理画面から、固定ページ → 新規追加 → パーマリンク変更方法①と同じです。

ここでタイトルを会社概要とすれば、<?php the_title(); ?>と書いた箇所に会社概要と表示されます。

次に肝心の中身を書いていきますが、これは事前に作成しておいたcompany.htmlのヘッダーとフッター部分を除いたところをコピペします。

ここで注意して欲しいのが、張り付ける場所はビジュアルではなくテキストの方です。

この赤丸で囲った方ですね。

このテキストの方でないとコードは反映されません。

そしてここに先ほど説明したcompany.htmlのヘッダーとフッター部分を除いたところをコピペすればOKです。

しかし、このままでは画像が表示されません。

例えば、

<img src="img/top1.png" alt="">

というコードがあれば、

<img src="/wordpress/wp-content/themes/(テーマ名)/img/top1.png" alt="">

といった感じに画像のパスを書き換える必要があります。

しかしこれは面倒なので、ここで便利な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="">のままで画像を表示することが出来ます。

 

まとめ:固定ページはページごとにテンプレートを作る方がおすすめ!

今回は固定ページを作る方法を2つ解説しました。

恐らく一般的なのは最初に解説したページごとにテンプレートを作る方法かと思いますが、一応もう1つの方法も覚えておくといいかも知れません。


WordPress案件の単価と作業効率を上げる!

Brainランキング1位獲得 & 3日で500部突破

クチコミ約300件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月7万PV▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得。

-オリジナルテーマ, WordPress
-