ストアのヘッダーには、送料無料の条件、セール、配送のお知らせなど、1 行の宣伝文が入っていることがよくあります。そしてほとんどの場合それは固定されていて、新しいメッセージのたびに、1 行追加するだけでは済まず、誰かがコードを編集するかテキストウィジェットごと差し替える必要があります。
テキストウィジェットでは足りなかった理由
Elementor 標準のテキストウィジェットは、決まった場所にメッセージを 1 つ、1 回表示するだけです。複数のメッセージを切り替えて表示するには、ページ内で JavaScript のスライダーを一から作るか、より良い方法として、全体を本格的な再利用可能な Elementor ウィジェットとしてまとめ、サイトオーナーがどこでも使え、Elementor の画面だけで設定できるようにするしかありませんでした。
ウィジェット
Firefly Marquee Bar を、独自の「コンテンツ」と「スタイル」タブを持つネイティブな Elementor ウィジェットとして作り、Elementor 標準のウィジェットと同じ方法で登録しました。
- 繰り返し追加できるメッセージのリスト。それぞれ任意で URL にリンクできます。
- スクロールの方向と速度を設定でき、マウスを乗せると一時停止する切り替えもあります。
- スタイルタブで色、文字サイズ、字間、文字の太さをすべて調整でき、見た目を変えるのに CSS の知識は不要です。
途切れないループの仕組み
スクロール自体は JavaScript ではなく純粋な CSS アニメーションです。メッセージの一覧全体を flex コンテナの中に 2 回続けて表示し、トラック全体を translateX で 0% からちょうど -50% まで動かします。2 つ目のコピーは 1 つ目とまったく同じなので、アニメーションが 0% に戻る瞬間はループの途中と見た目で区別できません。そのため、リストの文字量に関係なく途切れない無限スクロールが実現し、ずれが生じうる JavaScript のタイミング処理もありません。
ポイントのまとめ
- クライアントがカスタマイズのパターンを繰り返し使う予定なら、今の用途がヘッダー 1 つだけだとしても、ページ単位の一時しのぎより、本格的な再利用可能ウィジェットとして作るほうが優れています。
- コンテンツを複製して 50% ずらす手法なら、JavaScript を一切使わず、ループのつなぎ目でタイミングのずれも起こさずに、途切れない CSS のマーキーが作れます。
- 色、速度、余白などのスタイル設定をビルダー自身のスタイルタブで公開することこそが、ウィジェットを「クライアントのために作ったもの」ではなく「クライアントが編集できるもの」にします。
関連記事：UI・UX デザインの実績、WordPress 開発サービス。
ご自身の WooCommerce や WordPress の管理画面で同じような制約にお困りですか？ご相談ください。ArtinTech Solution はまさにこうしたストア向けのカスタムツールを開発しています。