WordPress 5.8、そしてこれからのウィジェット

以下は、Chloe Bringmann が書いた WordPress.org 公式ブログの記事「Widgets in WordPress 5.8 and Beyond」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください


文章・デザイン: @critterverse

WordPress 5.8 では、ウィジェットエリアで Gutenberg ブロックが使えるようになりました。つまり、高度にカスタマイズ可能なレイアウトとスタイル設定により、WYSIWYG 編集 (見たまま編集できる) の体験に近づくことができます。

3つの別々のウィジェットエリアを備えた古き良き Twenty Sixteen テーマをベースに、テストサイトを作成してみました。この投稿では、ウィジェットで実行できるようになった便利なことの一部と、今後の方向性に焦点を当てていきます。

1つのサイドバーウィジェットエリアと2つのフッターウィジェットエリアを持つ個別投稿のズームアウトビュー。サイトのコンテンツはマリンパーク・ソルトマーシュについてのものです。各ウィジェットエリアの横に並べているブロックのリスト表示は、デザインがどのように構築されているかを示しています。

重ねたレイアウトとデュオトーン画像でおもしろい視覚効果を作り出す

外観に関しては、ユーザーはウィジェットエリアをこれまで以上にコントロールできます。特に、カバーや画像ブロックなどのカスタマイズオプションを備えたブロックを使用することで高度なコントロールが可能になります。これが、旧ウィジェットエディター (上) で作成できるものと、新しいブロックベースのウィジェットエディター (下) で作成できるものです。

ビジュアルデザイン全体にウィジェットとカスタムコードを混合させる

カバーやカラムなどのコンテナブロックを使用すると、動的要素やインタラクティブな要素をデザインに簡単に織り込むことができます。これは多くのウィジェットに当てはまりますが、ウィジェットのブロックバージョンは、コンテナブロック内で簡単にまとめたりレイヤー化して、レイアウトに完全に統合できます。

以下の例では、カバーブロックの前に検索ブロックを配置してみました。これにより、良いレイヤー効果を作ることができます。また、カラムブロック内にカスタム HTML ブロックを挿入して、時刻に応じて異なるメッセージを表示しました (jQuery スクリプト)。

タイトルと構造に柔軟性。旧ウィジェットレイアウトも使用するオプション

クラシックウィジェットには、ウィジェットにタイトルが必ず含められているという制限がありました。ウィジェットエリアにブロックを配置することの利点のひとつは、タイトルの表示が完全に柔軟であることです。たとえば、すべてのウィジェットにタイトルを付けたり、各ウィジェットエリアの上部に1つのタイトルだけを配置したりすることもできますし、デザインにタイトルをまったく必要としない場合もあるでしょう。

注: Twenty Twenty-One などの一部のテーマでは、ウィジェットエリア内でコンテンツを横方向にレイアウトするように設計されています。テーマがレイアウトをカラムに分割してしまう問題が発生する場合は、グループブロック内に含めることで、複数のブロックをまとめておくことができます。

グループ化または入れ子になったまとまりがある場合とない場合のサイドバーウィジェットエリアのリストビューを並べた比較。

WordPress パターンディレクトリから既存のレイアウトをコピー & ペースト

ブロックパターンはまだウィジェットエディターに完全に統合されていませんが、革新的な WordPress パターンディレクトリからサイトのウィジェットエリアにパターンをコピー & ペーストする、ということは可能です。パターンディレクトリから、この横並びの CTA (注意喚起) パターンをほぼそのまま使用しましたが、色とテキストを少し調整しました。

段落テキストと "Join now (今すぐ参加)" ボタンが別のカラムにあり、"Become a monthly patron (月毎の支援者になる)" と書かれた黒いボックスのあるフッターウィジェットエリア。岩に当たる波の絵画の画像。間にスペースがなく、真下にあります。

注: パターンはまだウィジェットエリア用として選別・連携されていないため、予期しない動作が発生する可能性があります。この機能は、ウィジェット編集の次のプレビューであると考えてください。