WordPressテーマのSimplicityで表示される、PCのブログ内検索をヘッダーに表示してみた

当サイトで採用しているWordPressテーマのSimplicityは、ブログ内検索の表示は基本的にウィジェットによってサイドバーに表示します。

検索の利便性を向上させる場合、サイドバーのスクロール追従領域に「検索」のウィジェットを設置する必要があります。

検索をもっと気軽に出来るようにしようと思い、追従領域にブログ内検索を表示させてみたのですが、なんとなく違和感を感じたのでヘッダーに表示してみることにしました。

searchform.php

Simplicityフォルダの「searchform.php」に記述されている下記のコードをコピーします。

headerlogo.php

Simplicityフォルダの「headerlogo.php」に下記の記述をします。私は一番下に記述しました。

「searchform.php」でコピーしたコードを貼り付け、「!is_mobile」でPCのヘッダーにのみ、ブログ内検索を表示させるようにします。

style.css

子テーマの「style.css」で下記の記述をしました。

ヘッダーで表示するブログ内検索の位置などを調整しています。

確認

表示位置

ヘッダーの右側、SNSボタンの下あたりにブログ内検索を表示しています。

ヘッダーの右側にブログ内検索を表示
ヘッダーの右側にブログ内検索を表示

検索結果

実際に検索をしてみましたが問題なく出来ました。

画像を押下すると動画が表示されます。
検索結果
一覧での検索結果

アドレスバーに検索で入力した文字列が表示されています。

アドレスバーの検索表示
アドレスバーの検索表示

上手くいったようです。

まとめ

  • 「searchform.php」に記述されているフォームをコピー。
  • 「headerlogo.php」にフォームを貼り付け、「!is_mobile」でPCのみに表示。
  • 子テーマの「style.css」にフォームの位置などを調整するスタイルを記述。
  • 一覧とアドレスバーで検索結果を確認。

以前、ヘッダーを上スクロールで固定するようにしたので、もう少しヘッダーで出来ることを増やしたいと思い、ブログ内検索をヘッダーに表示してみました。

Simplicityの「searchform.php」などの仕様が変わると、検索に影響が出てくるので、テーマをアップデートした場合は確認の必要があります。

検索はデリケートな部分があるので、様子を見ていきたいと思います。

スポンサーリンク

シェアする

フォローする

WordPressテーマのSimplicityで表示される、PCのブログ内検索をヘッダーに表示してみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!