「トップページが記事一覧になっているけど固定ページみたいにしたい」
「トップページデザインのここだけ変えたい」
こんな風にトップページにこだわりを持つ方は多いはずですよね。
今回はトップページを編集する方法を3パターンご紹介します。
【忙しい人向け】＜＜トップページ編集の方法まとめ＞＞
- 固定ページにする： 外観 > カスタマイズ > ホームページ設定 > 固定ページにチェックする。
- デザインをちょっと変更： FTPでhome.phpまたはfornt-page.phpを取得、なければindex.phpを取得してコーディング。さらに、左記のPHPファイルに紐づく別のPHPファイルを取得してコーディングする。
- テーマを変える： 自分が意図したデザインのテーマを探した方が時間節約できてクオリティが上がる場合はテーマ変更を検討する。
ちなみに「テーマを変える」以外の方法で自分が思った通りのデザインにするためには、PHPやCSSのコーディングのスキルが必要です。
コーディングの具体的な方法ですが、ブログや記事で断片的な知識を得るより、よくまとまった本や学習サイトで一通り勉強した方が効率がよくコスパもよかったりします。
レベル別に本の紹介をしている「ワードプレス本11選！レベル別におすすめ本を紹介」の記事もご参照ください。
目次
トップページを編集する3つのパターン
固定ページをトップページに編集する
WordPressにはメニューや企業説明、お問い合わせフォームなど様々な用途に活用できる「固定ページ」があります。
この機能を活かしてトップページを作成することで、後に編集する際もスムーズに行うことができます。
固定ページなら動画、写真の埋め込みも簡単にできますし、テキストなどの装飾も通常の投稿ページを作成するのと同じ要領でできるので初心者にも優しいですね。
テーマによっては固定ページでハイクオリティなトップページを作成することができます。
トップページテンプレートファイルを編集する
トップページに使用されるテンプレートファイルを自分で編集（カスタマイズ）する方法。
PHP、HTML、CSSの知識がある方は、直接テンプレートファイルを編集することもできます。
home.phpやfront-page.phpに追加で記述をして編集していきます。
この方法で編集する場合は必ずバックアップを取るようにしましょう。PHPの基礎知識がない方は、最初は小さな変更を実践してみて、実際にどのように変わるのかを体験しましょう。
テーマを変えるのもトップページ編集方法と言えるかも
トップページのデザインで「この感じにしたかった！」というテーマがあるのならば、そのテーマを使ってしまうのも1つの解決策です。
ただし注意をするべき点は「トップページのデザインが良くても他のページがどうかは分からない」というところです。
テーマを選ぶ時はトップページ以外のページもデモサイトなどで確認するようにしましょう。トップページ以外を変更するにもPHPの知識が不可欠ですので、事前によく確認してからテーマをインストールするようにしましょう。
テーマをご選択されるときは「ワードプレスの1カラムで美しいテンプレート10選」、「ワードプレスでビジネス向けなテーマの選び方とテンプレート20選」のページもご参照ください。
トップページが細かく編集できるテーマ3選
AFFINGER
トップページのカスタマイズ性が高い有料テーマの「AFFINGER」
WordPressの管理画面よりトップページを細かく設定することができます。もちろん固定ページをトップに表示することも可能ですし、トップページのみワンカラム型にすることも簡単にできます。
トップページ上に使えるウィジェットもいくつもあるので、直接テンプレートをいじることなく、ほとんどの事ができるでしょう。
開発元：株式会社オンスピード
価格：14,800円(税込)
主な用途：アフィリエイト、メディア
有料テーマはコーディングなしでトップページが細かく設定できるものが多数存在します。テーマをまとめた「抜群のコスパ！ワードプレスでおすすめの日本語有料テーマ18選」もご参照ください。
BizVektor
ユーザーの声に答えて定期的にアップデートしてくれるのが嬉しい「BizVektor」
こちらのテーマもトップページを細かく設定することができます。
トップ画像の真下にコンテンツを追加できるウィジェットはコーポレートサイトのコンテンツ紹介や個人ブログサイトの目玉記事の配置などに活用できるので便利です。
固定ページをフロントに設定するのも管理画面より簡単に反映させることができます。
Zerif Lite
https://ja.wordpress.org/themes/zerif-lite/
海外製のテーマでセンスの良さが際立っている「Zerif Lite」
カスタマイズ性の高さにも定評があり、特にコーポレートサイトには最適です。豊富なウィジェットと管理画面の組み合わせで多彩なバリエーションのカスタマイズができます。
尚且つ、Zerif Liteでは予め、数種類の子テーマが用意されています。用意された子テーマどれもクオリティが高く、各ジャンルに特化しているので、そのままでも十分使える仕様になっています。
Zerif Liteの使い方は下記の記事で詳しく解説しています。
参考記事：【 Zerif Lite 】無料のワードプレス・テーマZerif Liteの使い方
トップページを編集する前にすること
ワードプレスでトップページを編集していく前には「設計図」のようなものを作っておきましょう。
単純に紙にペンでサイトのイメージを書いたものでも十分ですので、「何をどのようにするのか」というものを頭の外に出して可視化しておくことが大切です。
現状のトップページのデザインとゴールとなる理想のデザインではどのような変更が必要でしょうか？追加で設置するものや削除するものなどがあると思います。
それらを大体でも良いので順序を立ててリストアップしておくと作業がスムーズに進みやすいのでおすすめです。
固定ページをトップページに編集する手順
通常は新着記事が表示されっるようになっているWordPressのデフォルトテーマ「Twenty Seventeen」
こちらのテーマを使って、トップページを固定ページに変更する方法を紹介します。
管理画面上で「固定ページ」→「新規追加」と進みます。
固定ページの作成画面が表示されますので、通常の投稿ページの作成と同じようにコンテンツを作成します。
どのように表示されるか確認したい場合は画面右上の「変更をプレビュー」をクリックしてプレビューを確認しましょう。
全ての作業が完了したら赤枠の「公開」または「更新」となっているボタンをクリックします。
これで固定ページの作成は完成です。
次に管理画面より「外観」→「カスタマイズ」の順に進みます。
カスタマイズ画面が表示されたらカスタム項目の中に「ホームページ設定」というメニューがありますので、こちらをクリックします。
「ホームページの表示」で「固定ページ」にチェックを入れます。
「フロントページ」では、固定ページのタイトル一覧が表示されるので、トップページに追加したいページタイトルを選択します。
追加で固定ページを挿入したい場合は「＋新規固定ページを追加」をクリックして、一連の作業を繰り返します。
作業が完了したらカスタマイズ画面の左上にある「保存して公開」をクリックして完了です。
こちらはトップ画面に反映された固定ページです。
カスタマイズ画面から設定した固定ページがしっかりと反映されていることが確認できます。
固定ページをトップページに追加する方法は、使用するテーマによって変わってきますので、設定に不安を感じる方はインターネット検索で「（テーマ名）固定フロントページ 設定」などのキーワードで調べると良いでしょう。
トップページテンプレートファイルを編集する手順
テーマによりますが、大抵の場合、トップページのテンプレートファイルは以下のファイルで構成されています。
index.php
テンプレートの中で一番最後に読み込まれるのがindex.phpです。
トップページ、カテゴリー、タグ、アーカイブなどのページテンプレートがない場合は全てindex.phpの内容が表示されます。
home.php
サイトのトップページのテンプレートの役割を果たすのがhome.phpです。
テーマによってはhome.phpがない場合もあります。index.phpよりも優先されて表示されるので、トップページのカスタマイズにはhome.phpを使用します。
header.php
サイトのタイトルやメタタグ情報、HTMLの宣言などを記述するのがheader.phpです。
ヘッダーメニューやRSS登録ボタンなども配置する。どのページを表示してもヘッダーは常に表示される、サイトの「顔」のような存在です。
sidebar.php
ブログサイトで頻繁に目にするサイドバーのテンプレートがsidebar.phpです。
AdSense広告を貼り付けたり、新着記事や人気記事のランキングなどを配置したりと、メインコンテンツのサブ的な役割を果たしています。
footer.php
サイトの最下部に当たるフッターのテンプレートがfooter.phpです。
サイトのコピーライト表記や会社情報などを表示する際に使用します。
個人ブログサイトでは、フッターにプロフィールを設置したりTwitterやFacebookを埋め込む方も多く、サイドバーと違い、メインコンテンツの邪魔をしないのが特徴です。
上記を総括すると、各部品（header.php、sidebar.php、footer.php）をindex.phpに当てはめるようなイメージですね。
テンプレートファイルについては、下記のページもご参照下さい。
【初心者向け】ワードプレスカスタマイズについて全て解説します!!
トップページテンプレートファイルの編集方法
それでは、実際にindex.phpに編集を加えてみましょう。
WordPress管理画面で「外観」→「テーマの編集」と進みます。
「メインインデックスのテンプレート」と書かれたテンプレートがありますので、こちらをクリックします。
「メインインデックスのテンプレート」（index.php）と書かれたテンプレートが表示されました。
ここに直接、記述を追加していきます。
こちらが編集前のデフォルト画面です。
今回は例としてh2タグのテキストと画像を挿入しました。
入力が完了したら「ファイルを更新」をクリックします。
こちらがindex.phpに追加したテキストと画像です。
問題なく反映されているのが確認できました。
【PR：DMMコミックレンタル】
プログラミングを使ったトップページの編集
トップページと固定フロントページにのみ、画像を表示させたい場合は条件分岐タグの<?php if(is_front_page ()): ?>をheadedr.phpに追記すると「ここがフロントページ」と認識させることができます。
<?php if ( is_home() || is_front_page() ) : ?> <img src="画像までのパス"> <?php endif; ?>
トップページテンプレートファイル編集時の注意事項
尚、本番用のテーマを直接カスタムするのは不具合のリスクを高めてしまいますので、PHPを編集する際は必ず編集前の状態のバックアップを取っておきましょう。
スタイルシートを編集する際は「子テーマ」を事前に作成してから作業に入るようにしましょう。
できればテスト環境で動作確認をしてから、公開環境を編集するようにしましょう。「http://test.ドメイン名.com」などのサブドメインでテスト環境を作れば費用もかからずにテスト環境が作成できます。
このように、常に変更を加える前の状態を復元できるような環境作りを忘れないようにすると良いでしょう。
カスタマイズを覚えるための書籍
インターネットで調べながらカスタマイズするのもよいと思いますが、体系的にひと通り大枠をつかんだり、ちょっと分からないことを調べるためのTips代わりに横に1冊あるとよいかもしれません。
ここでは、コーディングでカスタマイズしたいなと思い始めた方向けに、ワードプレスをカスタマイズするために必要になるHTML、CSS、PHPの書籍を紹介します。
たった1日で基本が身に付く! HTML&CSS 超入門
著者：WINGSプロジェクト、宮本 麻矢
出版社：技術評論社
発売日：2017/6/15
HTML、CSSの要点が凝縮された1冊。難解な単語もなく、仕様や考え方、コードの書き方もわかり易く書かれているため初心者には最適な1冊です。改めて基本を理解したいような独学でやってきた人にもおすすめです。
「たった1日で〇〇」と書いてあると内容が薄いんじゃないかと思われてしまいますが、基本理解やよく使うコードなど基本にフォーカスしているため、要点を学ぶための本としては内容が凝縮されています。時間、値段、内容を比較するとコスパの良い1冊です。
WordPressユーザーのためのPHP入門 はじめから、ていねいに。［第2版］
著者：水野 史土
出版社：エムディエヌコーポレーション
発売日：2017/3/28
WordPressでプログラミングする上で必要な基礎知識が理解できる1冊。PHPの基礎からWordPress特有の仕様などをわかり易く解説しています。ダウンロード可能なサンプルコードをなぞりながら進め、カスタマイズやテーマ作成に必要な基本的な内容が理解し易い作りになっています。
また、初版好評に付き改訂版を刊行したと著者が仰っているように、本書が第2版であることも評価のポイントですね。
ワードプレス関係の書籍についてはワードプレス本11選！レベル別におすすめ本を紹介でまとめてあります。
トップページ編集方法のまとめ
どのような目的のサイトでも「トップページ」というのは大事な役割を持っています。
サイトの「顔」であるトップページに「何をどのように」表示するのかでユーザーのリピート率やコンバージョン率は必然的に変わってくるでしょう。
PHPに不慣れな方は、テスト環境で沢山の経験を積むことをおすすめします。テスト環境なら何度失敗しても問題ありません。事前に初期化できるように全てのテンプレートファイルのバックアップを取っておけば安心して実験を繰り返せますね。
「でも自信ないなぁ」とか「そんな時間あったらコンテンツが作りたい」と思う方はトップページのカスタマイズ性に優れているテーマをインストールするという方法もありますので、自分の今の状況や目的に合わせて方法を選択するのが良いでしょう。