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

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

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

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

WordPress固定ページのテンプレート導入方法

スポンサーリンク

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

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

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

固定ページのテンプレート名を認識させるコメント

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

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

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

テーマの編集画面:ほげほげ 固定ページテンプレート

固定ページのテンプレート:ほげほげ

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

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

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は拡張子❦

ポイント
  • 文字化け・エラー防止で文字コードはチェック。

文字化けなどしたら、上述の文字コードに変更すればOK!

  • 親・子テーマにあるファイル名別名する。独自のファイル名を付ける。

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

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

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

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

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

FTPソフトで名前を変えて子テーマにアップロード

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

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

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

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

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

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

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

テンプレートファイルの編集場所

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

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

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

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

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

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

例として、親テーマにあるsns-pages.phpsns-buttons.phpmain前で読み込みたいとき。(※このファイルはSimplicity2専用ファイル)

PHPテンプレートを表示した例

親テーマ:sns-pages.php・sns-buttons.phpをmain前ヘッダー下に表示した例



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

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

ポイント

1からシェアボタンを作成しなくても、テーマ内にあるファイルを読み込めば設定・スタイル共に出来上がったものが表示されて便利^^

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

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

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

固定ページにテンプレートを追加する手順1

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

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

下書き保存。

ポイント
  • トップページに変更する場合はパーマリンクは反映しない

※サーバーで登録したサイトアドレスdomain.comがトップページに指定した固定ページのアドレス

  • 固定ページのまま使用するならパーマリンクは反映する。

domain.com/perm-link/

  • リンクをクリックして、固定ページを表示すれば表示確認できる。

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

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

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

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

WordPressで固定ページをトップページに指定する

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

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

さいごに

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

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

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

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

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

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

トップへ戻る