【Blogger】検索ボックスで検索結果の並び順を選択する

Blogger で「ブログ検索」ウィジェット（検索ボックス）を使用した場合、デフォルトでは検索結果が関連性の高い順に並びます。

このとき、URL には以下のように by-date=false というパラメータが付いています。

https://[ブログ名].blogspot.com/search?q=[検索語句]&by-date=false

この URL の by-date=false を by-date=true に書き換えることで、検索結果が日付順に並びます。

https://[ブログ名].blogspot.com/search?q=[検索語句]&by-date=true

この仕様を利用して、検索ボックスで検索結果の並び順を選択する方法を考えました。

以下の記事で、検索ボックス使用時の検索結果を日付順にする方法が紹介されています。

こちらの記事を参考にして、検索ボックスに検索結果の並び順を選択するオプションを付けてみました。

まず、Blogger の「HTML を編集」画面の「ブログ検索」ウィジェットの form 要素内に以下のコードを追加します。

<fieldset class='search-sort'>
  <b:if cond='data:blog.url.raw contains &quot;by-date=true&quot;'>
    <label><input name='by-date' type='radio' value='false'/>関連性の高い順</label>
    <label><input checked='checked' name='by-date' type='radio' value='true'/>日付順</label>
  <b:else/>
    <label><input checked='checked' name='by-date' type='radio' value='false'/>関連性の高い順</label>
    <label><input name='by-date' type='radio' value='true'/>日付順</label>
  </b:if>
</fieldset>

コードの追加場所はテーマにもよりますが、「ブログ検索」ウィジェットがバージョン 1 の場合、<b:includable id='main'> ... </b:includable> の以下の箇所がいいと思います。

<form class='gsc-search-box' expr:action='data:blog.searchUrl'>
  <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
  <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
    <tbody>
      <tr>
        <td class='gsc-input'>
          <input autocomplete='off' class='gsc-input' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q' size='10' title='search' type='text'/>
        </td>
        <td class='gsc-search-button'>
          <input class='gsc-search-button' expr:value='data:messages.search' title='search' type='submit'/>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- この部分に追加 -->
  
</form>

ウィジェットがバージョン 2 の場合は、<b:includable id='searchForm'> ... </b:includable> の以下の場所にコードを追加します。

<form expr:action='data:blog.searchUrl'>
  <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
  <b:include name='urlParamsAsFormInput'/>
  <div class='search-input'>
    <input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.searchThisBlog' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q'/>
  </div>
  <b:include name='searchSubmit'/>
  
  <!-- この部分に追加 -->
  
</form>

最後に head 内にラジオボタン部分の CSS を追加し、テーマを保存します。以下の CSS は当ブログ用のため、適宜調整してください。

.search-sort {
  display: flex;
  margin-top: 16px;
  gap: 0 16px;
}
.search-sort label {
  display: flex;
  align-items: center;
  gap: 0 4px;
  cursor: pointer;
}

以上のカスタマイズがうまくいくと、検索ボックスの下に「関連性の高い順」「日付順」の2つのラジオボタンが表示されます。どちらかを選択して検索をした場合、検索結果がその通りに並びます。

また、ラジオボタンも、表示されている検索結果のものがデフォルトで選択されるようになります。これは、以下の条件式によって URL に by-date=true を含むか含まないかで選択されるラジオボタンを区別しているからです。

<b:if cond='data:blog.url.raw contains &quot;by-date=true&quot;'>
  <!-- URL に by-date=true を含む場合、「日付順」のラジオボタンを選択 -->
<b:else/>
  <!-- URL に by-date=true を含まない場合、「関連性の高い順」のラジオボタンを選択 -->
</b:if>

条件式にある data:blog.url は現在のページの URL を取得できる Blogger の独自タグです。

以下の Blogger コミュニティのスレッドに書かれている通り、この独自タグの形のままでは、URL 内に特定の語句が含まれているかの判定に contains 演算子を使用できません。

しかし、上記のページの回答にあるようにこのタグの末尾に .raw を付け data:blog.url.raw とすることで contains が使用できます（回答投稿時にはまだ実装されていなかったようですが、いつの間にか使えるようになっていました）。

Blogger の検索ボックスで検索結果の並び順を選択する方法を考えました。

ラジオボタンがあるぶんどうしてもかさばるので、サイドバーに検索ボックスを設置している人向けのカスタマイズかなーと思います。

編集
ホーム