WordPressテーマのpage.phpを編集して固定ページをカスタマイズする

WordPressテーマのpage.phpを編集して固定ページをカスタマイズする


今回は、WordPressサイトの固定ページをカスタマイズする方法として、WordPressテーマのpage.phpを編集して固定ページをカスタマイズする場合についてお伝えいたします。

WordPressには投稿と固定ページがありますが、ブログCMSとしてのWordPressとしては「投稿」が基本となるものの、投稿は「時系列的に流れていく」といった要素がありますので、重要で固定的なページはこの「固定ページ」を使用します。

固定ページの一番大きな特徴は、投稿のようにカテゴリー分けタグ付けはできないものの、各固定ページ間で親子関係を設計できる点です。

企業ホームページ制作を行う際、WordPressを利用する場合は、投稿よりもこの固定ページの方が重要になります。

WordPressテーマのpage.phpを編集する

WordPressテーマのpage.phpを編集する

WordPressテーマの中にpage.phpが存在している場合、このファイルが固定ページの基本的なテンプレートとなります。

WordPressテーマによってはpage.phpが存在せず、index.phpとcontent.phpなどを組み合わせて固定ページの仕様を設計しているものもあります。

page.phpとcontent.phpの組み合わせ

page php content php WordPress

またpage.phpがあったとしても、部分的にcontent.phpを利用しているケースもあり、page.phpのみの編集だけでは固定ページを完全にカスタマイズすることができない場合もあります。

固定ページのテンプレート

固定ページのテンプレート WordPress

さらにWordPressテーマによっては、固定ページに様々なテンプレートが用意されている場合があります。標準的な固定ページやサイドバーの有り無し、フロントページ用など目的に合わせてレイアウトや表示項目が異なるテンプレートパターンが用意されているケースです。

WordPressサイトの固定ページをカスタマイズするためにこのpage.phpやそれぞれの固定ページテンプレートを編集する場合は、WordPress管理画面から直接ファイルを操作するか、WordPressインストールサーバーにFTPなどで接続し、page.phpなどをダウンロードしてローカル環境でエディタを用いて修正します。

管理画面からpage.phpを確認し、編集する

管理画面からpage phpを確認し、編集する

WordPressにログインし、WordPress管理画面の左側に操作メニューの「外観」から「テーマの編集」を選択して、画面右側にpage.phpがあればそれをクリックしてください。なお、ページテンプレートが存在する場合は、page.phpの他に、類似名称のphpが存在する場合があります。

固定ページ(page.php)

固定ページ page php WordPress

WordPressテーマにもよりますが「固定ページ(page.php)」や「固定ページテンプレート(page.php)」、「個別投稿ページ(page.php)」といったように表記されています。

クリックするとWordPressサイトの固定ページを構成しているphpファイルが表示されますので、この画面から固定ページのカスタマイズを行ってください。

固定ページをカスタマイズする

固定ページをカスタマイズする

一般的にこのpage.phpには、固定ページが表示されたときのHTMLの吐き出しに関する設定が記述されています。

もし、記述がphpやWordPressタグばかりだった場合は、該当箇所からファイルを呼び出す設定になっているため、該当ファイルを探して、その部分を編集してカスタマイズする必要があります。

固定ページの中で編集したい該当部分のHTMLなどを編集してカスタマイズを行います。

テンプレートパーツのcontent-page.phpを呼び出す指定

テンプレートパーツのcontent-page.phpを呼び出す指定

例えば、Twenty Fourteenテーマだった場合、page.phpには次のような記述があります。

// Include the page content template.
get_template_part( 'content', 'page' );

この場合はテンプレートパーツのcontent-page.phpを呼び出す指定がされています。

もし固定ページをカスタマイズする際に該当箇所が見つからない場合はWordPressテーマファイルの構成を元に、該当ファイルを見つける必要があります。

カスタムフィールドの設定を反映させる

カスタムフィールドの設定を反映させる

固定ページにカスタムフィールド機能を付加した場合でも、そのままでは固定ページに反映されません。カスタムフィールドの設定を反映させるためには、page.phpなど、固定ページに関するphpファイルに、カスタムフィールドの項目の呼び出しを記述する必要があります。

著者名や投稿日、最終更新日の反映

著者名や投稿日、最終更新日の反映

またWordPressテーマによっては、固定ページに著者名や投稿日が反映されていない場合がありますが、カスタマイズにより著者名や投稿日、最終更新日を固定ページ内に反映させることもできます。

page.phpを触る前に知っておくべき「安全装置」

WordPressのテーマファイルを編集することは、サイトの心臓外科手術を行うようなものです。成功すれば自由自在にデザインできますが、失敗すれば画面が真っ白になり、管理画面にすら入れなくなるリスクがあります。

コードを書き換える前に、必ず以下の「安全装置」を用意してください。これを知らずに編集画面(テーマファイルエディター)を開くのは、命綱なしで綱渡りをするのと同じくらい危険です。

「子テーマ」を使わない編集は、すべて無駄になります

最もやってはいけないのが、親テーマ(ダウンロードしてきた元のテーマ)のpage.phpを直接書き換えることです。

テーマは定期的にアップデートされます。もし親テーマを直接編集していると、アップデートのボタンを押した瞬間に、あなたが苦労して書いたコードはすべて上書きされ、消えてなくなります。

カスタマイズを行う際は、必ず「子テーマ(Child Theme)」を作成し、そこにpage.phpをコピーして編集する癖をつけてください。子テーマであれば、親テーマがアップデートされても影響を受けず、あなたのカスタマイズは守られます。

「page.php」を編集すると、全てのページが変わってしまいます

page.phpは、そのサイト内の「すべての固定ページ」の表示を司る基本テンプレートです。 例えば、会社概要ページのデザインを変えようと思ってpage.phpを編集すると、お問い合わせページも、プライバシーポリシーのページも、すべて同じように変わってしまいます。

もし「特定のページだけ」デザインを変えたい場合は、page.phpそのものではなく、別名のファイルを作る必要があります。

page-about.php(スラッグがaboutのページだけに適用)

page-10.php(IDが10のページだけに適用)

このように「page-〇〇.php」という名前でファイルを作ると、WordPressは自動的にそのページ専用のデザインとして認識してくれます。これを「テンプレート階層」と呼びます。全体のルールを変えたいのか、特定のページだけ特別扱いしたいのかによって、編集するファイルを選び分けてください。

ダッシュボードのエディターではなく、FTPソフトを使ってください

WordPressの管理画面にある「テーマファイルエディター」は手軽ですが、実は非常に危険なツールです。 ここでPHPの記述ミス(セミコロンの忘れなど)をすると、保存した瞬間にサイト全体がエラーで停止し、このエディター画面にすら戻れなくなってしまいます(ホワイトスクリーン)。

プロは必ず、FTPソフト(FileZillaなど)を使ってパソコン上でファイルを編集し、サーバーにアップロードします。 これなら、もしエラーが出て真っ白になっても、FTPソフトから直前のファイルをアップロードし直すだけで、数秒で元の状態に戻せるからです。

PHPを触らなくても、CSSだけで解決できるかもしれません

リスクを冒してPHPファイルを編集する目的は何でしょうか。 もし「見出しのデザインを変えたい」「余白を調整したい」「特定の要素を非表示にしたい」ということであれば、PHPを触る必要はありません。それらはすべて「追加CSS」で解決できるからです。

PHPを編集する必要があるのは、「HTMLの構造そのものを変えたいとき」や「新しい機能(カスタムフィールドの出力など)を追加したいとき」だけです。 「display: none;」というCSS一行で済む話ではないか、一度立ち止まって考えてみてください。PHPの編集は最終手段にとっておくのが、サイトを壊さないコツです。

バックアップは「データベース」まで含めて初めて完了です

ファイルを編集する前にバックアップを取ることは常識ですが、画像やテーマファイルだけを保存しても不十分です。 WordPressの記事本文や設定情報は、ファイルではなく「データベース」の中に保存されているからです。

カスタマイズに失敗して復旧不能になったとき、データベースのバックアップがないと、サイトは初期化され、書いた記事もすべて消えてしまいます。「UpdraftPlus」などのプラグインを使えば、ボタン一つでファイルとデータベースの両方を丸ごと保存できます。編集作業の直前には、必ずこのバックアップボタンを押す習慣をつけてください。

WordPressサイトの「投稿ページ」・「固定ページ」カスタマイズ

WordPressサイト固定ページカスタマイズ

ホームページ制作 京都 ファンフェアファンファーレでは、WordPressテーマファイルの編集によるWordPressサイトの固定ページのカスタマイズをはじめ、お客さまのニーズに合わせたWordPressのカスタマイズを手がけております。

「現在利用しているWordPressテーマの固定ページの表示の仕方を変更したい」

「固定ページの見出しや表のデザインを変更したい」

といったご要望をお持ちの方へ、固定ページを構成するWordPressテーマのファイル群を編集することで、ご希望の仕様へとカスタマイズさせていただいております。

WordPressサイトの「投稿ページ」・「固定ページ」カスタマイズ

WordPressの設定・カスタマイズ・修正・編集方法の参考例

(初回投稿日 2015年11月6日)

WordPressカスタマイズ・修正

ファンフェアファンファーレのWordPress(ワードプレス)のカスタマイズ、テーマカスタマイズサービス

ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress(ワードプレス)のテーマ(テンプレート)やプラグインのカスタマイズサービスを提供しております。

WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧に対応しております。

WordPress(ワードプレス)のカスタマイズ

復旧・復元・エラー修正

ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPress(ワードプレス)で制作されたウェブサイト・ホームページの復旧(復元)、エラー修正サービスを提供しております。弊社制作のWordPress(ワードプレス)サイトの復旧、エラー修正も承っておりますが、自社制作・運営、他社制作・管理のWordPressサイトのエラー復旧(復元)・修正にも対応可能です。

WordPress(ワードプレス)の復旧・復元・エラー修正

WordPressの保守・セキュリティ・バックアップと復元

WordPressの保守やセキュリティについては、基本的にはバックアップによる保守管理で十分だと考えています。トラブル時のWordPressの復旧のためのWordPressの保守やセキュリティ、バックアップと復元について。

WordPressの保守管理 バックアップと復元で対応する

WordPressでのホームページ制作(WordPressサイト制作)

WordPress(ワードプレス)を使ったウェブサイト制作・ホームページ制作ならファンフェアファンファーレにお任せください!

ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作(WordPressサイト制作)を推進させていただいております。

企業のWebマーケティングを加速するWordPressでのホームページ制作(WordPressサイト制作)ならお任せください!新規WordPressサイト制作はもちろん、htmlサイトからのホームページリニューアル、WordPressサイトのリニューアルにも対応しています。

WordPress(ワードプレス)でのホームページ制作・ウェブサイト制作


著者・監修 : 株式会社ファンフェアファンファーレ

2012年創業の京都のWeb制作会社 ホームページ制作やSEO、Web集客・Webマーケティングをメインテーマにお届け。SEOやAI活用、Web以外の集客何でも来いです。中小零細企業を中心に「きちんとしたホームページ集客」を考えて、ホームページ制作や様々なWeb集客戦略を提案しています。 ホームページ制作に限ると、のべ制作数は160社(少ないって?それはそれだけ1社あたりのWeb集客施策や修正に集中してるからさ)

「WordPressテーマのpage.phpを編集して固定ページをカスタマイズする」のカテゴリ Web制作・Web関連
タグ: , , , ,


ホームページ制作・カスタマイズ、Webマーケティング・SEOなどのお問い合わせ・ご依頼