オリジナルテーマ WordPress

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

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

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

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

固定ページの作り方は2つ

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

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

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

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

 

テンプレートファイルで作成

この場合は固定ページの数だけpage-〇〇.phpというファイルを作る必要があります。

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

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

という感じで、コンテンツの中身に関しては各テンプレートファイルに書きます。

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

 

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

この場合はテンプレートファイルはpaga.phpの1つだけで大丈夫です。

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

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

 

どちらの方法で作るか?

これは人によって意見が分かれるかと思いますが、前者のテンプレートファイルで作成した方が修正がしやすいので、私は特に指定がない限りこの方法で作成しています(固定ページの作り方で指定されたことはありませんが)

WordPressの編集画面にコピペしたコードを後から編集しようとすると、非常に見難くいです(やってみると分かると思います)

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

 

トップページの固定ページを新規追加

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

 

 

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

 

 

中身は空で大丈夫です。

これがトップページの固定ページとなります。

 

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

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

 

 

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

 

 

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

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

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

 

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

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

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

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

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

となります。

前回トップページ編ではトップページはこのようになりました。

<?php get_header(); ?>
<main>
  <h1>大見出し</h1>
  <section>
    <h2>コンセプト</h2>
    <img src="<?php echo get_theme_file_uri( 'img/concept.jpg' ); ?>" />
    <p>本文が入ります</p>
  </section>
</main>
<?php get_footer(); ?>

固定ページも同様にHTMLをまるっとコピペした後、header.phpとfooter.php部分は削除して、ヘッダーとフッターを読み込みます。

ただし上記トップページとはちょっと異なる点があります。

トップページ以外の固定ページはこのようになります(会社概要の場合)

<?php
/**
* Template Name: company
*/
get_header();
?>
<main>
  <h1>大見出し</h1>
  <section>
    <h2>コンセプト</h2>
    <img src="<?php echo get_theme_file_uri( 'img/concept.jpg' ); ?>" />
    <p>本文が入ります</p>
  </section>
</main>
<?php get_footer(); ?>

ヘッダーを読み込む所に「Template Name」があります。

ここに会社概要の固定ページとしてテンプレート名「company」と名付けました。

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

また投稿一覧はhome.phpで作りましたが、こちらも中身は同じように「Template Name」を書いて今回は「blog(BLOG)」と名付けます。

 

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

次に先ほどトップページを作った時と同様に、新規追加します。

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

 

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

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

 

 

この赤枠部分に「Template Name」で名付けたテンプレート名が表示されます。

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

 

また左上のパーマリンクが「会社概要」になっており、これはページ名を入力したら自動で同じテキストが反映されます。

ただここは日本語にするのはあまりよろしくありません。

例えば、パーマリンクが「会社概要」のままアドレスバーや外部サービスにコピペした場合、このように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です)

 

固定ページの作り方②

ここからは先ほどの違うやり方になります。

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

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

 

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

まず固定ページ用のテンプレートである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 class="page-title">
  <?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の管理画面から、固定ページ → 新規追加で作成します。

会社概要ページであればタイトルは会社概要としておきましょう。

ここで書いたタイトルが先ほどの<?php the_title(); ?>で表示されます。

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

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

 

この赤丸で囲ったところですね。

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

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

ここであと1つ手を加えないといけないのが、このままでは画像が表示されないという事です。

また画像のパスを書かないといけないんですね。

例えば、

<img src="img/top1.png" alt="トップ画像1">

というコードがあれば、

<img src="/wordpress/wp-content/themes/(テーマ名)/img/top1.png" alt="トップ画像1">

といった感じです。

ただしこれは面倒なので、ここで便利なfunctions.phpの出番です。

<?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="トップ画像1">のままで画像を表示することが出来ます。

 

以上です。

-オリジナルテーマ, WordPress