[WP] `Block validation failed for…` エラーが発生する要因と対処方法
WordPress (Gutenberg)のカスタムブロックを作成していると、エディターを更新した際に「このブロックには、想定されていないか無効なコンテンツが含まれています。」というメッセージが表示されて、毎回ブロックの ...
並べ替え
[WP]ブロックエディターのリッチテキストツールバーに独自のドロップダウンメニューを追加する方法
WP 5.9 時点の場合 ここに掲載の情報は現在は非推奨です。WordPress 5.9 時点では、以下の方法で実装できます。 WordPress のブロックエディター(Gutenberg) のリッチテキストの標準ツール ...
CSSでブラーをかけると縁がどうしてもぼやけてしまう場合の解決策
CSSの filter:blur でどうやっても画像などのフチまできれいにブラーがかからずぼやけてしまう場合は、SVGフィルターを利用すると確実です。
[WP]ウィジェットIDから対象ウィジェットのコンテンツを取得する方法
本題に入る前に WordPress の フィルター関数(add_filter)を利用すれば、ウィジェットで表示されるコンテンツ(HTML)を事前に取得して目的に応じて一部を置換したり書き換えることができます。 例えば、テ ...
スクロールでWebページの背景カラーをフェードしながら変化させる方法
現在開発中の新しい WordPress テーマの機能として、ページを下方にスクロールすると背景カラーが徐々に変化するギミックを考えてみたので、ご紹介します。 最終目標 現在指定されているページの背景カラーを元にして、ペー ...
ReactのJSXで条件によって要素を任意のHTMLタグで括る方法
React で JSX を利用すると、ビューの構築を HTML ライクな構文で組めます。 その中で、よくあるケースとして URL の有無によってアンカー(a)タグで要素全体をラップするか否かを判定して出力したい場合があり ...
Gutenberg の RangeControl のリセットボタンで初期値に戻す方法
WordPress のブロックエディター(Gutenberg)のアドオン開発では、独自ブロックを追加して様々なコントローラー(コンポーネント)を利用できますが、その中でも、スライダーバーで値を変更できる RangeCon ...
【WP】ウィジェットの更新時に任意のウィジェットエリアにあるウィジェットか判定する方法
現在、提供中の WordPress テーマ「DigiPress」に、Transient API を利用したキャッシュ機能を追加しているのですが、キャッシュ対象のひとつとして、トップページのヘッダーバナー全体も含んでいます ...
[WP]テーブルブロックの table 要素を div でラップする方法
現在開発中の、DigiPress テーマ専用のブロックエディタープラグインによる拡張機能として、WordPress 標準のテーブルブロックで作成される HTML テーブル(table 要素)を、横にオーバーフローした際に ...
CSS によるローディングアニメーションのサンプルと簡単な実装方法
CSS を利用したローディングアニメーションのサンプルは既に山ほど Web 上に公開されていますが、別件でコーディングをしていた流れで、たまたまローディングアニメーションのコードも適当に作ってみたので、いくつかのサンプル ...
display:inline-block で正確な幅を指定しても横並びにならず改行されてしまう場合の対処方法
CSS で要素を横並びにしたい場合、現在は display: flex を指定すれば簡単に水平に並べることができますが、Internet Explorer(IE) では、IE 11のみが対応しているだけでなくバグが多数あ ...
CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみる
ウェブページを表示する際、読み込み中のローディングアイコンなどを表示して読み込みが完了するとページが表示されるテクニックはよくあるギミックですが、ページコンテンツの読み込み完了までの進捗チェックや読み込みが完了した際の検 ...