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

searchform.php

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

<form method="get" id="searchform" action="<?php echo home_url('/'); ?>">
    <input type="text" placeholder="<?php echo get_theme_text_search_placeholder();//検索ボックスのプレースホルダテキストを取得 ?>" name="s" id="s">
    <input type="submit" id="searchsubmit" value="">
</form>

headerlogo.php

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

<?php if(!is_mobile()): ?>
<form method="get" id="searchform" action="<?php echo home_url('/'); ?>">
    <input type="text" placeholder="<?php echo get_theme_text_search_placeholder();//検索ボックスのプレースホルダテキストを取得 ?>" name="s" id="s">
    <input type="submit" id="searchsubmit" value="">
</form>
<?php endif; ?>

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

style.css

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

#h-top {
    position: relative;
}

#h-top #searchform {
    position: absolute;
    right: 35px;
    bottom: 0;
    width: 300px;
}

#h-top #s {
    margin-bottom: 15px;
}

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

確認

表示位置

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

検索結果

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

画像を押下すると動画が表示されます。

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

上手くいったようです。

ヘッダーにサイト内検索を設置したことによって、AMPエラーが出るといったコメントが寄せられたので、Googleサーチコンソールで表示されるAMPバリデートの画像を貼っておきます。

現時点で当サイトではAMPエラーは出てはいません。というのも私はSimplicityで提供されるAMPのテンプレートではなく、別の方が作成されたテンプレートを利用しています。もしかすると、そこに違いがあるのかもしれません。

まとめ

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

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

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

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