検索結果ページで『説明文』表示に切り替え-Volar2

検索結果ページで『説明文』表示に切り替え-Volar2

カスタマイズの困難な検索結果ページで説明テキストを抜粋ではなく『説明文』記載の内容に表示切り換え。
 

アイキャッチ画像

SIRIUS2にはサイト内検索というのが標準搭載されてます。(サイトオプション内でチェックONにする必要あり)


検索するには『ページ右上の虫眼鏡アイコンをクリック→検索したいテキストを入力→検索結果が表示』されるという流れですね。


ここで表示される検索結果の表示ページですが、カテゴリー一覧ページのようにレイアウト調整項目が用意されているわけではなく、表示レイアウトは”縦並び”で固定化されている模様です。
ページタグ検索も同じ固定レイアウトで表示されます)


{UTO}


この検索結果ページに表示される説明用テキストは、デフォルトではページ冒頭からの抜粋になります。
ただこの仕様ですと、内容とは直接関係のない時候の挨拶などで規定の文字数が埋まってしまう場合もあります。肝心のキーワードが出てくる頃には文字数オーバーになって表示されないこともよくある話で、これだとユーザーを戸惑わせてしまう結果にもなりかねません。


カテゴリー一覧ページでも『ページ冒頭からの抜粋(150文字)』がデフォルト表示で、それ以外の選択肢は用意されてません。


ほかにもSIRIUS2の検索結果ページは個人的には若干見づらい点がいくつかありまして。
もう少し見やすいレイアウトに変更できないかと試行錯誤しておりましたところ、なんとかカスタマイズすることができるようになりました。


説明テキスト変更

説明用テキストが『ページ冒頭からの抜粋』だと、内容とは直接関係のないテキストだけが表示されて肝心の内容が表示されないケースがままあります。


そこで『冒頭からの抜粋』を『説明文』に記述した内容表示に置き換えられれば端的にページ内容を表示させることができます。
もちろん『説明文』にはご自身で吟味したページ内容を記述しておく必要はあります。


{UTO}


《Volar2》ではカテゴリー一覧ページも『説明文』に記述した内容を表示できるオプションを用意してます。


そこで《Volar2》では個別ページの設定の『説明文』に独自に記述した内容を表示できるカスタマイズを用意しました。
やり方は《Volar2》で用意している専用モジュールを有効化するだけです。


{UTO}


こちらが実際の検索結果のサンプル。通常だとページ冒頭からの抜粋文が表示されます。


{UTO}


次に検索結果の一番上に表示されたページだけ『説明文』に何らかのテキストを入力してみます。


{UTO}


そして《Volar2》の専用モジュールをONにして再度検索してみます。その結果がこちら。
『説明文』に入力したテキストが表示されました。他のページは『説明文』に何も入力してないのでページ冒頭からの抜粋表示のままです。


{UTO}


ただしこのやり方には1つだけデメリットがあります。


実際の検索結果の表示はSIRIUS2が独自に用意しているphpファイルが実行(表示)します。そのあとに《Volar2》で用意したモジュールが『ページ冒頭からの抜粋』を『説明文』に置き換えるという仕組み(順番)です。


そのためユーザー側の回線速度が速い時はテキストが即切り替わりますが、回線速度が遅い時は切り替わるまでに1~数秒かかる場合もあります。


カテゴリー一覧ページ用の設定に用意されてるようなカードタイプへの表示レイアウトの変更も可能ですが今回は割愛します。検索結果を素早くチェックするにはデフォルトの縦並びレイアウトの方が探しやすいと思われるので。


{UTO}

検索結果ページではヘッダー画像非表示

検索結果のページを開いてみるとわかるかと思いますが、大抵の場合ヘッダー画像が表示されるかと思います。
たとえ『エントリーページやカテゴリーページではヘッダー画像を表示しない』設定にしていても。


<レイアウト設定>を開いてみると『全体設定』と『カテゴリー』と『エントリーページ』の設定項目はあっても検索ページ専用の項目はありません。そのため『全体設定』つまりトップページでヘッダー画像を表示する設定にしていれば検索結果ページにもその設定が継承されるものかと思われます。


{UTO}


レイアウト設定の継承サンプル。


{UTO}


トップページにはサイトイメージを印象付ける意味もあって、ほとんどといっていいほどヘッダー画像を表示させるでしょう。そのヘッダー画像が検索結果ページに表示されること自体は大した問題ではありません。


ただ検索結果ページではヘッダー画像上の真ん中に小さく「検索結果」と表示されます。つまりトップページで派手目のヘッダー画像を使ってる場合は「検索結果」というテキストが目立たず、もちろん目立たなくてもいいんですが画像によっては全く読めないもしくは違和感を感じさせることもあります。


またヘッダー画像をブラウザ幅&高さいっぱいに表示する設定にしてある場合は検索結果ページでも同じようにヘッダー画像が大きく表示されます。そしてやはり真ん中に控えめに「検索結果」というテキスト。


{UTO}


これ、ユーザーにしてみればヘッダー画像なんてどうでもよく、”早く検索結果を見せてよ”といったところではないかと思うのです。むしろスクロールする手間が増えるだけでヘッダー画像のメリットはほぼないと思ってます。


こういう時は検索結果ページでは強制的にヘッダー画像を非表示にする設定を付けておけばすぐに検索結果だけのページ表示になります。

(あまりないとは思いますが)ヘッダー画像がないトップページだった場合は検索結果ページでもヘッダー画像は表示されません。


そこで《Volar2》では、検索結果ページのみヘッダー画像を非表示にするという設定を用意しました。
やり方は《Volar2》で用意している専用モジュールを有効化するだけです。


{UTO}


モジュールを有効化するとヘッダー画像は表示されず、代わりにシンプルにグレーの背景色の上に「検索結果」と表示されます。


{UTO}


《Volar2》のベースにもなってる「ベーステンプレート」ではデフォルトでグレーの背景色になるようです。
他のテンプレートでは別の背景表示になるかもしれません。