WordPressでホームページのレイアウトを変える方法（１）
スポンサーリンク
Word Press のキモは、記事の検索機能と思えます。
様々な表示、表現はCSSで実現されていることが多く、いわゆるMVC理論に基づけばC,コントロールを行うモジュール群が重要な位置づけでしょう。
今回は自分が直面した問題と解決方法を記します。
困ったこと：フロントページに固定情報と最新記事を併記したい
WordPressの初期設定は、最新記事をひたすら表示していくモノになっています。
最新記事のフロントページ
これはこれでいいのですが、書いた記事がノウハウとして残っていくようなサイトの場合、いくつかの記事をまとめた固定ページを作りたくなります。
そしてその固定ページをフロントページに貼って、訪問者がすぐに行けるようなショートカットを作りたいでしょう。
その一方でそういう固定記事が少なければ、その下に最新記事をおきたい気持ちもあります。別のページにすると面倒なので見てもらえないかもしれません。
どのように解決すればいいでしょう。対策は下記を組み合わせて行いました。
対策１ フロントページを固定化
まず、最新記事が表示されるままでは固定ページを入れる余地がないので、固定化します。
１ 固定ページに専用ページを作成
管理画面から固定ページ＞＞新規追加に進みます。
固定ページ
ページの名前は何でもいいですが、ホームぺージ としておきます。
slugは入れなくてもそのままでもいいです。(入れても下図のように消えます)
本文は不要なのでこの状態で公開ボタンを押します。
ホームページ
同様にしてslugをblog、本文は同様に空っぽで、タイトル 投稿一覧 を作り公開します。
2 ホームページの選択
管理画面の左のメニューから設定＞＞表示設定を選択し、ホームページの表示 という欄に行きます。
ここの設定は最初は最新の投稿 が選択されていますので、下の固定ページを選択します。
そうすると下のホームページ、投稿ページを選択できるようになります。
ここに先ほど作った固定ページのホームページと投稿一覧をプルダウンメニューから選択し、保存します。
フロントページの設定変更
これで、ホームページの表示は初期状態の最新記事のリスト表示ではなくなります。
ホームページの固定ページになにも記載していないので、空っぽのページができました。
記述がないので下図のホームページというタイトルとその下の広告の間に何も入っていません。
空っぽのフロントページ
残念ながらブログ記事の編集画面ではHTMLを記述できてもPHPは直接記述できないようです。目的はこのままでは達することができませんので、次のステップに進みます。
3 レイアウトを行うPHPファイルの用意
特定のページには、それ専用の処理を行ったレイアウトで表示をしたい場合があります。Word Pressの仕様と思いますが、それを行うファイルを下記のルールで準備することができます。
ホームページ： front-page.php
一般的な固定ページ：page-(ページのスラッグ).php 例；newsという固定ページであれば、page-news.php が専用のページファイルになります。
これがない場合は、固定ページのレイアウトはpage.phpに従います。page.phpがない場合のことはまた別の機会に。
Irvinejpテーマではfront-page.phpをPCDIYサイト用に作ったのでこれを流用しています。
これを置くだけで特別な設定なしでfront-page.phpの内容が参照されて、表示が変わります。
front-pageあり
あとはPHPとHTMLでront-page.phpを好きなように記述していきます。
ちなみに本サイトでは、フロントページは下記のような構成にしています。
- 最新情報
- アクセスの多い記事
- メニューと同じリンク先一覧
PHPはプログラムなので、これらの順番を変えることも簡単にできますし、無くすことや新機能を足すこともできます。また、これらに何を表示するかもPHPで細かく制御しています。
余談：もちろん管理画面から制御できれば良いのですが、まだそこまで知識がないです。
対策２については次回。
PR
仕事でUS,UK,SGなどの国とかかわる。
自作PC、スマホ、タブレット、AV機器好き。ドラクエウォークはルーチンワーク。Linuxやストレージ、IT業界の動向は興味を持っている。
新しい機器、サービスに興味あり。年数回のレビュー（自腹購入、ご依頼）と発表されて興味があるものの新製品机上レビューをやっている。
2022年はJAPANNEXT様のアンバサダーを務めました。 本ブログはpcdiyブログのテーマ作成の経験から得た知識を記録しています。
