オリジナルテーマ WordPress

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

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

WordPressオリジナルテーマの作り方は、当記事を含め以下の記事があります。

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

また記事の最後にはWordPressのおすすめ教材をご紹介させて頂きます。

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

コーディングの時給アップにはこちら!


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

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

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

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

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

 

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

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

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

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

という感じになります(〇〇の部分は任意です)

コンテンツ(HTMLに書いたコード)は各テンプレートに書きます。

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

 

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

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

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

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

 

どちらの方法で作るか?

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

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

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

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

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

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

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

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

 

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

まずは管理画面左側の『固定ページ → 新規追加』をクリックします。

WordPress管理画面:固定ページ → 新規追加

WordPress管理画面:固定ページ → 新規追加

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

WordPress固定ページ編集画面:タイトル入力

WordPress固定ページ編集画面:タイトル入力

タイトルの下の方にある中身(ビジュアルエディタ、テキストエディタ)は何も書かなくて大丈夫です。

これがトップページになります。

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

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

WordPress管理画面:固定ページ2つ作成

WordPress管理画面:固定ページ2つ作成

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

WordPress管理画面:設定 → 表示設定

WordPress管理画面:設定 → 表示設定

次にホームページの表示を『最新の投稿』ではなく『固定ページ』を選択して、以下のように設定します。

  • ホームページ → HOME
  • 投稿ページ → BLOG
WordPress管理画面:表示設定

WordPress管理画面:表示設定

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

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

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

また、ローカル環境では検索エンジンは関係ありませんが、テストサーバーにアップした時は『検索エンジンがサイトをインデックスしないようにする』にチェックを入れた方がいいので、ここでチェックを入れてしまってもOKです。

本番サーバーに移行して公開する時にはチェックを外すのを忘れないようにしましょう!

 

注意ポイント

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

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

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

WordPress固定ページ:フロントページと投稿ページ設定完了

WordPress固定ページ:フロントページと投稿ページ設定完了

 

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

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

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

最初の方でも書きましたが、例えば『会社概要・お問い合わせ・採用情報』の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オリジナルテーマの作り方⑥(記事一覧ページ編)
WordPressオリジナルテーマの作り方⑥(記事一覧ページ編)

続きを見る

ヘッダーの読み込みは?

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

 

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

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

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

WordPress管理画面:固定ページ一覧

WordPress管理画面:固定ページ一覧

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

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

WordPress管理画面:固定ページ(会社概要を編集)

WordPress管理画面:固定ページ(会社概要を編集)

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

WordPress固定ページ編集画面:テンプレート選択

WordPress固定ページ編集画面:テンプレート選択

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

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

 

パーマリンク

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

WordPress固定ページ:パーマリンク

WordPress固定ページ:パーマリンク

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

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

パーマリンクが日本語の場合

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

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

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

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

WordPress固定ページ:パーマリンク編集

WordPress固定ページ:パーマリンク編集

WordPress固定ページ:パーマリンク入力

WordPress固定ページ:パーマリンク入力

WordPress固定ページ:パーマリンク編集完了

WordPress固定ページ:パーマリンク編集完了

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

 

固定ページの中身

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

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

 

imgタグ

これは前回の記事にも書きましたが、以下のように変更します。

imgタグの書き換え

・変更前
→ <img src="画像パス" alt="" />

・変更後
→ <img src="<?php echo get_theme_file_uri( '画像パス' ); ?>" alt="" />

この<?php echo get_theme_file_uri(); ?>という関数が変更点になります。

ここで注意して欲しいのがuri()の中の 『' '(シングルクォーテーション)』もしくは『 " "(ダブルクォーテーション)』です。

どちらでも大丈夫ですが、これがないと画像が反映されません。

 

サイト内リンク

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

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

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

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

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

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

WordPress固定ページ:パーマリンク

WordPress固定ページ:パーマリンク

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

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

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


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

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

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

先ほどは①でしたが、ここからは②の方法になります(①の方法で作るなら②の方法は覚えなくてもOKです🙆‍♂️)

 

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

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

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

<?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』のヘッダーとフッター部分を除いたところをコピペします。

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

WordPress固定ページ:テキストエディタ

WordPress固定ページ:テキストエディタ

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

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

そしてここに先ほど説明した『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オリジナルテーマ関連記事

 

WordPressオリジナルテーマ制作のおすすめ教材5選!

勉強方法は書籍、動画、プログラミングスクールなど色々あり、個人によって向き不向きがあると思います。

そこでタイプごとにご紹介させて頂きたいと思いますが、その前におすすめの勉強方法は以下になります。

  1. 分かるところまでどんどん進める
  2. 勉強に詰まる
  3. 無視して次に進む or 他の教材などを使う
  4. もう一度詰まった場所を見てみる
  5. 理解できるようになっている

これからご紹介する教材と一緒にこのブログを読み進めて頂けると、より理解が深まるかと思います。

 

書籍

WordPressに関する本も沢山ありますが、ここでおすすめするのは2冊です。

 

いちばんやさしいWordPressの教本

こちらは以前私が持っていた本で、タイトル通りやさしいというかWordPressを1から勉強したい人向けの内容となっています。

Lightningという無料のWordPressテーマを使った制作方法など載っています。

ちなみにLightningを使ったサイト制作についてはこちらのブログでもご紹介しています。

Lightningを使ってサイト作成(前編)

Lightningを使ってサイト作成(後編)

 

初心者からちゃんとしたプロになる WordPress基礎入門

こちらは私も個人的にお世話になっているちづみさんが書かれた本になります。

WordPressの本はこれまで何冊か購入しましたが、ダントツで読みやすいです。

ちなみに私が初めてにして唯一購入したコーディング教材がちづみさんのnoteでした。

また、初心者から実務経験者まで活用出来る非常におすすめの本となっています(電子書籍で購入しました)

 

動画

WordPressを動画で学びたい人はこちらの教材がおすすめです。

WordPress テーマ開発講座

本と違って動画だと手を動かしながら確認出来るのでいいですね。

こちらはUdemyの有料教材ですが、かなりの頻度でセールを行っていて90%オフとか良くあるので出来ればそのタイミングを狙いましょう(私はセール時に購入しました)

『WordPressの動画教材と言えばコレ』というくらい有名な教材で、私を含め周りでも購入している人がたくさんいます。

もちろんUdemyはWordPress以外の教材もたくさんあるので、気になる教材がセールをやっていたら購入を検討しても良いかも知れませんね。

 

プログラミングスクール

プログラミングスクールも色々ありますが『Web制作に特化したスクール』であればデイトラ一択かと思います。

開校1年で受講生が7000人を突破したオンラインスクールで、スクールと言ってもオンラインなので自宅で受講することが出来ます。

WordPressのカリキュラムは『Web制作コース上級編』にあります。

デイトラはTwitterをやっていれば分かりますが、悪い評判は見たことがなく、叩かれやすいWeb制作業界において非常にクリーンなイメージです。

カリキュラムの質が高いのはもちろん、他のスクールと比べて圧倒的なコスパかつ買い切りとなっています。

そしてカリキュラムはどんどん更新されるので『情報が古い』ということもなく、メンターに質問が出来る点も独学だと挫折しやすいWeb制作の勉強においてはおすすめです。

私の周りも『Web制作を始めるならまずデイトラを勧める』という人も多いです。

デイトラの無料レッスン動画はこちら

 

"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材

これはBrainという知識共有プラットフォームで販売されている教材になります(👇画像クリック出来ます)

【"誰でも月収50万円以上"を達成可能にする】初心者向け実践型WordPress教材

こちらは学習面以外にも制作会社とのやり取りの流れや、特典では『作業前・納品前のチェックシート』『営業文のサンプル』『見積もり計算シート』など『実務に対する不安を払拭できる内容』となってます。

LP1本のコーディング費が安くても3万円くらいだと考えれれば、軽く1日で回収出来るので早めに『安心』を購入しましょう。

詳細はこちらからどうぞ👇

今だけ!購入者限定の10大特典付き🎁

WordPress案件の不安を払拭!

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

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

-オリジナルテーマ, WordPress