こんにちは。SaitoKouです。新しいWordPressのデフォルトテーマ「Twenty Twenty-Five」、リリースされてからしばらく経ちましたが、気になっていたのでどんなテーマなのかいろいろ触ってみて、例として建設会社の企業サイトを作成してみました！
本記事の構成
複数記事にわたり、Twenty Twenty-Fiveで企業サイトを作成するまでの操作方法を紹介します！
本シリーズをすべて見ていただくことで、公開可能な状態が作れるようにします。（今回の記事でいったん公開可能になります！）
また、本シリーズではHTML、CSSなどのプログラミングは一切使用しません！「WordPressでサイトを作りたいけど、高額なテーマは手が出ない…」「無料テーマでも、プロっぽいサイトは作れるの？」とお悩みのかたは良ければ参考にしてください！
完成予定のサイト
- トップページのみの企業サイト → 画像はこちら
- お問い合わせ用のリンク（サイト訪問者がクリックするとメールソフトが開き、設定したメールアドレスがToに設定される。）
本記事の手順実行前に準備するもの
- 「Twenty Twenty-Five」テーマの有効化
- 本シリーズ①下準備での設定が完了している
- 本シリーズ②、③トップページ設定が完了している
ヘッダー修正
サイトの最上部であるヘッダーの外観を変更していきます。完成予定サイトでは、左端にロゴとタイトル、右にグローバルメニュー（今回はトップページしか作成しないので、「HOME」のみ）があります。
■ 管理画面 ＞ 外観 ＞ エディター ＞ パターン ＞ ヘッダー まで選択していきます。
■ デフォルトでヘッダーに使用されているのは「Header」なので、これを編集します。
すると、ヘッダーのみを編集できる画面に遷移します。これはTwenty Twenty-TwoごろからWordPressの新たな機能として追加された部分で、ヘッダーもブロックエディタ（記事投稿と同じ編集方法）で編集できるようになりました。
■ リストビュー から サイトタイトル の 前に追加 でブロックを挿入します。
■ 追加されたブロックを「サイトのロゴ」に変更します。
■ 下図の部分をクリックして、ロゴを選択します。
■ 下図の部分をドラッグしながら、ロゴのサイズを調整します。
■ サイトロゴと会社名を左寄せにしたいので、ブロックをこのように配置します。「横並び」ブロックをサイトロゴの前に追加し、サイトロゴとサイトのタイトルを横並びブロックの子要素にしています。（リストビューを見ると、「横並び」の下に、右方向に少しずれて「サイトロゴ」が配置されていると思います。この時、「サイトロゴ」は「横並び」の子要素になっています。）
■ グローバルメニューの項目を追加します。下図のようにリンクを追加します。追加するリンクはサイトのトップページのURLです。
■ 表示される文字がURLのままになっていたので、下図の箇所に「HOME」と入力し、HOMEが表示されるようにします。
■ Sample Pageは削除します。
■ ここまでで、一度保存して表示を確認してください！
フッター修正
ページの最下部にあたるフッターを編集します。こちらもブロックエディタで編集が可能です。
■ ヘッダーのときと同様にパターン選択まで遷移します。デフォルトで使用されているのは「Footer」になるので、これを選択します。
■ 編集画面で、ブロックを追加したり消したりして、リストビューがこのような形になるように調整します。親要素子要素の関係に注意してください。
■ 「横並び」は上下左右共に中央ぞろえにしています。
■ ここまでで、一度保存して表示を確認してください！
公開準備
トップページが完成したので、ほぼほぼ公開できますが、最後に少しだけ設定をします。
■ 「404ページ」を調整しておきます。存在しないURLにアクセスされたときに表示するページです。テンプレートの数のページになります。
■ 日本語に直し、検索ボックスは削除して保存します。
■ Sample-Pageの非公開設定：管理画面 ＞ 固定ページ に遷移し、「Sample Page」の「クイック編集」をクリックします。下図の「非公開」にチェックを入れ、更新します。Sample-Pageは公開しないページなので、これで間違ってこのページのURLにアクセスしても、404ページが表示されます。
まとめ
お疲れさまでした！これでトップページ1枚のWebサイトが完成しました！
個人的にブロックエディタを使いこなすコツは、「リストビュー」で要素の順番や親子関係をしっかりと確認しながら作ることだと思っております。要素の順番や親子関係がおかしいまま設定を進めても、「なぜか中央ぞろえにならないな・・・」などとハマりかねません！リストビューをうまく活用しましょう！
いったん公開可能な状態になりましたが、「お知らせを追加できるようにする」や「お問い合わせフォームを作る」などといったこともシリーズの一つとして書いていこうと思います！
今回の記事をご覧になって、「やはり自分だけでは設定が難しいかも・・・」「もう少しすっきりした見た目のサイトにしたい・・・」と思われた方は、無料相談を受け付けておりますので、是非ご相談ください！
コメント