こんにちは。SaitoKouです。

今回は今年になって追加されたあらたなWordPressデフォルトテーマ、「TwentyTwentyTwo」を触ってみます!テーマの詳しい解説はほかの方々にお任せし(笑)、僕のブログではざっくりと以下について触れていきます。

 ・前作とくらべた編集方法のちがい(ざっくり)
 ・ヘッダーテンプレートの編集

前作と比べた、編集方法の違い。

今回のテーマの特に特徴的なところは、一言でいうとこれだと思っています。

 「どこもかしこもブロックエディタで構築できる!」

どういうことかというと、例えばTwentyTwenty-Oneの場合、ヘッダー部分はこの写真の部分になります。

TwentyTwentyOneのヘッダー

ただ、このヘッダーは以下の特徴があります。(内部プログラムをいじってカスタマイズするなら別。)

 ・ロゴやサイトタイトル、メニューの位置などがほぼほぼ固定で、柔軟に変えられない。
 ・そのヘッダーはすべてのページに共通で、レイアウトは1つしか設定できない。
 

しかし、TwentyTwentyTwoのエディタは以下のような特徴があります!

 ➀ヘッダーも、ロゴやサイトタイトル、メニューの位置などをブロックエディタで柔軟に変えられる!
 ②そのヘッダーを、「テンプレート」として保存し、いくつかのパターンを保存できる。
 ③保存したテンプレートを、ページによって使い分けできる。

プログラミングの知識の必要性がより少なくなり、カスタマイズの幅が広がったといえます!ただ、編集画面が前回と違いすぎており、戸惑うことが多いと思いますので、これからざっくりとした手順を、上に記したエディタの特徴と合わせて書いていきます!

➀ 各要素の位置をブロックエディタで柔軟に変えられる!

 今まで固定のレイアウトになりがちだったヘッダーが、ブロックエディタで変えられるようになりました。早速編集してみましょう!

管理画面 > 外観 > エディター でエディター画面に移ります。

左上のWordPressマークをクリック > テンプレートパーツをクリック

WordPressロゴをクリックした後

その先の画面で、「ヘッダー(暗い、小)」を選びます。すると、以下のような編集画面になります。

ヘッダー編集画面

今この画面では、ヘッダーのレイアウトを編集できます。試しに、画像の以下の部分をクリックして、メニューの上に画像を移動させてみましょう。

画像の移動

変更後が以下です。この状態で保存して、サイトを表示させてみましょう。

変更後

表示させたサイトがこちらです!ブロックエディタのように、ヘッダを編集できましたね!

表示サイト

② そのヘッダーを、「テンプレート」として保存し、いくつかのパターンを保存できる!

 ➀でヘッダーを編集しましたが、これは「ヘッダー(暗い、小)」という名前のテンプレートを編集していたのです。TwentyTwentyTwoでは、3種類のヘッダーを用意しているみたいですね。先ほどのテンプレートパーツで確認してみましょう。

テンプレートパーツ「ヘッダー」

③ 保存したテンプレートを、ページによって使い分けできる!

 デフォルトの状態を解説すると、 ホーム画面では、「ヘッダー(暗い、小)」を使用する設定となっています。また、各記事一覧では、「ヘッダー」を使う設定となっています。この設定は、以下画面から確認できます。 

左上のWordPressマークをクリック > テンプレートをクリック

 ホーム → ホーム画面のレイアウトを確認できます。
 個別投稿 → 個別の記事のレイアウトを確認できます。

個別投稿のレイアウト

それでは、ヘッダーを、保存してある別のテンプレートを使うよう設定してみましょう。上部の個別投稿をクリックします。

個別投稿クリック

出てきたウィンドウの「ヘッダー」をクリック → ヘッダーが選択されている状態で「置換」をクリック

置換クリック

ヘッダー(暗い、小)を選びます。

テンプレート検索

すると、個別投稿も先ほど編集した「ヘッダー(暗い、小)」のヘッダーになりました!

変更後

サイトを表示してみると、確かに変わっています。

個別投稿ページ

まとめ

再掲すると、TwentyTwentyTwoの特徴はこれです!

 「どこもかしこもブロックエディタで構築できる!」

しかも、その編集をいくつか保存しておけるので、便利ですね!今後このエディタがスタンダードとなるかもしれませんね。またいろいろ動かして試してみようと思います!


みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。

ワードプレスホームページを新規導入します テンプレート付き!!初めての導入、初心者の方にオススメ!!

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP