トップページを編集したい！トップページは編集者でも触れるの？
WordPressトップページの作り方がさまざまにあって、どうすればよいか迷うという方もいるでしょう。
WordPressトップページの作り方と編集方法について、WordPressデフォルトテーマを使用したおすすめの方法を解説します。

（当記事執筆時の最新デフォルトテーマは Twenty Twenty-Four です）

WordPressのトップページとは

そもそも「トップページ」とはなんでしょうか。トップページはWeb制作周辺ではよく使われる用語です。

Webサイトの入り口となるページは「ホームページ」と呼ばれます。
ただ、日本でホームページといえば「Webサイト」のことを指していることが多く、単に「ホームページ」と言った場合、ページのことなのかサイトのことなのかが分かりにくい状況です。
そこで入り口のページをWebサイトと区別するために「トップページ」という呼び方が一般的になっていると考えられます。

WordPressの表示設定ではもとの意味である「ホームページ」という言葉が使われています。

「フロントページ」という呼び方

WordPressのテーマやテンプレート階層の話題のなかでは「フロントページ（front page）」という呼び方があります。
これは一般的な呼び方ではなく、システム構成上で必要になった呼び方といえるでしょう。

WordPressテーマに属するテンプレートファイルで、システムが「トップ」と認識できるものは次の4つです。このなかに「フロントページ」というファイル名があります。

• home.php
• front-page.php
• page.php
• index.php

ただし Twenty Twenty-Four では「ブロックテーマ」という新しいテーマ構成のため、テーマ内にこれらのテンプレートファイルは存在しません。

WordPressトップページの2つの作り方

WordPressはテンプレートを作成してページを構成します。テンプレートはページの種類別に用意され、トップページのテンプレートもその一つです。

現在、テンプレートの作り方としては大きく2つの方法があります。

1. サイトエディターを使う方法
2. テーマファイルを編集する方法

デフォルトテーマ “Twenty Twenty-Four” は標準装備のサイトエディターを使用してサイトを構成する仕様のため、テーマファイルを直接編集する必要がありません。
“Twenty Twenty-One” 以前のテーマや、サードパーティーのベンダーが配布しているテーマでは、テーマファイルを編集する場合があるでしょう。

ここではサイトエディターを使う方法を中心に解説します。

WordPressサイトエディターとブロックテーマ

サイトエディターはブロック単位でページ内の要素を配置して、個別に編集したり位置関係を変更したりできるエディターです。
ブロックテーマはページ内のコンテンツ部分だけでなく、ヘッダーやフッター、さらにサイトのあらゆるページをサイトエディターで編集できるようにした統合的なエディターといってもよいでしょう。
それぞれについてもう少し詳しく見てみましょう。

サイトエディター

WordPressの「サイトエディター」は、ページのコンテンツを作成するための高機能なエディターです。Gutenberg（グーテンベルグ）という開発名で呼ばれることもあります。
段落やリスト、テーブル、画像などを「ブロック」という単位で管理して、それぞれに最適な編集機能を提供し、自由なレイアウトを可能にするエディターです。

WordPressバージョン5.0、デフォルトテーマ Twenty Nineteen で初めて「ブロックエディター」として標準装備されました。
その後「ブロックテーマ」が登場してからは「サイトエディター」として、サイト全体を対象としたエディターに進化しています。

ブロックテーマ

ブロックエディターの「仕組み」を拡張させたものとして「ブロックテーマ」があります。
ブロックテーマの仕組みは次に挙げるような「フルサイト編集機能」が特徴です。

• コンテンツ部分だけの編集にとどまらない
• ヘッダー・フッターなど、ページ内のあらゆるパーツをブロックで管理・編集できる
• 404ページなど通常のコンテンツではないページも同様に編集可能

ブロックテーマはWordPressバージョン5.9、デフォルトテーマ Twenty Twenty-Two 以降で標準となっています。

WordPressトップページをサイトエディターで作る

サイトエディターによるトップページの作り方を2つ紹介します。
「ブログホーム」テンプレートを編集する方法と、固定ページを作成する方法です。

①「ブログホーム」テンプレートを編集する方法

初期状態ではトップページは「ブログホーム」テンプレートを使用する設定です。
管理者権限があればテンプレートを編集できますが、もし編集者権限でトップを編集したい場合は、後述の方法で対応できます。

WordPressダッシュボードのサイドメニューから 外観 ＞ エディター ＞ テンプレート と進むと「テンプレート一覧」が表示されます。

　

　

　

　

　

このなかの「ブログホーム」テンプレートを編集することでトップページを作る方法です。

　

　

　

「ブログホーム」の画面で編集アイコンをクリックすると編集モードになります。

　

　

ページ内の任意の場所をクリックしてブロックを挿入できます。

不要なブロックは、クリックで選択してから上部のメニュー「3点アイコン」より「削除」を選んで削除できます。（図は概要のブロックを選択して削除するところ）

　

トップに記事一覧を表示させたい場合

記事一覧（投稿と固定ページの一覧）を表示させたい場合は「テンプレート一覧」にある「インデックス」テンプレートの内容をコピーして「ブログホーム」の内容と入れ替えると早く作成できます。

　

1. 「インデックス」の画面で編集アイコンをクリックして編集モードにします。

　

2. 右上部の「オプション」アイコンから「コードエディター」を選択すると編集画面がコードの状態になります。

　

　

　

3. コードをすべて選択してコピーしてから「ブログホーム」画面に戻って編集モードにします。

　

　

　

4. 編集画面のコードを削除して、コピーしたインデックスのコードを貼り付け、保存します。

　

　

②トップページ用の固定ページを作る方法

固定ページを作る方法のメリットは、編集者権限で編集できるという点です。
流れとしては次の3ステップです。

1. 固定ページを新規作成
2. 作成した固定ページを「ホームページ」に設定
3. 固定ページを編集

このなかで、ホームページに設定するのは管理者権限でなければできません。それ以外は編集者で管理できます。

実際の画面で見てみましょう。

1. 固定ページを新規作成します。

WordPressダッシュボードのサイドメニューから 固定ページ ＞ 新規固定ページを追加 を選択します。

　

新規作成画面が表示されるため、タイトル（たとえばMY HOME）を記入して「公開」または「下書き保存」をします。

　

固定ページ一覧で作成したページを確認しましょう。

　

2. 作成した固定ページを「ホームページ」に設定します。

サイドメニューから 設定 ＞ 表示設定を選択します。

　

表示設定画面にある「ホームページの表示」で「固定ページ」を選択し、さらに「ホームページ」欄で作成したページのタイトル（この場合はMY HOME）を選択して更新します。

　

サイトのトップを確認しましょう。

　

　

　

3. 固定ページを編集します。

固定ページの一覧から作成したページを選択して編集作業に入ります。

このように、2024年のテーマ Twenty Twenty-Four を使用すればトップページを簡単に作成・編集できます。

WordPressトップページに表示されるページを切り替える方法

これまでの説明に出てきた「ホームページの表示」の設定方法については、WordPress.org のサポート情報に詳しく書かれているため、一読をおすすめします。

参考：WordPress.org「表示設定画面」

WordPressトップページ作成の参考情報

最後に参考情報として、ブロックテーマに用意されている「テンプレートパーツ」とWordPressのユーザー権限について紹介します。

テンプレートパーツ

ブロックテーマのテンプレートパーツ機能を使うと、サイト内の各ページに共通のパーツ、たとえばヘッダー・フッター・サイドバーなどをテンプレートとして作成できます。

作成したテンプレートパーツは、ページのテンプレートを作成する際にページ内に挿入できます。
ブロック一覧から「テンプレートブロック」を選び、さらにテンプレートの名称を選択すれば、設置完了です。

テンプレートパーツを編集すると、設置されているページのテンプレートが一度に変更されるため便利です。

参考：WordPress.org「テンプレートパーツブロック」

デフォルトテーマ Twenty Twenty-Four ではインストール時に4つのテンプレートパーツが標準で用意されています。

テンプレートパーツ一覧を表示させるには、サイドメニューから 外観 ＞ エディター ＞ パターン に進み、一覧の最下部にある「すべてのテンプレートパーツを表示」をクリックします。

　

　

　

たとえばテンプレートパーツ一覧から Header をクリックするとヘッダーのテンプレートが編集できます。

　
標準のテンプレートパーツ Header・Sidebar・Post Meta・Footer それぞれに含まれているブロックを次の表にまとめました。（見出し・段落ブロックを除く）

Twenty Twenty-Four のテンプレートパーツ

WordPressブロックテーマ （Twenty Twenty-Four ）			説明
標準 テンプレートパーツ	ブロック	ブロックに含まれるブロック
Header ナビゲーションを含むヘッダー	サイトロゴ		画像選択
	サイトのタイトル		・タイトル入力 ・リンク設定
	ナビゲーション	固定ページリスト	固定ページタイトル一覧表示
		固定ページリンク	固定ページ一覧から選択してリンクを作る
		カスタムリンク	次の方法でリンクを作る・固定ページを検索 ・任意のURLを入力
Sidebar サイドバー	アバター		・ユーザーアバターの選択 ・画像サイズとリンクの設定
	作成者のプロフィール情報		・テキスト入力 ・サイズ等の設定
	カテゴリー一覧		・表示方法選択 ・投稿数表示有無など
	カスタムリンク		任意のURLを入力
	検索		表示幅の入力・選択
Post Meta 投稿のメタ情報	日付		・書式設定 ・リンク有無 ・最終更新日表示有無
	作成者名		リンク設定
	カテゴリー		カラー・サイズ設定
Footer ナビゲーションを含むフッター	サイトロゴ		画像選択
	サイトのタイトル		・タイトル入力 ・リンク設定
	サイトのキャッチフレーズ		カラー・サイズ設定
	カスタムリンク		任意のURLを入力

WordPressのユーザー権限一覧

WordPressを複数の担当者で編集・管理する場合は、それぞれが担当する役割に応じてユーザー権限を付与して運用できます。
担当者の権限を設定しておけば、誤って自分の担当部分以外の操作をしてしまうトラブルを防ぐことが可能です。
たとえば記事の作成だけを外部の専門家に依頼し、チェックと公開は管理者が行うという役割分担を簡単に実現できます。

WordPressには次の5つのユーザー権限が用意されています。

1. 管理者：すべての操作ができる
2. 編集者：投稿・固定ページの作成・管理ができる
3. 投稿者：投稿の作成と自分の投稿の管理ができる
4. 寄稿者：投稿の作成と自分の投稿の管理ができるが公開はできない
5. 購読者：記事を読むことだけができる

プラグインやシステムの設定は管理者だけが可能で、それ以外の権限では投稿・固定ページの管理に限定されています。

各権限で行える作業の概要を一覧を次表にまとめています。

WordPressの権限と操作の対応

操作	権限
	管理者	編集者	投稿者	寄稿者	購読者
テーマ管理	◯	−	−	−	−
プラグイン管理	◯	−	−	−	−
ユーザー管理	◯	−	−	−	−
管理画面の設定	◯	−	−	−	−
インポート・エクスポート	◯	−	−	−	−
WordPressの更新	◯	−	−	−	−
固定ページ管理	◯	◯	−	−	−
投稿管理	◯	◯	−	−	−
投稿の公開	◯	◯	−	−	−
JavaScriptコードの投稿	◯	◯	−	−	−
パーマリンクの編集	◯	◯	−	−	−
メディアのアップロード	◯	◯	◯	−	−
投稿の編集・削除	◯	◯	◯	◯	−
プロフィールの操作	◯	◯	◯	◯	◯
投稿の閲覧	◯	◯	◯	◯	◯

まとめ

WordPressのデフォルトテーマ “Twenty Twenty-Four” は、管理画面から高機能なブロックテーマを使用して、Webサイトのあらゆる編集が可能です。

テーマ編集の変遷

従来のWordPressテーマの編集では次のいずれかの方法がありました。

• コードエディターを使用してテーマファイルを直接編集
• 管理画面からの操作でテーマファイルを編集

しかしブロックテーマが標準装備されている現在では、管理画面からの操作だけでサイトの構成やページの内容が自由に編集できるようになっています。
さらにビジュアルエディターとコードエディターが用意されており、コードが苦手な人でも画面に直接手を加える感覚で編集できるのです。

最初にブロックエディターが搭載されたテーマ “Twenty Nineteen” 以降、テーマファイルの構成はバージョン毎に異なっているため、テーマファイルを直接編集しにくい状態になっています。

現在、デフォルトのテーマファイルはサイトエディターによる編集に最適化されています。今後テーマファイルを直接編集するのは、システム上の改変を行う場合に限られるでしょう。

Webの相談所について

Webの相談所はWordPressコントリビューターが運営しています。
WordPressの開発コミュニティに長く関わり、WordPressを熟知したスタッフが対応いたします。

スタッフには経験豊富なエンジニアとデザイナーが在籍。協力メンバーとともにタスクを遂行し、Webに関するさまざまなご相談から保守・制作のご依頼まで、ご相談に応じた柔軟なサービスを展開しています。

→ Webの相談所に問い合わせる