Twenty Twenty-Fourのトップページの作り方

新しいブロックベースによるテーマ Twenty Twenty-Four は、本質的には、テンプレートとパターンのコレクションであり、すべて組み合わされてテーマが構成されます。これらのパターンには、概要ページ、プロジェクト概要、出欠確認、ランディング ページなど、さまざまなユースケースに対応したさまざまなホーム テンプレートが含まれています。これまでのWordPressテーマは導入後テーマカスタマイザーを使ってカスタマイズをしてデザインを仕上げてきましたが、Twenty Twenty-Four はブロックエディタを使用し編集を行います。その為非常に柔軟性の高いものになっていますが、反面従来のテーマに慣れた方は戸惑ってしまうかもしれません。
Twenty Twenty-Four
Twenty Twenty-Four
Twenty Twenty-Four
- Active installations… 公式ページで確認
- Last Update… 公式ページで確認
- Preview
- view support forum
- WordPress version… 6.4
- php version… 7.0
- Ratings… 3.8 out of 5 stars.
★テーマの選び方
・利用されているか(インストールやダウンロード数)
・更新されているか
・サポートがあるか
・口コミやレビュー
トップページ(ブログホーム)を作る
ダッシュボードで外観 > エディタ と進めるとサイドバーに次の デザインが表示されます。

- ナビゲーションはグローバルナビゲーションを設定、ページやカテゴリーを設定できます。
- スタイルは異なるスタイルの組み合わせ(フォントや背景色・色)を選択できます。
- 固定ページはサイトのトップページを固定ページにしたい場合作成できます。固定ページ > 新規固定ページの下書き > タイトル(例:トップページ) > 下書きを作成 > ページのパターンが表示されるので選択し修正を行います。サイトのトップページとして表示する場合は、 設定 > 表示設定で固定ページを設定する必要があります。編集は従来の固定一覧から記事を開いて編集することができます。
- テンプレートは、新しいテンプレートを作成するか、テーマによって提供されるテンプレートに加えられたカスタマイズをリセットします。
- パターンは、サイト編集時に利用可能なパターンを管理します。
サイドバーをつける
Twenty Twenty-Four はシンプルなシングルカラムデザインになっています。サイドバーナビゲーションを表示させるには、テンプレートからサイドバー付きの固定ページかサイドバー付きの投稿を選びカスタマイズします。編集画面から、エディター > テンプレート > Twenty Twenty-Four と進めば表示されます。

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

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

テーマカスタマイザーには目立つところに表示されていた追加CSSは下部に配置されています。
固定ページでサイトトップ(HOME)を作るには、従来の固定ページにテンプレート、パターンを組み合わせて作り上げてゆくイメージになります。WordPresssサイトを運用されている方で、ブロックエディタで編集をされている場合は比較的なれることができると思いますが、そうでない方も、パターンによってパーツをページに貼り付けて仕上げてゆくものと理解できると利便性を感じることができるのではないでしょうか?
テーマを変更する手順
テーマを変更するには、管理画面からダウンロードし有効化するという流れになるのですが、いきなり有効化するのは少しリスクがあります。ウイジェットなどはテーマによって取り扱いが異なります、そこで以下の手順で変更されることを推奨します。
- 変更前にバックアップする
- ダッシュボード・外観 よりテーマディレクトリにアクセスする
- ライブプレビューを確認し表示の調整を行う
- 有効化して公開
- 公開後の確認作業を行う
※ライブプレビューで確認して表示の調整をするには、ダッシュボードの 外観 画面でインストールしたテーマの有効化ボタンの右側 ライブプレビューボタンをクリックします。
テーマカスタマイザーによる調整ができるので、修正が終わったら左上部の「有効化して公開」ボタンをクリックします。公開後にはスタイルシートを修正、確認、設定します。以下の点については公開後早期にチェックするようにしましょう。
- 外部のツールと連携している場合は正しく動作しているか
- スタイルシートが正しく設定されているか
- 不要なプラグインは削除する。
テーマの選び方
WordPressテーマを選ぶ際、ビジネスサイトでは、自社のイメージと近いデザインを選びましょう。中小企業や個人事業主の場合、高度なカスタマイズは負担が大きすぎ、デフォルトのデザインでサイトを作成し運用していくことが多いようです。このため、ビジネスサイトにおすすめな有料WordPressテーマを利用されるとデザインのカスタマイズが容易だったり、必要な機能がプラグインによって提供されているので、サイト運用開始時や運用中の負担を軽減できます。
テーマを選ぶ際にはにはレスポンシブデザインかどうかは着目しましょう。レスポンシブデザインとは、スマートフォンやタブレット・PC別に1つのデザインで表示できるようにしたものです。サイトの内容によってはスマホユーザーが少ないこともあるでしょうが、Googleはモバイル端末での表示を標準と考えていますので、この点からも対応すべきポイトです。
- レスポンシブデザインなのか
- デザインをカスタマイズしやすいか
- ダウンロード数(利用されている数)が多いのか
- ブロックエディタに対応しているのか
- 日本語に対応しているのか
- テーマは安全なのか
有料テーマ
WordPress有料テーマはおしゃれでカスタマイズしやすいのが大きなメリットです。 WEBサイト運用するための機能も標準として装備されているので、プラグインの追加をしなくても十分使用することが可能です。
無料テーマはシンプルなものが多く、他のサイトとデザインが同じようになってしまうこともあります。 しかし、有料テーマであればカスタマイズしやすくなっているため、好みのサイトを作成しやすいのが特徴です。
無料テーマ
wordpress.org からダウンロードできるテーマやWEB制作会社から提供される無料テーマもあります。無料とは思えないほど機能やデザインが充実しているテーマもあります。ただし、無料がゆえに途中で更新がストップしたり、開発が終了されることもあります。無料テーマは開発者の宣伝や有料版へのステップとして提供されていることもあると認識しておきましょう。
wordpress.org のテーマはディレクトリ登録時に事前に審査が行われるので、製作者サイトからの直ダウンロードに比較すれば安全といえるでしょう。ただし、サポートはありませんのでwordpress.orgやネットの情報で自力で解決しなければなりません。
テーマを安全に運用する
テーマを安全に運用するには、アップデートに対応することです。テーマの更新には、機能の追加・変更などのほかに、セキュリティ向上や不具合の修正なども含まれるため、常に最新の状態にアップデートしておくことです。また、テーマを更新すると、カスタマイズは初期化してしまいます。更新する度にカスタマイズし直すのは手間がかかるので、「子テーマ」の利用が推奨されています。子テーマを作る理由はテーマを直接カスタマイズしてしまうと、テーマのバージョンアップによって変更した内容が上書きされてしまうからです。子テーマは、親テーマの機能やスタイルを引き継いでいます。子テーマにカスタマイズしたい部分だけを付け加えておけば、テーマを更新した後もカスタマイズした状態をそのまま引き継げます。
注意したいのは、テーマによってはWordPressの更新に合わせるためにそれまでの記述ができなくなってデザインの崩れが発生してしまうことがあります。突然デザインの崩れを発見すると、何が原因なのかわからず戸惑ってしまうものです。バックアップできるプラグインやレンタルサーバーのバックアップ利用し不測の事態に備えておきましょう。

-
【ザ・トール】は圧倒的に美しくおしゃれな有料テーマ
ザ・トールは、圧倒的に美しくおしゃれなテーマです。ランキングサイト・口コミサイトやおしゃれで美しいデザイナーズサイトが簡単に作れ…
-
【ストークSE】はモバイルファーストでブロガー専用テーマ
ブロガー専用のWordPressテーマ「OPENCAGE」 モバイルファースト思想でつくられたブロガー専用のWordPressテ…
-
【LIQUID PRESS】は幅広い企業サイトで導入される有料テーマ
WordPress公式有料サポートテーマに登録されているテーマです。 公式レビューやテーマチェックをクリア済のため、安心して利用…
-
【Emanon】は企業サイト向けでWEB集客に特化した有料テーマ
企業サイトやビジネスサイト、オウンドメディアに必要なWeb集客機能と自由度の高いレイアウト機能を搭載しています。見込み客を増やす…