固定ページ用のカスタムテンプレートを作成、ページに反映してみよう!

固定ページ用のカスタムテンプレートを作成、ページに反映してみよう!

固定ページ用のカスタムテンプレートを作成し適用させる方法です。

通常page.php(or page-〇〇.php)の記述に則って作成される固定ページですが、作成したいページによってはガラッとその中身を変えたい場合もあります。

たとえば通常運用しているブログではサイドバーを表示しているけど、ある情報を載せるページではサイドバーを非表示にしたい、ブログに1から作成したLPを設置したい等。

そういった場合はpage.php(デフォルトテンプレート)とは違う固定ページ表示用のテンプレートを作成する事で管理、運用が行いやすくなります。

カスタムテンプレートを作成する

さっそくカスタムテンプレートを作成してみましょう。
今回はサイドバーを表示しないタイプの固定ページテンプレートを作成してみます。

新規のphpファイルを作成する

カスタムテンプレート用のphpファイルを作成しましょう。
今回は例として「no-sidebar.php」(雑なネーミング…)とします。

作成したらファイルを開き、ここに

<?php
/*
Template Name: no-sidebar(カスタムテンプレートの名前)
*/
?>

と記述します。

この記述があるファイルがカスタムテンプレートだと認識されます。

Template Nameにはカスタムテンプレートにつけたい名前を記述しておきます。今回はphpファイル名と同じくno-sidebarとしました。特に英数字表記という縛りがあるわけではないので「サイドバー無し」「1カラム」など自分でわかりやすい名前を付けておくと良いでしょう。

なんにせよ、これで「no-sidebar」というカスタムテンプレートが完成しました。

カスタムテンプレートを読み込む

上記の記述ができたno-sidebar.phpをFTP等を使ってワードプレスのテーマディレクトリ(/wp-content/themes/テーマ名/)の直下にアップロードします。index.phpやfunctions.phpが置いてある階層ですね。

アップロードが完了したら正しく認識されているか確認してみましょう。

正しくアップロードされたか確認する

「テーマ」→「テーマの編集」と進みます。

初めてテーマの編集画面に進むと、「テーマを編集しようとしています!」という警告文が表示されますが、確認を行うだけですので特に問題ありません。OKとして先に進みます。

コードが書いてある右側にテーマで読み込まれているファイルの一覧が表示されていますが、ここに

このように先ほど作成したカスタムテンプレートが表示されていれば正しくアップロードされています。

カスタムテンプレートを読み込む

それではこちらのカスタムテンプレートを使った固定ページを作成してみましょう。

「固定ページ」→「新規作成」と進みます。

いつも通りの固定ページの新規作成画面が開きますね。
ここでページ属性のテンプレートに注目してください。「デフォルトテンプレート」となっているかと思います。

ここをクリックすると

このように先ほど作成したカスタムテンプレートが表示されます。
作成したno-sidebarを選択することでno-sidebar.phpの記述に沿った内容で固定ページを表示させることが可能になります。

とはいえ、今のところno-sidebar.phpには何も記述を行っていないので表示させたとしても真っ白のページが出来上がるだけですが…

カスタムテンプレートに必要事項を記入する

カスタムテンプレートが正しく読み込まれるのが確認できたらphpファイルに固定ページの情報を表示させる記述を追加していきます。

本来ならこう書くと何が表示されて、これを追加すると何を読み込んできて~と説明するべきなのでしょうがテーマによってマチマチなのとソースの中身を理解できていない状態でそれをやってもミスの原因にしかならないのでやりません。

今回は

このような形に変更したいので通常固定ページの表示に使われているpage.phpから

<?php get_sidebar(); ?>

の記述を削除した物をno-sidebar.phpとして用意します。

自分でコードを書いていってもいいのですが、抜け漏れや記述ミスがあるとめんどくさい上に、いちいち表示を整えてやる必要が出てくるのでpage.phpの内容をまるっとコピー&ペースト→該当ソースを削除。

という流れが一番わかりやすいかと思います。

ただ、この方法でもコンテンツ表示領域がサイドバーありの横幅で指定されているかと思いますのでそこだけcssで調整をしてやる必要があります。

no-sidebar.phpのコンテンツ表示領域をcssで100%に指定し直すことで

このように横幅いっぱいにできました。
ここは各々調整していただく必要がありますのでご注意ください。

サイドバーが無い固定ページテンプレートの作成は以上となります。

カスタムテンプレートを作ろうのまとめ

という事で今回は固定ページ用のカスタムテンプレートを作成する方法でした。
今回no-sidebar.phpではサイドバーを非表示にしたテンプレートを作成しましたが、1からソースを書いたものを表示する事もできるので、LPの作成等にも転用可能です。

また今まで作成していた固定ページもテンプレートをデフォルトテンプレートから新しいものに変更して保存してあげることでカスタムテンプレートでの表示に切り替えることも可能です。

上手く使う事でお問い合わせ用の固定ページはこの形で、この情報を載せるページはこの形で、とページ毎で使いやすい形にブログを作りこんでいく事ができますのでお試しください。

機能追加カテゴリの最新記事