WordPress

このサイトのサイドバーウィジェットを、ウィジェットブロックエディターに対応しました

投稿日:

少し前のことになりますが、WordPress のバージョンが上がったことで、サイドバーウィジェットが「ウィジェットブロックエディター」で作成することができるようになりました。この変更により、サイドバーウィジェットにも Gutenberg のブロックが使えるようになります。記事ページとウィジェットとで、使える機能の差が小さくなったとも言えます。

この変更による利点は、例えば「画像ブロック」を使って画像を表示すれば、srcset 属性と sizes属性が自動的に追加され、レスポンシブルな <img>要素を生成してくれます。

多少面倒でしたが、本サイトのサイドバーに表示していたウィジェットをすべてブロックで置き換えました。

それまでは、対応するのが面倒だったので Classic Widgets プラグイン をインストールして、ウィジェットの画面を以前のものにしていました。これであれば既存のウィジェットは「レガシーウィジェット」としてそのまま動作します。

WordPress のブロックは複雑な機能だと思いますが、おおよそ問題なく動きます。これだけでもものすごいことです。洗練されていますね。もっと早く対応しておけばよかったと思います。置き換えにくいものは、最悪「カスタムHTMLブロック」を使って、HTMLをそのまま書いてしまうこともできます。

参考

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPress: @wordpress/env と @wordpress/scripts を使ってカスタムブロック開発環境をセットアップする

@wordpress/env と @wordpress/scripts を使ってカスタムブロック開発環境をセットアップする手順を紹介します。

WordPress

WordPress に関する srcset と sizes 属性値の簡単な説明

目次1. はじめに2. srcset と sizes の仕組み3. WordPress での srcset と sizes3-1. sizes 属性3-2. srcset 属性3-3. [設定] &# …

WordPress

WSL + Homestead で WordPress のプラグイン開発環境を作る

目次1. はじめに2. 環境3. 作業1. 今回 WordPress をインストールするディレクトリを用意します2. Homestead に Webアプリケーションの設定を追加します3. Window …

WordPress

WordPress: サイトヘルスの特定のチェック項目を無効にする方法

WordPress: サイトヘルスの特定のチェック項目を無効にする方法について説明します。

WordPress

【WordPress】特定の画像には Easy FancyBox を適用させない方法

目次1. WordPress の Easy FancyBox プラグインについて問題点2. 特定の画像リンクで、Easy FancyBox を適用させない方法3. デモ 1. WordPress の …