WordPressでフルサイトのテーマを使ってサイトを作成してみよう

テーマ「Twenty Twenty Four」の特徴と利点

WordPressの公式テーマ「Twenty Twenty Four」は、2024年向けにリリースされた最新のフルサイト編集（FSE）対応テーマです。

シンプルでありながら柔軟性の高い設計が特徴で、初心者からデザイナー、開発者まで幅広いユーザーに適しています。

フルサイト編集（FSE）対応

「Twenty Twenty Four」はフルサイト編集（FSE）機能を完全にサポートしています。テーマカスタマイザーを使わずにサイト全体をブロックエディターでデザインできます。

• テンプレート編集機能: ヘッダーやフッターを含む各部分を自由にカスタマイズ可能。
• パーツ再利用: 作成したブロックやテンプレートパーツを再利用でき、効率的な作業が可能。

2. シンプルでモダンなデザイン

「Twenty Twenty Four」のデザインはミニマリストに基づいており、余計な装飾を排除しています。特定のブランドや目的に合わせてカスタマイズしやすいのが特徴です。

• フォーカスを引き立てるレイアウト: コンテンツが見やすく、ブログやポートフォリオに最適。
• 洗練されたタイポグラフィ: 読みやすさを考慮したフォント選択とレイアウト設計。

レスポンシブ対応

「Twenty Twenty Four」は、タブレットやスマートフォンなど、あらゆるデバイスに自動的に対応します。

初心者にとってのメリット

• 簡単にカスタマイズ可能: FSEを活用することで、コードを書く必要がありません。いわゆるノーコードです。直感的な操作でデザイン変更が可能です。
• 無料で利用できる: WordPressの公式テーマとして提供されているため、コストをかけずに始められます。

Figmaでデザインを作成

Figmaで作成済みのデザインカンプをもとに、WordPressの「Twenty Twenty Four」テーマを使用してサイトを構築します。デザインの作成方法は、別途「Figma講座」をご参照ください。ここでは、完成したデザインカンプをサイト構築に活用するための準備手順を解説します。

Figmaから画像をエクスポート

Figmaで作成したデザインから、必要な画像やアイコンをエクスポートします。

1. エクスポートする要素を選択
   • デザイン内の画像やアイコンをクリックして選択します。
   • 必要に応じてグループ化や名前付けを整理しておくと便利です。
2. エクスポート設定を確認
   • Figmaの右サイドバーの「エクスポート」セクションで設定を行います。
   • フォーマットは「PNG」「JPG」「SVG」など、用途に合わせて選択します。一般的に以下の基準を参考にしてください：
     • PNG: 背景透過が必要な画像やロゴに使用。
     • JPG: 通常の画像や写真に使用。
     • SVG: アイコンやベクター画像に使用。
3. 画像をエクスポート
   • 「エクスポート」ボタンをクリックして保存します。
   • エクスポート先のフォルダを指定して整理します。

フォルダ構成を作成

エクスポートした画像を、サイト構築で使いやすいようにフォルダに格納します。以下のような構成が一般的です。

/project-folder
│
├── /images
│   ├── hero.jpg      （トップページのメイン画像）
│   ├── logo.png      （ロゴ画像）
│   ├── icon.svg      （アイコン画像）
│   └── ... その他の画像
│
└── /css, /js など（必要に応じて追加）

• フォルダ名やファイル名は分かりやすく、英数字で記述するのがおすすめです。
• 画像サイズが大きい場合は、Figmaエクスポート時や専用ツールで圧縮しておくとサイト表示速度が向上します。

サイトの基本設定を行う

テーマを有効化したら、サイト全体の基本設定を行います。

1. サイトのタイトルとキャッチフレーズ
   • 「設定」→「一般」から、サイトタイトルとキャッチフレーズを設定します。
2. パーマリンクの設定
   • 「設定」→「パーマリンク」で、URL構造を最適化します（例: 「投稿名」がおすすめ）。
3. フルサイトエディターに移動
   • 「外観」→「エディター」をクリックして、フルサイトエディター（FSE）を開きます。

Twenty Twenty Fourの初期テンプレートを確認

フルサイトエディターでは、「Twenty Twenty Four」に用意されている初期テンプレートを確認・編集できます。ダッシュボードのメニュー＞外観＞エディターをクリックしておきましょう。

1. テンプレートを確認
   • エディター内の「テンプレート」セクションで、トップページ、投稿ページなどのテンプレート一覧を確認します。
2. テンプレートパーツをカスタマイズ
   • ヘッダーやフッターなど、共通部分のデザインを調整できます。

テンプレート＞ブログホームをクリックすると、上部にあるヘッダーと下部にあるフッターが紫色の表示をしています。リストから選択して、ツールバーから、編集をクリックすると、各テンプレートパーツの編集モードとなります。

ブログ記事の入力練習　ループ用の記事を作成

トップページに新着情報として記事を3件表示させるために、クエリループの設定を行います。その前に、練習として3件の記事を作成しながら、WordPressのブロックエディタの使い方やアイキャッチ画像の設定について解説します。

ブロックエディタを使った記事作成の基本

1. 新規投稿を作成
   • 管理画面で「投稿」→「新規追加」をクリックします。
2. タイトルを入力
   • 記事タイトルを入力します（例: 「新メニューのお知らせ」「スタッフ紹介」「店舗移転のお知らせ」）。
3. ブロックエディタで本文を作成
   • 段落ブロック: テキストを入力します。
   • 見出しブロック: 文章をセクションごとに分けるために見出しを追加します。
   • 画像ブロック: 画像をアップロードまたはライブラリから選択して挿入します。
4. ブロックのカスタマイズ
   • 各ブロックの設定パネル（右サイドバー）を使用して、フォントサイズや背景色を調整します。

アイキャッチ画像を設定

1. アイキャッチ画像とは
   • 記事のサムネイルとして使用される画像で、新着情報やブログ一覧に表示されます。
2. 設定方法
   • 右サイドバーで「アイキャッチ画像」をクリックします。
   • 「画像を設定」をクリックし、ライブラリから選択または新しい画像をアップロードします。
3. おすすめのサイズ
   • アイキャッチ画像の最適なサイズは1200×675pxアスペクト比（16:9）か、1200px×630px（1.91:1）がおすすめです。Googleがおすすめとしているのは1200×630pxです。

テンプレートの確認と編集

ヘッダー・フッター・サイドバーのカスタマイズ

フルサイト「Twenty Twenty Four」テーマは、ヘッダー・フッター・サイドバーがブロックエディタを使って作成できるのが、それまでのテーマと異なる最大の魅力です。そのためには、テンプレート構造を確認し、必要な編集を行います。テンプレートやテンプレートパーツを理解し、固定ページと投稿ページのカスタマイズを進めましょう。

フルサイトエディターを開く

1. 管理画面で「外観」→「エディター」をクリック
   フルサイトエディターが開きます。
2. テンプレートを確認する
   左上のハンバーガーメニュー（三本線）をクリックし、「テンプレート」または「テンプレートパーツ」を選択します。

固定ページと投稿ページのテンプレート確認

1. 固定ページのテンプレート
   • 「固定ページ」テンプレートをクリックして構造を確認します。
   • 必要に応じて、デザインやブロック配置を調整します。
2. 投稿ページのテンプレート
   • 「投稿ページ」テンプレートには、サイドバーがあるバージョンとないバージョンが用意されています。
   • サイドバーの有無を確認し、適切なテンプレートを選んでカスタマイズします。