ワードプレスでトップページ編集する3パターンを解説

スポンサーリンク

トップページを編集する3つのパターン

固定ページをトップページに編集する

WordPressにはメニューや企業説明、お問い合わせフォームなど様々な用途に活用できる「固定ページ」があります。

この機能を活かしてトップページを作成することで、後に編集する際もスムーズに行うことができます。

固定ページなら動画、写真の埋め込みも簡単にできますし、テキストなどの装飾も通常の投稿ページを作成するのと同じ要領でできるので初心者にも優しいですね。

テーマによっては固定ページでハイクオリティなトップページを作成することができます。

トップページテンプレートファイルを編集する

トップページに使用されるテンプレートファイルを自分で編集(カスタマイズ)する方法。

PHP、HTML、CSSの知識がある方は、直接テンプレートファイルを編集することもできます。

home.phpやfront-page.phpに追加で記述をして編集していきます。

この方法で編集する場合は必ずバックアップを取るようにしましょう。PHPの基礎知識がない方は、最初は小さな変更を実践してみて、実際にどのように変わるのかを体験しましょう。

テーマを変えるのもトップページ編集方法と言えるかも

トップページのデザインで「この感じにしたかった!」というテーマがあるのならば、そのテーマを使ってしまうのも1つの解決策です。

ただし注意をするべき点は「トップページのデザインが良くても他のページがどうかは分からない」というところです。

テーマを選ぶ時はトップページ以外のページもデモサイトなどで確認するようにしましょう。トップページ以外を変更するにもPHPの知識が不可欠ですので、事前によく確認してからテーマをインストールするようにしましょう。

トップページを編集する前にすること

ワードプレスでトップページを編集していく前には「設計図」のようなものを作っておきましょう。

単純に紙にペンでサイトのイメージを書いたものでも十分ですので、「何をどのようにするのか」というものを頭の外に出して可視化しておくことが大切です。

現状のトップページのデザインとゴールとなる理想のデザインではどのような変更が必要でしょうか?追加で設置するものや削除するものなどがあると思います。

それらを大体でも良いので順序を立ててリストアップしておくと作業がスムーズに進みやすいのでおすすめです。

固定ページをトップページに編集する手順

通常は新着記事が表示されっるようになっているWordPressのデフォルトテーマ「Twenty Seventeen」

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タグのテキストと画像を挿入しました。

PHPファイルを編集する

入力が完了したら「ファイルを更新」をクリックします。

ファイル更新をクリック

こちらがindex.phpに追加したテキストと画像です。

編集後のトップページ

問題なく反映されているのが確認できました。

プログラミングを使ったトップページの編集

トップページと固定フロントページにのみ、画像を表示させたい場合は条件分岐タグの<?php if(is_front_page ()): ?>をheadedr.phpに追記すると「ここがフロントページ」と認識させることができます。

トップページテンプレートファイル編集時の注意事項

尚、本番用のテーマを直接カスタムするのは不具合のリスクを高めてしまいますので、PHPを編集する際は必ず編集前の状態のバックアップを取っておきましょう。

スタイルシートを編集する際は「子テーマ」を事前に作成してから作業に入るようにしましょう。

できればテスト環境で動作確認をしてから、公開環境を編集するようにしましょう。「http://test.ドメイン名.com」などのサブドメインでテスト環境を作れば費用もかからずにテスト環境が作成できます。

このように、常に変更を加える前の状態を復元できるような環境作りを忘れないようにすると良いでしょう。

トップページが細かく編集できるテーマ3選

Affinger

稼ぐサイトの設計図-AFFINGER4

Affinger

トップページのカスタマイズ性が高い有料テーマの「AFFINGER」

WordPressの管理画面よりトップページを細かく設定することができます。もちろん固定ページをトップに表示することも可能ですし、トップページのみワンカラム型にすることも簡単にできます。

トップページ上に使えるウィジェットもいくつもあるので、直接テンプレートをいじることなく、ほとんどの事ができるでしょう。

BizVektor

https://bizvektor.com/

Bizbektor

ユーザーの声に答えて定期的にアップデートしてくれるのが嬉しい「BizVektor」

こちらのテーマもトップページを細かく設定することができます。

トップ画像の真下にコンテンツを追加できるウィジェットはコーポレートサイトのコンテンツ紹介や個人ブログサイトの目玉記事の配置などに活用できるので便利です。

固定ページをフロントに設定するのも管理画面より簡単に反映させることができます。

Zerif Lite

https://ja.wordpress.org/themes/zerif-lite/

Zerif Lite

海外製のテーマでセンスの良さが際立っている「Zerif Lite」

カスタマイズ性の高さにも定評があり、特にコーポレートサイトには最適です。豊富なウィジェットと管理画面の組み合わせで多彩なバリエーションのカスタマイズができます。

尚且つ、Zerif Liteでは予め、数種類の子テーマが用意されています。用意された子テーマどれもクオリティが高く、各ジャンルに特化しているので、そのままでも十分使える仕様になっています。

トップページ編集方法のまとめ

どのような目的のサイトでも「トップページ」というのは大事な役割を持っています。

サイトの「顔」であるトップページに「何をどのように」表示するのかでユーザーのリピート率やコンバージョン率は必然的に変わってくるでしょう。

PHPに不慣れな方は、テスト環境で沢山の経験を積むことをおすすめします。テスト環境なら何度失敗しても問題ありません。事前に初期化できるように全てのテンプレートファイルのバックアップを取っておけば安心して実験を繰り返せますね。

「でも自信ないなぁ」とか「そんな時間あったらコンテンツが作りたい」と思う方はトップページのカスタマイズ性に優れているテーマをインストールするという方法もありますので、自分の今の状況や目的に合わせて方法を選択するのが良いでしょう。

スポンサーリンク