WordPressテーマTwenty Twenty-Threeのカスタマイズ
カスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初に取り組むべきは、テーマカスタマイザーを使う、cssの追加をすることでしょう。
WordPress.org | Twenty Twenty-Three |
有効インストール | 900,000 |
WordPressバージョン | 6.1以上 |
PHPバージョン | 5.6以上 |
どちらも手段が複数ありますので、事前に理解して取り組まれるとよいでしょう。プラグインを利用すれば高度なカスタマイズが可能になります。プログラムスキルをお持ちの場合は、直接テンプレート(PHP)ファイルを書き換えるカスタマイズになります。コードを直接編集する方法はリスクも高いので、よく理解されている方以外にはおすすめできません。
Twenty Twenty-Three は、WordPress 6.1 で導入された新しいデザインツールを活用するために設計されています。Twenty Twenty-Twoの流れからみても今後はこの方式(ブロックエディタ方式)が標準になるのかもしれません。
「Twenty Twenty-Three」は WordPress 5.9 からの 新しい機能「フルサイト編集(FSE)」で動作します。1カラムになっています。サイドバーはありません。ヘッダー/フッター幅は1000pxになってます。ウィジェットエリアはありません。すべてブロックでまかなうようになっています。
Twenty Twenty-Three をインストールするにはダッシュボードから外観 → テーマ → 新規追加 → テーマ名で検索しインストールを開始します。
Twenty Twenty-Threeのカスタマイズは従来のテーマと異なりまったく新しいデザインになっています。従来型になれた方は少し戸惑うかもしれません。ブロックエディターを使用して、webサイトの外観をカスタマイズします。
操作は、 外観 → エディター → デザイン とすすみます。ここでは、テンプレート と テンプレートパーツからカスタマイズを行います。
テンプレート の内容
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のデザインテンプレートは、「テーマ」を有効化させることで構築されます。
WordPressのカスタマイズ手順
WordPressをカスタマイズするには下記の手順で行うとよいでしょう。
- WEBサイトの構成を考える (※注1)
- 不要な機能を削除する
- 必要な拡張機能(プラグイン)を追加する
- グローバルナビゲーションやサイドメニューを作る
- TOPページを作る
- 企業サイトなどは、会社案内や事業内容などを作る
- お知らせや、ブログ(製品やサービスをカテゴリーに構成する)を設置する
※ 注1)固定ページ・投稿ページのコンテンツを書き出す。そしてカテゴリーやタグを振り分ける。などの設計書・制作ガイドラインを作成しておくと作業をスムースに進めることができ、修正が発生しても最小限の工程で完結できるようになります。
テーマをカスタマイズ
-
WordPressテーマTwenty Sixteenをカスタマイズ
Twenty Sixteen をカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることにな…
-
WordPressテーマE-Commerceのカスタマイズ
E-Commerceはミニマルでモダンな外観を提供し、あなたのeコマースストアを際立たせます。美しく、しかもプ…
-
WordPressテーマTwenty Fourteenのカスタマイズ
2014年のデフォルトテーマTwenty Fourteenでは、おしゃれで現代的なレスポンシブデザインのマガジ…
-
WordPressテーマTwenty Twenty-Threeのカスタマイズ
カスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初に取り組むべきは、テ…
-
WordPressテーマMaxwellのカスタマイズ
Maxwellをカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初に取…
-
WordPressテーマTwenty Elevenのカスタマイズ
Twenty Elevenをカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになりま…
-
WordPressテーマTwenty Twelveのカスタマイズ
Twenty Twelveをカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになりま…
-
WordPressテーマSiteOrigin Unwindのカスタマイズ
SiteOrigin Unwindをカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすること…
-
WordPressテーマShopayのカスタマイズ
Shopayをカスタマイズするには、大きく分けて機能面とデザイン性をカスタマイズすることになります。最初に取り…
プロモーション
wordpress.org で公開されているテーマは無料で利用できることが魅力ですが、カスタマイズやプラグインの導入などが必要です。その点、有料テーマはカスタマイズの柔軟性が高く、プラグインを利用しなくてもサイトの運用が可能です。