WordPress コアの検索ブロックをカスタマイズした例いくつか

この記事はアフィリエイト広告を利用しています。

上記の製品更新情報に書かれているように、Lightning G3 Pro Unit のヘッダーとフッターをブロックを組み合わせて作成できるようになりました。これにより、Lightning でもブロックテーマのような柔軟なデザインを作ることが可能になったんです。これ、とてもうれしいですね。

これからこの機能を使ってヘッダー、フッターを作ることが増えそうです。そこで、WordPress コアの検索ブロックをヘッダー、フッターで使いやすいようにカスタマイズしておきました。

ブロックテーマを積極的に使うのが遠のいたなぁ...

2024.1.8 仕様変更など

検索ブロックの配置（左揃え・中央揃え・右揃え）をかんたんに切り替えできるようにした。

仕様変更前

以下のカスタム CSS により右揃えする。

selector .wp-block-search__inside-wrapper {
    justify-content: flex-end;
}

この仕様だと、左揃え・中央揃えにしたいときにコードの書き換えが発生するので、使い勝手が悪い。

仕様変更後

検索ブロックを横並びブロックに入れて、横並びブロックで左揃え・中央揃え・右揃えを指定する。

クリックして入力欄が表示されるタイプはたぶん右揃え使うことがほとんどだと思うので、仕様変更前のものを使うのがよい（仕様変更後のものはヘンな動きをする）。

クリックして入力欄が表示されるタイプで、仕様変更前のものを使って、左揃えで入力欄が右に開くカスタマイズを行ったものを追加した。

① ボタンを丸く、入力欄を角丸にカスタマイズした例

ボタンの色はキーカラーになっています。

常に入力欄が表示されているタイプ

仕様変更前の検索ブロック↓

クリックして入力欄が表示されるタイプ

仕様変更前の検索ブロック↓

↓仕様変更前の検索ブロックで入力欄が右に開くようにしたもの

② ①を小さめにした例

検索窓をヘッダーに組み込む場合はこのくらいのサイズがちょうどよい。

常に入力欄が表示されているタイプ

仕様変更前の検索ブロック↓

クリックして入力欄が表示されるタイプ

仕様変更前の検索ブロック↓

↓仕様変更前の検索ブロックで入力欄が右に開くようにしたもの

③ ボタンを四角に、入力欄をピン角にカスタマイズした例

ボタンの色はカスタムカラー 1 になっています。

常に入力欄が表示されているタイプ

仕様変更前の検索ブロック↓

クリックして入力欄が表示されるタイプ

仕様変更前の検索ブロック↓

↓仕様変更前の検索ブロックで入力欄が右に開くようにしたもの

Lightning G3 Pro Unit の入手方法

Lightning G3 Pro Unit は Lightning に便利な機能を拡張することができるプラグインで、このプラグインを使うと効率的で柔軟なサイト制作が可能になります。このプラグインは単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年から選べます。

投稿者プロフィール

対馬俊彦魚沼情報サービス (新潟県南魚沼市)

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、お手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら