Twenty Twenty-Three（WordPressテーマ）のカスタマイズ

Twenty Twenty-Three

Twenty Twenty-Three は、WordPress 6.1 で導入された新しいデザインツールを活用するために設計されています。Twenty Twenty-Tｗoの流れからみても今後はこの方式（ブロックエディタ方式）が標準になるのかもしれません。

• Twenty Twenty-Three
• WordPressバージョン / 6.1
• PHPバージョン / 5.6
• 評価 / 5つ星中3.4つ星
• サポートフォーラム

Twenty Twenty-Three をインストールするにはダッシュボードから外観　→　テーマ　→　新規追加　→　テーマ名で検索しインストールを開始します。

テンプレート の内容

Twenty Twenty-Threeはテンプレートを使用してサイトのレイアウトを表現します。

404	デッドリンクやURLの入力間違いなど存在しないページを閲覧した場合に表示されます
アーカイブ	個別の投稿者、カテゴリー、タグ、タクソノミー、カスタム投稿タイプ、日付などを含む任意のアーカイブを表示します。より特化したテンプレート　例：カテゴリーまたはタグ　が見つからない場合、このテンプレートがフォールバックとして機能します。
空白	任意の投稿やページに手動で適用できるカスタムテンプレートです。
ブログ（代替え）	任意の投稿やページに手動で適用できるカスタムテンプレートです。
ホーム	ホームページ上に、または静的ホームページが設定されている場合には投稿ページ上に投稿を表示します。
インデックス	より特化されたテンプレートが定義されていない場合に、全てのページのフォールバックテンプレートとして使用します。
固定ページ	カスタムテンプレートが適用されていないか専用テンプレートが存在しない限り、全ての静的ページを表示します。
検索	訪問者がウエブサイトで行った際に表示されます。
個別投稿	その投稿にカスタムテンプレートが適用されていないか、専用テンプレートが存在しない限り、ウエブサイトに単一の投稿を表示します。

テンプレートパーツ

テンプレートパーツはレイアウトの小さなパーツであり複数のテンプレートで再利用でき常に同じ外観になります。一般的なテンプレートパーツには、サイトのヘッダー、フッターがあります。

• コメント
• フッター
• ヘッダー
• 投稿メタ

「Twenty Twenty-Three」 は、WordPress 6.1 で導入された新しいデザインツールを活用するために設計されたテーマです。これまでのテーマはある程度枠決めされたデザインをカスタマイズして作り上げるものでしたが、0から作り上げるといってもいいくらい自由度の高いテーマになっています。

テーマをカスタマイズするには、大きく分けて機能面とデザイン面をカスタマイズすることになります。最初に取り組むべきは、テーマカスタマイザーを使う、cssの追加をすることでしょう。どちらも手段が複数ありますので、事前に理解して取り組まれるとよいでしょう。プラグインを利用すれば高度なカスタマイズが可能になります。プログラムスキルをお持ちの場合は、直接テンプレート（PHP）ファイルを書き換えるカスタマイズになります。コードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。

css（スタイルシート）でカスタマイズ

部分的に色を変更したり、背景や囲みを装飾、文字の大きさを変更したりしたいのであればcss（スタイルシート）を追加することになります。「スタイルシート・css」記述するには、「テンプレートファイルに直接記述」する、「テーマカスタマイザーで記述」する。「プラグインを使って記述」などの方法があります。

ブロックエディタ対応のテーマではブロックごとにタイポグラフィ（「文字や文章を読みやすく、または美しく見せるための技術」）を指定できるので、文字の大きさや色を指定したい場合は、こちらを利用されたほうが良いでしょう。

注意点）スタイルシート・cssが大きくなりすぎると表示速度に影響を及ぼすこともあるので注意が必要です。

テーマカスタマイザーの「css追加」は複雑なコード編集は、編集エリアが狭く操作しづらいですが、テーマの更新よって上書きされることはありません。逆にテンプレートファイルの「style.css」は上書きされるので、子テーマで対応するか、バックアップをとり対応するかになります。推奨は「css追加」となっています。

css（スタイルシート）を追加するには、ダッシュボードの　外観　→　カスタマイズ　→　追加css　と進みコードを追加します。スタイルシートを適用させるには編集ブロックに　高度な設定で　「追加 css クラス」にクラス名を記述します。スタイルはブロック対して適用されるようになっています。複数のブロックに適応させたいならブロックをグループ化しておきます。

ページごとに css を記述したい場合はプラグインを利用すると良いでしょう。「VK All in one Expansion Unit」の cssカスタマイズ　を有効にしておくと、ページごとに スタイルシートを追加することができます。

テーマによってはあらかじめ、ページごとに css を記述できるようにしたものもあります。複雑なデザインを施したいサイトの場合はこちらを選ぶとよいかもしれません。

テンプレートファイル（PHP）でカスタマイズ

テンプレートファイル（テーマファイル）のカスタマイズは、外観 → テーマファイルエディタで編集することになります。テンプレートファイルの構成は各テーマによって異なっていますが概ね以下のようなファイルで構成されています。

• スタイル（style.css）
• テーマの関数
• 404テンプレート
• コメント
• テーマフッター
• テーマヘッダー
• 検索フォーム
• 単一テンプレート

テンプレートファイルを直接編集してカスタマイズすることもできます。ただ、この方法は高度な知識を必要とされますので、十分な知識をお持ちの方におすすめなります。記述ミスによって画面が表示されなくなったり、管理画面にログインすらできなくなったりすることもあります。

WordPressのテーマは、WordPressを利用したウェブサイトのデザインを定義・変更するものです。デザインの変更には、表示や外観の調整が含まれますが、ほとんどの場合、機能面での改変も対象になります。そして、デフォルトテーマは、ワードプレスの公式サイト(wordpress.org)が毎年作っているテーマになります

Twenty Twenty-Three にインストールしたいプラグイン

コンタクトフォームを設置	Contact Form 7
再利用ブロック拡張機能	Reusable Blocks Extended
SEO対策を細かく設定するプラグイン	All in One SEO Pack | SEO SIMPLE PACK
記事に目次を表示	Easy Table of Contents
ページと関連する記事を表示	Related Post

子テーマを作成する

テンプレートファイルを直接編集してサイトを運用するなら子テーマを利用しましょう。なぜならWordPressは頻繁にアップデートが繰り返されソースコードが上書きされてしまい、再びカスタマイズをしなければならなくなってしまうからです。

WordPressのカスタマイズ手順

WordPressをカスタマイズするには下記の手順で行うとよいでしょう。

1. WEBサイトの構成を考える　（※注１）
2. 不要な機能を削除する
3. 必要な拡張機能（プラグイン）を追加する
4. グローバルナビゲーションやサイドメニューを作る
5. TOPページを作る
6. 企業サイトなどは、会社案内や事業内容などを作る
7. お知らせや、ブログ（製品やサービスをカテゴリーに構成する）を設置する

※　注１）固定ページ・投稿ページのコンテンツを書き出す。そしてカテゴリーやタグを振り分ける。などの設計書・制作ガイドラインを作成しておくと作業をスムースに進めることができ、修正が発生しても最小限の工程で完結できるようになります。