Go to top Go to bottom

WordPressの外観、機能の根幹を担っているテーマは、WordPressの持つ様々な仕組みを組み合わせて作られています。どの仕組みを使うかはテーマ依存なのですが、大体どのテーマでも使用される共通の仕組みというものがあります。

前回の記事で、テーマを適用してブログ記事を投稿するところまでできるようになりました。今回はテーマそのものの構造を大まかに把握して、WordPressでサイトを構築するうえで必要となる知識を習得していきます。

テーマの構成を把握しよう

まずはテーマの大まかな構成と名称について理解していきましょう。

ホームページ(ブログページ)

Twenty Seventeenを例にとってみていきたいと思います(デフォルトの状態から少しカスタマイズしてあります)。

Twenty Seventeenの外観
Twenty Seventeenの外観

大きく分解すると、15の5つのエリアで構成されています。

1ヘッダーと呼ばれる部分で、ブログのタイトルやロゴ、キーとなる画像などで構成されています。Twenty Seventeenでは画像がフルスクリーンで表示されるのが特徴的ですね。

2メニューと呼ばれるもので、サイトの主要なリンクが表示されます。

3はこのページのコンテンツです。ブログの一覧ページ(ホームページ)では記事を自動で並べるので、特に何もする必要がありません。

4サイドバーと呼ばれ、ウィジットと呼ばれる部品の集まりで構成されることが多いと思います。「サイド」と呼ばれはしますが、必ずしも横にあるわけではありません。

5フッターと呼ばれます。もっぱらソーシャルメディアへのリンクや、著作権表記を行ったりするのに用いられることが多いエリアです。

WordPressではブログの一覧が表示されるページを、”home”と表現します。一方、サイトのトップページは、”front page”と呼びます。両者が一致していることもありますが、homeが必ずしもサイトのトップページにあるとは限りません。

シングルページ

シングルページとは、実際の記事が表示されるページのことを言います。前回の記事で、実際に投稿して確認しましたね。

シングルページ
シングルページ

ホームページと比較するとわかりますが、ほとんど同じ構成をしていることがわかります。

コメントの投稿フォームや、前の記事へのリンクがありますが、それ以外はあまり変わりません。

固定ページ

固定ページとは、サイトで1ページとして独立しているコンテンツを作成するときに利用されます。

固定ページ
固定ページ

上の例では「筆者について」というページが固定ページで、メニューに常に表示されています。レイアウトもシングルページとは異なりますね。

ブログの記事は時系列で表示されるため、古いものはアクセスしにくくなりますが、例えば「会社概要」や「アクセス」などといったメインのメニューに固定しておきたいページは、固定ページを用いて作成します。

管理画面との対応関係

さて、今度は各々のパーツが管理画面のどの部分と対応しているかを見ていきます。すでにブログの記事が投稿に関連していることは述べましたので、それ以外を説明していきます。

ちなみに、詳しい使い方の説明はまた今度行いますので、今は対応関係を把握するだけで大丈夫です。

固定ページ

固定ページのメニュー
固定ページのメニュー

固定ページは、管理画面左の[固定ページ]から管理します。ブログの投稿とほとんど同じ要領で追加することができます。

ブログでは投稿をよく使いますが、たとえばコーポレートサイトやポートフォリオサイトでは、固定ページのほうをよく使います。

メニュー

メニュー
メニュー

メニューは、サイトの主要なリンクを集めて表示できる仕組みです。管理画面上では[外観]→[メニュー]とたどります。

メニュー
メニュー

画面右側に、サイトで表示されている「ホームページ」と「筆者について」という項目があります。このページで、メニューに何が、どういう順番で含まれているのかを決めることができます。

サイドバーとウィジット

サイドバーは、一つ、またはそれ以上のウィジットという部品で構成されています。

サイドバーは、[外観]→[ウィジット]とたどると設定画面を開くことができます。左側に利用できるウィジット(部品)が、右側にメニューで実際に使われているサイドバーと、含まれているウィジットが表示されていますね。

ウィジット管理画面と実際の表示
ウィジット管理画面と実際の表示

管理画面と実際のWebサイトを比較するとわかりやすいと思います。サイドバーに含まれているウィジットがそのままの内容・順序でWebサイトに表示されていることがわかります。

それ以外の項目

それ以外の項目は、テーマカスタマイザーで行える場合があります。どこを修正できるかはテーマ次第ですが、Twenty Seventeenの場合は、ヘッダーを含めいくつかの項目に対応しています。

ヘッダーメディアの変更
ヘッダーメディアの変更

テーマカスタマイザーは、[外観]→[テーマ]から、有効になっているテーマの上にある[カスタマイズ]ボタンを押すことで起動できます。

上の画像は、ヘッダーの画像を変更しようとしている画面です。

テーマカスタマイザー
テーマカスタマイザー

Twenty Seventeenでは、7つの大項目に対応しているのがわかります。もっと細かく対応できるテーマもありますし、ほとんど対応していないテーマもあります。

おわりに

今回は、簡単にテーマの構成を見ていきました。次のチェックリストで、Webのどの部分を指しているのか、あるいは管理画面で言うとどのあたりになるのか、などのイメージがわくかどうか確認してみてください。

  • メニュー
  • サイドバー
  • ウィジット
  • ホームページ
  • シングルページ
  • 固定ページ
  • テーマカスタマイザー

次回からは、実際にテーマを設定・カスタマイズする方法を順番に見ていきます。

つづけて読む

この記事には続きがあります。

ぜひ合わせて読んでみてください!