Twenty Twenty-Four（WordPressテーマ）のトップページの作り方

Twenty Twenty-Fourの概要

新しいブロックベースによるテーマ Twenty Twenty-F​​our は、本質的には、テンプレートとパターンのコレクションであり、すべて組み合わされてテーマが構成されます。これらのパターンには、概要ページ、プロジェクト概要、出欠確認、ランディング ページなど、さまざまなユースケースに対応したさまざまなホーム テンプレートが含まれています。これまでのWordPressテーマは導入後テーマカスタマイザーを使ってカスタマイズをしてデザインを仕上げてきましたが、Twenty Twenty-F​​our はブロックエディタを使用し編集を行います。その為非常に柔軟性の高いものになっていますが、反面従来のテーマに慣れた方は戸惑ってしまうかもしれません。

※最新の情報を公式ページで確認ください

トップページ（ブログホーム）を作る

ダッシュボードで外観 > エディタ と進めるとサイドバーに次の デザインが表示されます。

• ナビゲーションはグローバルナビゲーションを設定、ページやカテゴリーを設定できます。
• スタイルは異なるスタイルの組み合わせ（フォントや背景色・色）を選択できます。
• 固定ページはサイトのトップページを固定ページにしたい場合作成できます。固定ページ > 新規固定ページの下書き > タイトル（例：トップページ） > 下書きを作成 > ページのパターンが表示されるので選択し修正を行います。サイトのトップページとして表示する場合は、 設定 > 表示設定で固定ページを設定する必要があります。編集は従来の固定一覧から記事を開いて編集することができます。
• テンプレートは、新しいテンプレートを作成するか、テーマによって提供されるテンプレートに加えられたカスタマイズをリセットします。
• パターンは、サイト編集時に利用可能なパターンを管理します。

サイドバーをつける

Twenty Twenty-Four はシンプルなシングルカラムデザインになっています。サイドバーナビゲーションを表示させるには、テンプレートからサイドバー付きの固定ページかサイドバー付きの投稿を選びカスタマイズします。編集画面から、エディター > テンプレート > Twenty Twenty-Four と進めば表示されます。

スタイルの編集や追加css

スタイルの編集を行うには　外観 > エディター > スタイルと進み、下図の鉛筆アイコンをクリックします。

スタイル編集画面では、フォントや色など変更できます。

テーマカスタマイザーには目立つところに表示されていた追加CSSは下部に配置されています。

固定ページでサイトトップ（HOME）を作るには、従来の固定ページにテンプレート、パターンを組み合わせて作り上げてゆくイメージになります。WordPresssサイトを運用されている方で、ブロックエディタで編集をされている場合は比較的なれることができると思いますが、そうでない方も、パターンによってパーツをページに貼り付けて仕上げてゆくものと理解できると利便性を感じることができるのではないでしょうか？

テーマを変更する手順

テーマを変更するには、管理画面からダウンロードし有効化するという流れになるのですが、いきなり有効化するのは少しリスクがあります。ウイジェットなどはテーマによって取り扱いが異なります、そこで以下の手順で変更されることを推奨します。

1. 変更前にバックアップする
2. ダッシュボード・外観　よりテーマディレクトリにアクセスする
3. ライブプレビューを確認し表示の調整を行う
4. 有効化して公開
5. 公開後の確認作業を行う

※ライブプレビューで確認して表示の調整をするには、ダッシュボードの　外観　画面でインストールしたテーマの有効化ボタンの右側　ライブプレビューボタンをクリックします。

テーマカスタマイザーによる調整ができるので、修正が終わったら左上部の「有効化して公開」ボタンをクリックします。公開後にはスタイルシートを修正、確認、設定します。以下の点については公開後早期にチェックするようにしましょう。

• 外部のツールと連携している場合は正しく動作しているか
• スタイルシートが正しく設定されているか
• 不要なプラグインは削除する。

テーマを安全に運用する

WordPressのテーマとは、サイト全体のテンプレートのことです。テーマは複数のファイルの集合体で、デザインなどの内容が一式セットになっています。そのため、テーマを変更すれば複雑な処理を行うことなく、デザインや構成、機能などを変えることができます。テーマは、インターネット上で無料ダウンロードできるものから、有料で販売されているものもあります。また、自分で作成したテーマをアップロードして使用することも可能です。

ウェブサイトのセキュリティにおいて、テーマの選択は非常に重要です。

安全なWordPressテーマを選ぶためのポイントは以下の通りです。

• 信頼できる提供元を選ぶ:
  • WordPress.orgの公式テーマディレクトリに登録されているテーマは、一定の品質とセキュリティ基準を満たしているため比較的安全です。
  • 評判の良い有料テーマの販売サイトや開発者から購入するようにしましょう。
• 最終更新日を確認する:
  • 長期間更新されていないテーマは、セキュリティ上の脆弱性が放置されている可能性があります。定期的にアップデートされているテーマを選びましょう。
• レビューや評価を確認する:
  • 他のユーザーのレビューや評価を参考に、信頼できるテーマかどうかを確認しましょう。
• 不要な機能が少ないシンプルなテーマを選ぶ:
  • 多機能なテーマは便利ですが、その分セキュリティリスクも高まる可能性があります。必要な機能に絞ったシンプルなテーマも検討しましょう。
• セキュリティスキャンを行う:
  • テーマ導入前に、Theme Checkなどのプラグインを使って、テーマのコードに問題がないかチェックするのも有効です。オンラインのセキュリティスキャンツールを利用することもできます。

避けるべきテーマ:

• 出所が不明なテーマ: 怪しいサイトからダウンロードしたテーマは、悪意のあるコードが埋め込まれている可能性があります。
• 最終更新日が非常に古いテーマ: セキュリティ対策がされていない可能性があります。
• 無料配布されている有料テーマ: 著作権侵害の可能性があり、セキュリティ上のリスクも高いです。

WordPress本体、プラグインと同様に、テーマも常に最新の状態に保つことがセキュリティ対策の基本です。

テーマの選び方

テーマを選ぶ際にはにはレスポンシブデザインかどうかは着目しましょう。レスポンシブデザインとは、スマートフォンやタブレット・PC別に１つのデザインで表示できるようにしたものです。サイトの内容によってはスマホユーザーが少ないこともあるでしょうが、Googleはモバイル端末での表示を標準と考えていますので、この点からも対応すべきポイトです。

一般的に、WordPressテーマを選ぶ際に考慮すべき点は以下の通りです。

• 目的と機能: どのようなウェブサイトにしたいですか？（ブログ、ビジネスサイト、ECサイトなど）。必要な機能（レスポンシブデザイン、SEO対策、カスタマイズ性など）が備わっているか確認しましょう。
• デザイン: 好みのデザインであることはもちろん、ウェブサイトの目的に合ったデザインであるかどうかも重要です。デモサイトなどで実際の表示を確認しましょう。
• レスポンシブ: スマートフォンやタブレットなど、様々なデバイスで適切に表示されるレスポンシブデザインであることは必須です。
• SEO対策: SEOに強く、検索エンジンに最適化されているテーマを選ぶと良いでしょう。
• 表示速度: ウェブサイトの表示速度はユーザーエクスペリエンスに大きく影響します。軽量で高速なテーマを選びましょう。
• カスタマイズ性: デザインや機能を自分の思い通りにカスタマイズできるテーマだと、より理想的なウェブサイトに近づけられます。
• サポート: テーマのドキュメントが充実しているか、困ったときにサポートを受けられる体制があるか確認しましょう。
• 価格: 無料テーマと有料テーマがあります。予算に合わせて選びましょう。有料テーマは一般的に機能が豊富でサポートも手厚い傾向があります。