WordPress 6.4.x 対応 Twenty Twenty-Fourでウェブサイトを作ろう

WordPress 6.4.x 対応 Twenty Twenty-Four でウェブサイトを作ろう

WordPress 6.4.x 対応

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログサイトから、ポートフォリオサイト、ビジネスサイトの作り方を細かく手順を紹介しています。

WordPress デフォルトテーマでどんなことができるのか体験してもらうことを目指した書籍です。

デモサイト

本書で制作できるウェブサイトのデモを用意しています。

現在、改訂版の用意のためデモサイトを閉鎖しています

シンプルブログサイト

ポートフォリオサイト

コーポレートサイト

はじめに

WordPress 5.9 からフルサイト編集やブロックテーマが利用可能になりました。

サイトエディター(フルサイト編集)やブロックエディターを活用し、ブロックテーマでウェブサイト全体をブロックを使って構築するスタイルは、これまでのクラシックテーマを使ったウェブサイト制作とは別のものになります。

WordPress デフォルトテーマも Twenty Twenty-Two からブロックテーマとなり、最新の Twenty Twenty-Four は以前のデフォルトテーマよりも幅広いジャンルのウェブサイトを構築できるように作られています。

しかし、ブロックテーマを活用したウェブサイト制作について解説されている書籍はあまり見当たりません。それ故に「これから WordPress をはじめたい!」「自分のブログを WordPress で作りたい!」という新しいユーザーには、最新の情報を届けられるものが少ないのではないかと感じています。

そこで今回、電子書籍という形をメインとし、WordPress デフォルトテーマ Twenty Twenty-Four を使って3つのウェブサイトを作ってみる本を書きました。

  • シンプルなブログサイト
  • ポートフォリオサイト
  • ビジネスサイト

これらのウェブサイトを本書を通して作る中で、サイトエディターやブロックエディター、そしてブロックテーマへの理解を進めていただけます。

「WordPress、触ったことありません!」という方には、少々難しく感じられる点もあるかもしれません。しかし、本書内にはサイトエディターやブロックエディターの各ボタンや機能についても紹介していますし、実際に作っていく部分でも、丁寧な説明を心がけました。たくさんスクリーンショット画像を掲載しているので、それらを参考にぜひチャレンジしてみてください。

また、デフォルトテーマを詳しく触っていくことで、最近のブロックテーマの作られ方も理解することができるでしょう。「ブロックテーマを作ってみたい!」と考えている方には、3つのウェブサイトを作ってみることで Twenty Twenty-Four の特徴を掴むことができるはずです。そして、その知識がオリジナル・ブロックテーマを作るときに役に立つでしょう。

一人でも多くの方に、サイトエディターやブロックエディター、ブロックテーマを触っていただき、最新の WordPress を体感していただければ嬉しいです。

サンプル

画像データは最終入稿データではないため、本書内と差異がある可能性があります。

本書目次

第1章 WordPress とブロックテーマについて
  • WordPressとは
    • テーマとプラグイン
    • WordPress.orgとWordPress.comの違い
    • WordPressコミュニティ
  • ブロックテーマとは
    • クラシックテーマとは
    • ブロックテーマの基本的な構造
      • テンプレート
      • テンプレートパーツ
      • テーマブロック
      • theme.json
第2章 サイトエディターについて
  • サイトエディターとは
  • サイトエディターにアクセスするためには
  • デザイン(左サイドバー)
    • 上部ボタン
    • ナビゲーション
    • スタイル
    • 固定ページ
    • テンプレート
    • パターン
  • トップツールバー
    • エディターを終了(ナビゲーションを開く)
    • ブロック挿入ツールを切り替え
    • ツール
    • 元に戻す
    • やり直す
    • リスト表示
    • コマンドパレット
    • 表示
    • 保存
    • Create Block Theme
    • 設定・スタイル・オプション
  • 設定(右サイドバー)
    • テンプレート
    • ブロック
  • スタイル(右サイドバー)
    • スタイル上部ボタン
      • スタイルブック
      • リビジョン
      • 追加CSS
      • ウェルカムガイド
    • スタイル一覧へ
    • タイポグラフィ
    • レイアウト
    • ブロック
  • オプション(右サイドバー)
    • トップツールバー
    • スポットライトモード
    • 集中執筆
    • ビジュアルエディター
    • コードエディター
    • プラグイン
      • Create Block Theme
      • 設定
      • スタイル
    • エクスポート
    • キーボードショートカット
    • ウェルカムガイド
    • すべてのブロックをコピー
    • ヘルプ
    • 設定
      • 集中執筆
      • スポットライトモード
      • ボタンテキストラベルの表示
      • 常にリストビューを開く
      • ブロックのパンくずリストを表示
      • ブロック内にテキストカーソルを含める
第3章 ブロックエディターについて
  • ブロックエディターとは
  • 投稿と固定ページでのパネル構成の違いについて
  • トップツールバー
    • 投稿一覧を表示
    • 下書き保存
    • 公開
    • オプション
      • フルスクリーンモード
      • パターンの管理
      • 設定
        • 一般
          • 公開前チェックリストの追加
          • テーマスタイルの使用
        • ブロック
          • よく使用されるブロックを表示
          • 表示ブロック
        • パネル
          • 文書設定
  • 設定
    • 投稿
      • 概要
        • 表示状態
        • 公開
        • テンプレート
        • URL
        • ブログのトップに固定
        • 投稿者
      • カテゴリー
      • タグ
      • アイキャッチ画像
      • 抜粋
      • ディスカッション
    • 固定ページ
      • ページ属性
    • ブロック
      • ブロック名
      • 設定タブ
        • 位置
        • 高度な設定
      • スタイルタブ
        • スタイル
        • タイポグラフィ
        • サイズ
        • 枠線
  • ブロックツールバー
    • 親ブロックを選択
    • ブロックの変換
    • ブロックの移動
    • ブロックの配置
    • テキストの配置
    • 太字とイタリック
    • リンク
    • その他のテキスト装飾
    • オプション
第4章 Create Block Theme プラグインについて
  • Create Block Theemプラグインとは
  • Create Block Themeプラグインでできること
    • テーマのエクスポート(書き出し)
    • 子テーマの作成
    • テーマのクローン(複製)
    • テーマの上書き
    • 空テーマの作成
    • スタイルバリエーションの作成
    • Google Fontsまたはローカルフォントファイルの埋め込み
  • 基本的な使い方
第5章 Twenty Twenty-Four について
  • コンセプト
  • パターン
    • template-***
    • page-***
    • hidden-***
  • 構造
    • ファイル構造
    • パターン構成図
  • functions.phpでの処理
第6章 シンプルなブログサイトを作ってみよう
  • 準備
    • 完成ウェブサイトの詳細
    • 制作するウェブサイトについて
    • カテゴリーの設定
    • 必要な投稿と固定ページの作成
    • 設定の確認
      • 表示設定
      • 使用するプラグイン
  • Googleフォントの導入
  • トップページのカスタマイズ
    • テンプレートを置換
    • ページヘッダーを作る
    • 投稿タイトルのフォントサイズを調整する
    • 投稿一覧に表示される記事数を5件に変更する
  • テンプレートパーツのカスタマイズ
    • ヘッダー
      • サイトロゴ画像を設定する
      • サイトタイトルとの間隔を調整する
      • ナビゲーションのフォントサイズを調整する
    • フッター
      • シンプルなパターンに置き換える
    • Post Meta
      • 投稿日付フォーマットを変更する
      • 著者情報を削除する
      • カテゴリーの前接頭辞を変更する
  • 個別投稿のカスタマイズ
    • 投稿タイトルのフォントサイズを調整する
    • 見出しブロックのフォントサイズを調整する
    • 段落ブロックの行間を調整する
    • ポストナビゲーションの表記を日本語にする
  • アーカイブのカスタマイズ
    • アイキャッチ画像のカスタマイズ
    • 1ページに表示する記事数を9に変更する
  • 404ページのカスタマイズ
    • 英語表記のテキストを日本語に置き換える
    • カテゴリー一覧と最近の投稿の一覧を追加する
  • 検索結果のカスタマイズ
  • 配色のカスタマイズ
  • まとめ
第7章 ポートフォリオサイトを作ってみよう
  • 準備
    • 完成ウェブサイトの紹介
    • 制作するウェブサイトについて
    • カテゴリーの設定
    • 必要な投稿と固定ページの作成
    • 設定の確認
      • 表示設定
      • 使用するプラグイン
  • スタイルバリエーションからスタイルを変更する
  • Googleフォントを導入する
  • トップページを作る
    • ページ全体の構成を確認する
    • フロントページテンプレートを作成する
    • サイトヘッダーを作る
      • サイトロゴの登録とブロックの削除する
      • ナビゲーションをカスタマイズする
    • aboutセクションを作る
    • Diaryセクションを作る
    • Photosセクションを作る
    • Contactセクションを作る
    • フッター(テンプレートパーツ)をカスタマイズする
  • ブログホームを作る
    • テンプレートパターンを置換する
    • ヘッダー(テンプレートパーツ)をカスタマイズする
    • Post Meta(テンプレートパーツ)をカスタマイズする
    • クエリーループを置換する
    • 投稿テンプレートを2カラムに変更する
    • 投稿アイキャッチ画像を正方形にする
    • ページヘッダー部分にギャラリーを設置する
  • 写真カテゴリー用に新しいテンプレートを作成する
    • 新しいテンプレートの作成
    • 新しく作成したテンプレートのカスタマイズ
    • テンプレートの設定方法
  • アーカイブ/検索結果/404のカスタマイズ
    • アーカイブと検索結果の一覧を2カラムに変更する
    • 404ページをカスタマイズするする
  • 固定ページをカスタマイズ
    • aboutページのテンプレートを変更する
    • お問い合わせフォームを作成する際のヒント
  • 配色のカスタマイズ
  • まとめ
第8章 コーポレートサイトを作ってみよう
  • 準備
    • 完成ウェブサイトの紹介
    • 制作するウェブサイトについて
    • カテゴリーの設定
    • 必要な投稿と固定ページの作成
    • 設定の確認
      • 表示設定
      • 使用するプラグイン
  • Googleフォントを導入する
    • Noto Sansをインストールする
    • 各要素にフォントを設定する
  • 配色を設定する
  • ヘッダーとフッターをカスタマイズする
    • ヘッダーのカスタマイズ
      • 色の設定
      • サイトロゴとサイトアイコンの設定
      • サイトタイトルブロックの削除と調整
      • ナビゲーションの調整
    • フッターのカスタマイズ
      • 色の設定
      • グループブロックのマージン解除
      • カラムのカスタマイズ
      • 左カラムのカスタマイズ
      • 中央カラムのカスタマイズ
      • 右カラムのカスタマイズ
      • コピーライト部分のカスタマイズ
  • トップページを作る
    • フロントページテンプレートの作成
    • ページヘッダーの作成
    • コンテンツエリアを作る
    • イントロダクションセクションを作る
    • サービスセクションを作る
    • お知らせセクションを作る
    • お客様の声セクションを作る
  • 固定ページテンプレートをカスタマイズする
    • 一部パーツを削除する
    • タイトル部分を作る
    • コンテンツ部分のカスタマイズ
  • 会社概要ページを作る
    • アイキャッチ画像を設定する
    • ビジョンとミッションのセクションを作る
    • パターンを呼び出してビジョン部分を作る
    • ミッション部分を作る
    • 企業情報セクションを作る
    • お問い合わせセクションを作る
    • 同期パターンとして登録する
  • サービスページを作る
    • アイキャッチ画像を設定する
    • コンテンツエリアを作る
    • リードテキストセクションを作る
    • サービス紹介セクションを作る
    • お問い合わせセクションに同期パターンを設置する
  • お問い合わせページを作る
    • アイキャッチ画像を設定する
    • リードテキストを設置する
    • 電話での問い合わせ部分を作る
    • お問い合わせフォーム部分を作る
  • 採用情報ページを作る
    • アイキャッチ画像を設定する
    • コンテンツエリアを作る
    • リードテキストセクションを作る
    • 募集職種セクションを作る
    • 採用プロセスセクションを作る
    • キャリアの成長セクションを作る
    • 応募方法セクションを作る
  • ブログホームテンプレートをカスタマイズする
    • カスタマイズの準備をする
    • ページヘッダーを作る
    • ページヘッダーをパターンに登録する
    • 投稿一覧のパターンを挿入する
    • 投稿テンプレートをカスタマイズする
      • カラム数の設定変更
      • 投稿のアイキャッチ画像の設定変更
      • Post Metaのカスタマイズ
    • 結果なしブロックにテキストを設定する
    • 投稿一覧部分をパターンに登録する
  • アーカイブページ/404ページ/検索結果ページを作る
    • アーカイブページを作る
      • ページヘッダーを作る
      • 投稿一覧を作る
    • 404ページを作る
    • 検索結果ページを作る
      • ページヘッダーを作る
      • 検索フォーム部分のカスタマイズ
      • 投稿一覧を作る
  • 個別投稿ページを作る
    • 制作の準備
    • ページヘッダーを作る
    • コンテンツ部分以下を設定する
  • まとめ

サンプルファイル

本書内で利用しているデータ(テキストファイルと画像データなど)と同じものをダウンロードできます。

利用方法はデータ内にある各フォルダのreadme.mdをご確認ください。