初心者向け、WordPressで自作テンプレートを固定ページにする工程！トップ・フロントページにする方法付き

WordPressで、自作したテンプレートを子テーマにアップロードする工程と、固定ページとして導入する方法を初心者向けに説明します。

またWordPressの設定で、テーマ内に導入された固定ページを、ブログのトップ・フロントページに指定する工程と一緒にチェックしてください。

※WordPress初心者さんは、順番にチェックすれば分かりやすい内容です。

固定ページで自作テンプレート名が表示しないとき、反映させるコメントの書き方

PHPファイルとして読み込み、ファイル内で指定し表示するだけなら、テーマフォルダ内にアップロードするだけOKです。固定ページで追加した独自PHPファイルを使うには、固定ページ テンプレートとして認識させる必要があります。

固定ページ テンプレートとしてテーマに反映させたいけど、外観より編集画面上にファイルがあるのに、固定ページとして表示しない。固定ページ内で追加したファイルを読み込まない。今から固定ページのテンプレートと反映させたいときの書き方です。

固定ページでテンプレート名を表示・認識させるには、導入したPHPファイルにTemplate Name: ※※とコメントを付ける事で反映します。

<?php
/*
Template Name: ほげほげ
*/
get_header(); ?>

<--! ここにコード -->

コメントアウト/* */して、テーマに表示させたいテンプレート名を書いてください。5行目のコードget_header();を入れると、テーマのheaderを読み込む。

Template Name: ほげほげとコメントを書くだけで、『ほげほげ 固定ページテンプレート』と表示します＾＾

名前はあなたがわかる任意の名前を付ければOK！これで第一段階は、大成功❦

※ちなみにheaderを読み込みたくない場合、下記例のようにしてください。

<?php
/*
Template Name: ヘッダーが不要な時の例
*/
?>

<--! ここにコード -->

WordPressのPHPファイル、文字コードをチェック

WordPressのPHPテンプレートファイルは、文字コードがおかしいと『???』などと文字化けを起こし何を書いてるのか分からなくなる場合があります。

• UTF-8のbomなし(n)でアップすれば問題ありません。

※Windowsのメモ帳は、UTF-8しかありません。名前は似てても、プログラムの処理は全く違う。

UTF-8bomなし(n)の指定できるテキストエディタを使い文字コードを指定、改行コードはCR+LF（もしくは、LFに）＾＾

LINKWordPressのUTF-8Nbomとは！文字コード・改行コードについて

全くサッパリ意味不明！という初心者さん、安心してください❦次の方法を準備しました＾＾

親テーマのPHPファイルを、独自テンプレートに変更：初心者向け

FTPソフトを使用し、親テーマのテンプレートファイル（index.phpとか）をPCにダウンロード。ファイルの内容をUTF-8bomなし（n）の使えるテキストエディタで編集したら名前を変更し上書き保存します。

ファイル名を日本語にして万が一でも%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa.phpこんなファイル名になっても困る…ので、小文字ローマ字で書いてください。category.php・hoge.phpなど。※.phpは拡張子❦

まだまだ摩訶不思議ワールドから脱出できない初心者さん！次の方法をどうぞ❦

分かる方は、使用中テーマ内フォルダにファイルをアップロードしてください。パスは後述。

テーマ内に固定ページテンプレートをアップロード：初心者向け

初心者さん向けでしたら、FTPソフトで親テーマのindex.phpなどのPHPファイルをPCにダウンロード。ダウンロードしたPHPファイルを、FTPソフトで名前を変更して子テーマにアップロードすれば文字コードはクリアです＾＾

※変更する名前は、既存のモノと同じにしない、独自のモノ。お忘れなく＾＾

パス：/domain.com（/public_html）/wp-content/themes/simplicity2-childなど使用中テーマのフォルダ内

その後編集が必要なら、導入したテーマ内で『編集やコードのコピペ』をしてください。

• PHPの記載を間違えてエラーが出たとき
  • 名前を変えてアップロードした該当ファイルをFTPソフトで削除。
  • それだけで復活！（ファイルを入れただけだから、他のページはエラーは出ない）

アップロードした、固定PHPファイルを編集

子テーマの『外観』ー『テーマの編集』に名前を変えた元index.php（例えば）henkou.phpが導入されたので、テーマ内でも編集は可能です。なるべくローカルやテスト環境で編集するのがオススメ！

ファイルの内容はSimplicityの場合なら下記の通り。これを任意のものに変更できます。

<?php
/*
Template Name: ほげほげ
*/
get_header(); ?>

<?php get_template_part('list') ?>

<?php get_footer(); ?>

この場合、header・footerは使用中のデザインと全く同じになり、<?php get_template_part('list') ?>の部分を削除し、作成した（してもらった）HTML・PHPコードを追加・コピペして仕上げてください。

テンプレートファイルを読み込むget_template_partの使用例

例えば自作ファイルに広告が表示してないときなど、テンプレート内に任意の場所に広告を表示させたい。同じコードを何度も書くのが面倒なとき。

以下のように独自のカスタマイズ：例adsense .phpファイルを作成して、表示させたい場所にコード書けばテンプレートもスッキリし、わかりやすいです。

<?php //adsense用 ?>

<--! ここの1行を削除。表示させたいHTMLなどコードを書く -->

adsense.phpファイルの内容を読み込みたい箇所に、下記コードを入れる。（参考元のSimplicityでも使用され、子テーマから親テーマ内ファイルも読み込める）

固定ページのテンプレートファイルに以下のように追記します。

<?php
  get_template_part('adsense');
?>

このadsense.phpは、読み込み表示専用ファイルですね。

例として、親テーマにあるsns-pages.php・sns-buttons.phpをmain前で読み込みたいとき。（※このファイルはSimplicity2専用ファイル）

<?php
  get_template_part('sns-pages');
  get_template_part('sns-buttons');
?>

<main>
  <div id="main">

と、表示したい場所に入れると、親テーマのSNSが表示されます。※表示したいPHPファイルの内容を固定ページにコピペしてもOK！

テーマ内PHPをこのように読み込む事もできます。また1～4行目phpのコードにHTMLタグasideやdivで囲って、装飾しても良いかもしれません＾＾

<div class="hoge">
<?php
  get_template_part('sns-pages');
  get_template_part('sns-buttons');
?>
</div>

表示の確認は、固定ページを作成すれば可能です。

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

ダッシュボードの『固定ページ』から『新規追加』します。

• タイトル
  • 自分が分かるような任意のもの
  • 管理画面以外で表示されない
• 固定ページの属性から、テンプレートを設定
  • 作成し追加したテンプレートを選ぶ
• 下書き保存

• パーマリンクは、ご自身で指定するなり変更してください。
• コンテンツ部分（記事）は書いても反映しないので、空欄のままでOK＾＾

下書き保存。

完成すれば公開ボタンを押すと反映します❦

※固定ページの属性にあるテンプレートに作成したファイル名が表示されてない場合、初めの見出し：固定ページのテンプレートと認識させてください。

 固定ページをトップ・フロントページに変更する場合

独自テンプレートを固定ページに設定できたらトップページにする為、WordPressのダッシュボードー設定ー表示設定を開くと、フロントページの表示欄があります。

1. 固定ページにチェックを入れる。
2. フロントページにしたい『固定ページを指定』し変更
3. 保存

トップページにアクセスすると、指定した固定ページを表示できますよ＾＾

さいごに

独自テンプレートファイルを固定ページに導入するのは、多少PHPの知識も必要ですが、テーマで使用されているコードを使いまわす事で、私のような素人でもテンプレートファイルを作りやすいです。

PHPでどうしても困ったら、エンジニア特化型Q＆Aサイト【teratail（テラテイル）】に頼むのも良いかもしれません。

固定ページの活用方法はたくさんありそうですが、勉強を兼ねて初めて作った場合は以下のカテゴリを参考にどうぞ＾＾

LINKカテゴリ：HTMLとCSSの基本

レスポンシブ対応するならメディアクエリは必須ですから、お勉強中でしたらチェックしてくださいね❦

それではかうたっくでした。